1. 全局对象
在说this
之前,首先要知道,在JavaScript中,有一个默认是全局对象window。
例如,我们定义了一个全局作用域的变量x
:
var x = 'hello javascript';
那么我们所定义的x
实际为window.x
。JavaScript中函数也是变量的一种。
2. this
如果在一个对象中,将对象中某一个键所对应的值用函数表示,则这个函数称为方法。
在一个方法内部,this
是一个特殊变量,它始终指向当前对象。
var getAge = function () {
var y = new Date().getFullYear();
return y - this.birth
};
var person = {
'name': 'ccc',
'birth': 1995,
'age': getAge
};
var fn = person.age
console.log(person.age()); //25
console.log(getAge()); //NaN
console.log(fn()); // NaN
由于this
指向当前对象,所以:
- 在调用
person.age()
时,this.birth
可以获得person
的birth
属性,从而计算出age
所对象的值。 - 在直接调用
getAge()
时,this
指向的当前对象为window
,所以this.birth
为NaN
。 - 将
person.age
赋给fn
,其实就是把函数getAge
赋给fn
,所以fn() = getAge()
,所以最后的值与2中一样为NaN
。
值得说明的是,当上述代码'use strict';
时,函数的this
指向undefined
(只有原来指向window
时才会变),所以this.birth
会得到TypeError
错误。
3. apply和call
通过apply
或call
,我们可以控制this的指向。
apply()
接收两个参数,第一个参数就是需要绑定的this
变量,第二个参数是Array
,表示函数本身的参数。而call()
把参数按顺序传入。
所以我们可以通过这两个函数将上述代码全部改为可以正常输出:
'use strict';
var getAge = function () {
var y = new Date().getFullYear();
return y - this.birth
};
var person = {
'name': 'ccc',
'birth': 1995,
'age': getAge
};
var fn = person.age
console.log(person.age()); //25
console.log(getAge.apply(person,[])); //25
console.log(fn.call(person, )); //25
对普通函数的调用,可以把this绑定为null,也就是会调用函数本身:
console.log(Math.max.apply(null, [-2, 5, 8])); // 8
console.log(Math.max.call(null, 3, -5, 4)); // 4
4. 箭头函数
箭头函数完全修复了this的指向,this总是指向词法作用域,也就是外层调用者obj:
var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; // 1990
var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
return fn();
}
};
obj.getAge(); // 25
由于this在箭头函数中已经按照词法作用域绑定了,所以,用call()或者apply()调用箭头函数时,无法对this进行绑定,即传入的第一个参数被忽略:
var obj = {
birth: 1990,
getAge: function (year) {
var b = this.birth; // 1990
var fn = (y) => y - this.birth; // this.birth仍是1990
return fn.call({birth:2000}, year);
}
};
obj.getAge(2015); // 25
{birth:2000}
只要语法正确可以为任何值(由于被忽略)。