JavaScript this 关键字的理解
涵义
this
总是返回一个对象;this
就是属性或方法“当前”所在的对象;- 由于对象的属性可以赋给另一个对象,所以属性所在的当前对象是可变的,即
this
的指向是可变的; - 绝大多数情况下,函数的调用方法决定了
this
的值(运行时绑定); this
关键字是函数运行时自动生成的一个内部对象,只能在函数内部使用,总是指向调用它的对象;
function f() {
return '姓名:' + this.name;
}
var A = {
name: '张三',
describe: f
};
var B = {
name: '李四',
describe: f
};
A.describe() // "姓名:张三"
B.describe() // "姓名:李四"
上面代码中,函数 f
内部使用了 this
关键字,随着 f
所在的对象不同,this
的指向也不同。
实质
JavaScript 语言之所以有 this 的设计,跟内存里面的数据结构有关系。
var obj = { foo: 5 };
上面的代码将一个对象赋值给变量 obj
。JavaScript 引擎会先在内存里面,生成一个对象 { foo: 5 }
,然后把这个对象的内存地址赋值给变量 obj
。也就是说,变量 obj
是一个地址(reference)。后面要读取 obj.foo
,引擎会先从 obj
拿到内存地址,然后再从该地址读出原始的对象,返回它的 foo
属性。
属性的值可能是一个函数
var obj = { foo: function () {} };
这时,引擎会将函数单独保存在内存中,然后再将函数的地址赋值给 foo
属性。
由于函数是一个单独的值,所以它可以再不同的环境(上下文)执行。
vat f = function () {};
var obj = { f: f };
// 单独执行
f()
// obj 环境执行
obj.f()
这时,就需要有一种机制,能够在函数体内部获得当前的运行环境(context)。所以,this
就出现了,它的设计目的就是在函数体内部,指代函数当前的运行环境。
var f = function () {
console.log(this.x);
}
var x = 1;
var obj = {
f: f,
x: 2,
};
// 单独执行
f() // 1
// obj 环境执行
obj.f() // 2
上面代码中,函数 f
在全局执行环境,this.x
指向全局环境的 x
;在 obj
环境执行,this.x
指向 obj.x
。
使用场合
this
主要有以下几个使用场合。
1. 全局环境
全局环境使用 this
,它指的就是顶层对象 window
。
console.log(this === window); // true
function f() {
console.log(this === window);
}
f() // true
上面代码说明,不管是不是在函数内部,只要是在全局环境下运行,this
就是指顶层对象 window
。
2. 构造函数
构造函数中的 this
, 指的是实例对象。
var obj = function(p) {
this.p = p;
};
var o = new obj('Hello World!');
o.p; // "Hello World!"
上面代码定义了一个构造函数 Obj
。由于 this
指向实例对象,所以在构造函数内部定义 this.p
,就相当于定义实例对象有一个 p
属性。
3. 对象的方法
如果对象的方法里面包含 this
,this
的指向就是方法运行时所在的对象。该方法赋值给另一个对象,就会改变 this
的指向。
var obj = {
foo: function() {
console.log(this);
}
}
obj.foo() // obj
如果 this
所在的方法不在对象的第一层,这时 this
只是指向当前一层的对象,而不会继承更上面的层。
var a = {
p: 'Hello',
b: {
m: function() {
console.log(this.p);
}
}
}
a.b.m() // undefined
使用注意点
1. 避免多层 this
由于 this
的指向是不确定的,所以切勿在函数中包含多层的 this
。
JavaScript 提供了严格模式,也可以影响避免这种情况。严格模式下,如果函数内部的 this
指向顶层对象,就会报错。
var counter = {
count: 0
}
counter.inc = function() {
'use strict';
this.count++;
};
var f = counter.inc;
f() // TypeError: Cannot read property 'count' of undefined
上面代码中,inc
方法通过 use strict
声明采用严格模式,这是内部的 this
一旦指向顶层对象,就会报错。
2. 避免数组处理方法中的 this
数组的 map
和 forEach
方法,允许提供一个函数作为参数。这个函数内部不应该使用 this
。
var o = {
v: 'hello',
p: ['a1', 'a2'],
f: function f() {
this.p.forEach(function (item) {
console.log(this.v + ' ' + item);
});
}
}
o.f()
// undefined a1
// undefined a2
上面代码中,forEach
方法的回调函数中的 this
,其实是指向 window
对象,因此取不到 o.v
的值。原因跟上一段的多层 this
是一样的,就是内部的 this
不指向外部,而指向顶层对象。
解决这个问题的一种方法,是使用中间变量固定 this
:
var o = {
v: 'hello',
p: ['a1', 'a2'],
f: function f() {
var that = this;
this.p.forEach(function (item) {
console.log(that.v + ' ' + item);
});
}
}
o.f()
// hello a1
// hello a2
另一种方法是将 this
当作 forEach
方法的第二个参数,固定它的运行环境:
var o = {
v: 'hello',
p: ['a1', 'a2'],
f: function f() {
this.p.forEach(function (item) {
console.log(this.v + ' ' + item);
}, this);
}
}
o.f()
// hello a1
// hello a2
3. 避免回调函数中的 this
回调函数中的 this
往往会改变指向,最好避免使用。
var o = new Object();
o.f = function () {
console.log(this === o);
}
// jQuery 的写法
$('#button').on('click', o.f);
上面代码中,点击按钮以后,控制台会显示 false
。原因是此时 this
不再指向 o
对象,而是指向按钮的 DOM 对象,因为 f
方法是在按钮对象的环境中被调用的。
为了解决这个问题,可以采用绑定 this 的方法(call,apply,bind)。
4. 严格模式下
禁止 this 关键字指向全局对象。
function f(){
return !this;
}
// 返回 false,因为“this”指向全局对象,“!this” 就是 false
function f(){
"use strict";
return !this;
}
// 返回 true,因为严格模式下,this 的值为 undefined,所以“!this”为 true。
因此,使用构造函数时,如果忘了加 new
,this
不再指向全局对象,而是报错。
function f(){
"use strict";
this.a = 1;
};
f(); // 报错,this 未定义