this与JavaScript中的四种调用模式

this是什么

—In most languages, ‘this’ is a reference to the current object instantiated by the class. In JavaScript, ‘this’ normally refers to the object which ‘owns’ the method, but it depends on how a function is called.
—大多语言中,’this’代表由类实例化的当前对象。在JavaScript中,’this’通常表示’拥有’方法的对象,但具体取决于一个函数被调用的方式。

方法调用模式

当一个函数被保存为对象的一个属性并调用该方法时,this被绑定至该对象。即使用”obj.method”形式

1
2
3
4
5
6
7
8
var val = "outer";
var methodCall = {
val: "inner",
printVal: function(){
console.log(this.val);
}
}
methodCall.printVal(); //"inner"

构造器调用模式

类似面向对象语言中对象的概念,使用new后,this被绑定至该实例。

1
2
3
4
5
6
7
8
9
10
11
var val = "outer";
function methodCall(){
this.val = "inner";
}
methodCall.prototype = {
printVal: function(){
console.log(this.val);
}
}
var a = new methodCall();
a.printVal(); //"inner"

函数调用模式

函数未作为对象的属性时,其当作一个正常函数来调用,此时this被绑定至全局对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var val = "outer";
function methodCall(){
this.val = "inner";
}
methodCall.prototype = {
printVal: function(){
var that = this;
var innerPrintVal = function(){
console.log(that.val);
console.log(this.val)
}
innerPrintVal();
}
}
var a = new methodCall();
a.printVal();

打印结果为

1
2
inner
outer

  • a.printVal调用printVal的方式为构造器调用模式,这时的this被绑定到a的作用域。将其赋给that,此时that就代表了a的作用域。
  • a.printVal调用innerPrintVal的方式为函数调用模式,这时的this被绑定到全局作用域。

注意,在a.printVal中,this是被绑定在a的作用域上的。但是在调用innerPrintVal时,this在该函数中被再一次绑定到全局作用域了。因此在innerPrintVal中调用console.log(this.val)打印的结果为”outer”

apply/call模式

手动指定this的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var val = "outer";

function printVal(){
console.log(this.val);
}
function methodCall(){
this.val = "inner";
}
methodCall.prototype = {
printVal: function(){
console.log(this.val);
}
}
var a = new methodCall();
a.printVal(); //"inner"
a.printVal.call(a); //"inner"
printVal.call(a); //"inner"

printVal(); //"outer"
printVal.apply(window); //"outer"
a.printVal.apply(window); //"outer"

输出结果为:

1
2
3
4
5
6
inner
inner
inner
outer
outer
outer

可以看出,无论是采用构造器调用模式的a.printVal或是采用函数调用模式的printVal,this均会被apply/call绑定为手动指定的值

本文首发于http://www.miaoyunze.com/,转载请注明出处