Javascript中的this
一直是一个老大难的问题,在ES6中,箭头函数的1
2
3
<!--more-->
### ES5中的```this
首先需要明确this
绑定的基本原则:this
绑定发生在函数的调用时(而非声明时),也就是所谓的运行时绑定。明确了这一点,我们可以看看实际使用中this
常常遇到的几种情况:
1. 默认绑定全局变量
1 |
|
根据我们上面的原则,函数foo调用时未执行任何绑定操作,this默认指向全局对象,也就是a。需要注意的是,若我们采用1
2
#### 2. 对象中的隐式绑定
function foo() {
console.log(this.a);
}
var b = {
a: 2,
foo: foo
}
b.foo(); //2
var c = {
a: 3,
b: b
}
c.b.foo(); //2
1 |
|
function foo() {
console.log(this.a);
}
var obj = {
a: 2
}
foo.call(obj); // 2
foo.apply(obj); // 2
1 |
|
function foo() {
console.log(this.a);
}
var obj = {
a: 5
};
var obj2 = {
a: 10
};
var bar = foo.bind(obj);
bar(); // 5
bar.apply(obj2); // 5
1 |
|
function foo(a) {
this.a = a;
}
var obj = {
a: 5
};
var baz = foo.bind(obj); // 绑定obj
var bar = new baz(2); // new覆盖了绑定
console.log(bar.a); // 2
1 |
|
function foo() {
console.log(this.a);
}
var obj = {
a: 5,
foo: foo
}
setTimeout(obj.foo, 10); // undefined
1 |
|
setTimeout(function() {
console.log(this.a);
}, 10);
1 |
|
setTimeout(obj.foo.bind(obj), 10); // 5
1 |
|
为了解决绑定丢失的问题,ES6中的箭头函数对this
绑定做了一定的改进,具体来说,就是:箭头函数内的this
始终指向调用它的闭包所绑定的this
。说起来有点拗口,下面还是用setTimeout的例子来解释这句话:
1 |
|
setTimeout对应的闭包是foo(注意js中,闭包只针对函数,Object不是闭包),而foo的this
对应obj,因此setTimeout中,匿名箭头函数的this
指向调用它的闭包(也就是foo函数)对应的this
。可以看到,箭头函数完美解决了匿名函数this绑定丢失的问题。
参考: