先来谈谈ES5中的this
在ES5中,每个函数在被调用时都会自动取得this这个特殊的对象。因此,每个内部函数不能访问到外部函数的this对象。(跟变量访问一样,如果局部环境存在某个变量,就不会去搜索全局环境的同名变量)。
** this对象是在运行时基于函数的执行环境决定的。**
执行环境:
a.全局环境
运行在全局上下文(在任何函数体外部),this指向全局对象,并且,无论是否是在严格模式下,this都指代全局对象。在浏览器中,this指向window对象。
console.log(this === window); // true;
b.函数环境
在函数内部,this的值取决于函数是如何调用的。
-
直接调用,非严格模式下,this默认指向全局对象。不管调用的函数是在全局函数还是局部环境。
function app() { console.log(this === window); // true } app(); // 全局调用 function foo() { function bar() { console.log(this === window); // true } bar(); // 局部调用 } foo();
-
直接调用,严格模式下,this默认指向undefined。不管调用的函数是在全局函数还是局部环境。
'use strict' function app() { console.log(this === undefined); // true } app(); function foo() { function bar() { console.log(this === undefined); // true } bar(); } foo();
-
作为对象调用
当函数以对象的方法被调用时,它的this是调用该函数的对象,并且是距离最近的对象。var o = { sayName: function() { console.log(this === o); // true } } o.sayName();
-
作为构造函数调用
当函数被当做构造函数调用时,this指向刚要被创建的新对象。
function Person() { this.name = 'noshower'; } var person = new Person(); console.log(person.name); //'noshower'
-
使用call和apply调用,改变函数内部this的绑定值。
function foo() { console.log(this.name); //'noshower' } var obj = { name: 'noshower' } foo.call(obj);
// 函数foo内部的this对象被绑定到了obj对象上。
-
使用bind方法,会永久把this与一个对象绑定。无论这个函数如何被调用,都改变不了this。
function foo() { console.log(this.name); // 'noshower' } var obj1 = { name: 'noshower' } var obj2 = { name: 'DaLin' } var a = foo.bind(obj1); //用bind方法,将this进行永久绑定。 a.call(obj2); // 此时使用call方法将改变不了this的指向。
下面我们开始讲ES6箭头函数中的this对象
箭头函数被调用的时候,不会自动绑定一个this对象。换句话说,箭头函数根本就没有自己的this。它的this都是捕获自其所在上下文的this值。
-
作为匿名函数被调用。
function foo() { console.log(this); //{name:'noshower'} setTimeout(() => { console.log('name:', this.name); //noshower }, 100); } var name = 'DaLin'; foo.call({ name: 'noshower' });
上面代码中,我们用call()方法,将函数foo的this对象绑定到了对象{name:'noshower'}上。由于,箭头函数没有this变量,所以,箭头函数能够访问到外部环境的this变量。此时,箭头函数内部,访问到的是foo函数的this对象。因此,this.name的值是'noshower'。
-
作为方法被调用
var obj = { name: 'noshower', sayName: () => this.name } var name = 'bar'; console.log(obj.sayName());
上面代码中,箭头函数是作为对象的方法。因为,箭头函数本身是不绑定this对象的。因此,它只能从外部搬运this对象。上面代码中,只有全局环境存在this对象,因此返回的是window.name,即'bar'。
-
在方法内部被调用
var obj = { name: 'noshower', sayName: function() { var a = () => this.name; console.log(a()); // noshower } } var name = 'bar'; obj.sayName();
上面代码中,箭头函数是在sayName方法中运行的。此时,箭头函数的this对象,搬运的是sayName方法的this对象。当sayName函数作为方法调用时,它的this对象指向obj对象。因此,箭头函数的this.name就是obj.name,即'noshower';
-
使用new 操作符调用,会抛出错误
var Obj = (name) => { this.name = name; } new Obj('noshower');
上面的代码,箭头函数作为构造函数被调用,会报错。原因是,箭头函数没有自己的this对象,就没法给this添加属性。
-
使用call和apply,bind()调用
var o = (val) => { console.log(this.name, val); // bar,bar }; var obj = { name: 'foo' } var name = 'bar'; o.call(obj, name);
上面代码中,箭头函数使用了call方法来调用。原本想将函数的this绑定在obj对象上面。结果显示,this被绑定在了全局对象上了。这是因为,箭头函数没有自己的this对象,此时使用call方法仅仅起到了传递参数的作用,没有改变它的this对象。它的this对象依旧来自外部执行环境。
总结一下
箭头函数没有自己的this对象,它总是搬运外部环境的this对象。因此,只要离它最近的外部环境中的this改变,箭头函数中的this就改变。如果离它最近的环境中的this,没有改变。那么箭头函数中的this就不会改变。