this 的问题

与其他语言相比,函数的this关键字在JavaScript中的表现略有不同,此外,在严格模式非严格模式之间也会有一些差别。

在绝大多数情况下,函数的调用方式决定了this的值。this不能在执行期间被赋值,并且在每次函数被调用时this的值也可能会不同。ES5引入了bind方法来设置函数的this值,而不用考虑函数如何被调用的,ES2015引入了支持this词法解析的箭头函数(它在闭合的执行上下文内设置this的值)。

语法

this

全局上下文

无论是否在严格模式下,在全局执行上下文中(在任何函数体外部)this都指代全局对象。

// 在浏览器中, window 对象同时也是全局对象:

console.log(this === window); // true

a = 37;

console.log(window.a); // 37

this.b = "MDN";

console.log(window.b) //"MDN"

console.log(b) //"MDN"

函数上下文

在函数内部,this的值取决于函数被调用的方式

1. 直接调用

因为下面的代码不是在严格模式下执行,且this的值不是通过调用设置的,所以this的值默认指向全局对象。

function f1(){

return this;

}

//在浏览器中:

f1() === window;  //在浏览器中,全局对象是window

//在Node中:

f1() === global;

然而,在严格模式下,this将保持他进入执行上下文时的值,所以下面的this将会默认为undefined。

function f2(){

"use strict"; // 这里是严格模式

return this;

}

f2() === undefined; // true

所以,在严格模式下,如果this未在执行的上下文中定义,那它将会默认为undefined。

在第二个例子中,this的确应该是undefined,因为f2是被直接调用的,而不是作为对象的属性/方法调用的(比如window.f2())。有一些浏览器最初在支持严格模式时没有正确实现这个功能,于是它们错误地返回了window对象。

2. call和apply方法

如果要想把this的值从一个context传到另一个,就要用call,或者apply方法。

译者注:call()和apply()方法属于间接调用(indirect invocation)。

// 一个对象可以作为call和apply的第一个参数,并且this会被绑定到这个对象。

var obj = {a: 'Custom'};

// 这个属性是在global对象定义的。

var a = 'Global';

function whatsThis(arg) {

return this.a;  // this的值取决于函数的调用方式

}

whatsThis();          // 直接调用,      返回'Global'

whatsThis.call(obj);  // 通过call调用,  返回'Custom'

whatsThis.apply(obj); // 通过apply调用 ,返回'Custom'

当一个函数的函数体中使用了this关键字时,通过call()方法和apply()方法调用,this的值可以绑定到一个指定的对象上。call()和apply()的所有函数都继承自Function.prototype。

function add(c, d) {

return this.a + this.b + c + d;

}

var o = {a: 1, b: 3};

// 第一个参数是作为‘this’使用的对象

// 后续参数作为参数传递给函数调用

add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16

// 第一个参数也是作为‘this’使用的对象

// 第二个参数是一个数组,数组里的元素用作函数调用中的参数

add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

使用call和apply函数的时候要注意,如果传递的this值不是一个对象,JavaScript将会尝试使用内部ToObject操作将其转换为对象。因此,如果传递的值是一个原始值比如 7 或 'foo' ,那么就会使用相关构造函数将它转换为对象,所以原始值7通过new Number(7)被转换为对象,而字符串'foo'使用new String('foo')转化为对象,例如:

function bar() {

console.log(Object.prototype.toString.call(this));

}

//原始值 7 被隐式转换为对象

bar.call(7); // [object Number]

3. bind 方法

ECMAScript 5 引入了Function.prototype.bind。调用f.bind(某个对象)会创建一个与f具有相同函数体和作用域的函数,但是在这个新函数中,this将永久地被绑定到了bind的第一个参数,无论这个函数是如何被调用的。

function f(){

return this.a;

}

//this被固定到了传入的对象上

var g = f.bind({a:"azerty"});

console.log(g()); // azerty

var h = g.bind({a:'yoo'}); //bind只生效一次!

console.log(h()); // azerty

var o = {a:37, f:f, g:g, h:h};

console.log(o.f(), o.g(), o.h()); // 37, azerty, azerty

4. 箭头函数

箭头函数中,this是根据当前的词法作用域来决定的,就是说,箭头函数会继承外层函数调用的this绑定(无论this绑定到什么)。在全局作用域中,它会绑定到全局对象上:

var globalObject = this;

var foo = (() => this);

console.log(foo() === globalObject); // true

注意:如果将thisArg传递给call、bind、或者apply,它将被忽略(译者注:thisArg即传入三个函数中的第一个参数)。不过你仍然可以为调用添加参数,不过第一个参数应该设置为null。

// 接着上面的代码

// 作为对象的一个方法调用

var obj = {foo: foo};

console.log(obj.foo() === globalObject); // true

// 尝试使用call来设定this

console.log(foo.call(obj) === globalObject); // true

// 尝试使用bind来设定this

foo = foo.bind(obj);

console.log(foo() === globalObject); // true

无论如何,foo的this被设置为它被创建时的上下文(在上面的例子中,就是global对象)。这同样适用于在其他函数中创建的箭头函数:这些箭头函数的this被设置为外层执行上下文。

// 创建一个含有bar方法的obj对象,bar返回一个函数,这个函数返回它自己的this,

// 这个返回的函数是以箭头函数创建的,所以它的this被永久绑定到了它外层函数的this。

// bar的值可以在调用中设置,它反过来又设置返回函数的值。

var obj = {bar: function() {

var x = (() => this);

return x;

}

};

// 作为obj对象的一个方法来调用bar,把它的this绑定到obj。

// x所指向的匿名函数赋值给fn。

var fn = obj.bar();

// 直接调用fn而不设置this,通常(即不使用箭头函数的情况)默认为全局对象,若在严格模式则为undefined

console.log(fn() === obj); // true

// 但是注意,如果你只是引用obj的方法,而没有调用它(this是在函数调用过程中设置的)

var fn2 = obj.bar;

// 那么调用箭头函数后,this指向window,因为它从 bar 继承了this。

console.log(fn2()() == window); // true

在上面的例子中,一个赋值给了obj.bar的函数(称它为匿名函数A) ,返回了另一个箭头函数(称它为匿名函数B)。因此,函数B被调用时,它的this被永久地设置为obj.bar(匿名函数A)的this。

而且当这个返回的函数B被调用时,它的this将始终为最初设定的值。

在上面的代码示例中,函数B的 this被设定为函数A的this,也就是obj,所以即使以某种默认方式调用它(比如默认让它指向全局对象或者undefined,或者在前面示例中的任何其他方法),它仍然会指向obj.

5. 作为对象的一个方法

当以对象里的方法的方式调用函数时,它们的this是调用该函数的对象.

下面的例子中,当o.f()被调用时,函数内的this将绑定到o对象。

var o = {

prop: 37,

f: function() {

return this.prop;

}

};

console.log(o.f()); // logs 37

请注意,这样的行为,根本不受函数定义方式或位置的影响。在前面的例子中,我们在定义对象o的同时,将成员f定义了一个匿名函数。但是,我们也可以首先定义函数,然后再将其附属到o.f。这样做会导致相同的行为:

var o = {prop: 37};

function independent() {

return this.prop;

}

o.f = independent;

console.log(o.f()); // logs 37

这说明this的值只与 函数从o的成员f中调用的方式 有关系。

类似的,this的绑定只受最靠近的成员引用的影响。在下面的这个例子中,我们把一个方法g当作对象o.b的函数调用。在这次执行期间,函数中的this将指向o.b。事实上,这与对象本身的成员没有多大关系,最靠近的引用才是最重要的。

o.b = {

g: independent,

prop: 42

};

console.log(o.b.g()); // logs 42

6. 原型链中的this

相同的概念在定义在原型链中的方法也是一致的。如果该方法存在于一个对象的原型链上,那么this指向的是调用这个方法的对象,就好像该方法本来就存在于这个对象上。

var o = {

f : function(){

return this.a + this.b;

}

};

var p = Object.create(o);

p.a = 1;

p.b = 4;

console.log(p.f()); // 5

在这个例子中,对象p没有属于它自己的f属性,它的f属性继承自它的原型。但是这对于最终在o中找到f属性的查找过程来说没有关系;查找过程首先从p.f的引用开始,所以函数中的this指向p。也就是说,因为f是作为p的方法调用的,所以它的this指向了p。这是JavaScript的原型继承中的一个有趣的特性。

7. getter 与 setter 中的 this

再次,相同的概念也适用时的函数作为一个getter或者 一个setter调用。用作getter或setter的函数都会把this绑定到正在设置或获取属性的对象。

function sum() {

return this.a + this.b + this.c;

}

var o = {

a: 1,

b: 2,

c: 3,

get average() {

return (this.a + this.b + this.c) / 3;

}

};

Object.defineProperty(o, 'sum', {

get: sum, enumerable: true, configurable: true});

console.log(o.average, o.sum); // logs 2, 6

8. 作为一个构造函数

当一个函数用作构造函数时(使用new关键字),它的this被绑定到正在构造的新对象

注意:虽然构造器返回的默认值是this所指的那个对象,但它仍可以手动返回其他的对象(如果返回值不是一个对象,则返回this对象)。

/*

* 构造函数这样工作:

*

* function MyConstructor(){

*  // 函数实体写在这里

*  // 根据需要在this上创建属性,然后赋值给它们,比如:

*  this.fum = "nom";

*  // 等等...

*

*  // 如果函数具有返回对象的return语句,则该对象将是 new 表达式的结果。

*  // 否则,表达式的结果是当前绑定到 this 的对象。

*  //(即通常看到的常见情况)。

* }

*/

function C(){

this.a = 37;

}

var o = new C();

console.log(o.a); // logs 37

function C2(){

this.a = 37;

return {a:38};

}

o = new C2();

console.log(o.a); // logs 38

在刚刚的例子中(C2),因为在调用构造函数的过程中,手动的设置了返回对象,与this绑定的默认对象被丢弃了。(这基本上使得语句“this.a = 37;”成了“僵尸”代码,实际上并不是真正的“僵尸”,这条语句执行了,但是对于外部没有任何影响,因此完全可以忽略它)。

9. 作为一个DOM事件处理函数

当函数被用作事件处理函数时,它的this指向触发事件的元素(一些浏览器在使用非addEventListener的函数动态添加监听函数时不遵守这个约定)。

// 被调用时,将关联的元素变成蓝色

function bluify(e){

console.log(this === e.currentTarget); // 总是 true

// 当 currentTarget 和 target 是同一个对象是为 true

console.log(this === e.target);

this.style.backgroundColor = '#A5D9F3';

}

// 获取文档中的所有元素的列表

var elements = document.getElementsByTagName('*');

// 将bluify作为元素的点击监听函数,当元素被点击时,就会变成蓝色

for(var i=0 ; i

elements[i].addEventListener('click', bluify, false);

}

10. 作为一个内联事件处理函数

当代码被内联处理函数调用时,它的this指向监听器所在的DOM元素:

Show this

上面的alert会显示button。注意只有外层代码中的this是这样设置的:

Show inner this

在这种情况下,没有设置内部函数的this,所以它指向global/window对象(即非严格模式下调用的函数未设置 this 时指向的默认对象)。

推荐阅读更多精彩内容