JavaScript的this总是指向一个对象
具体到实际应用中,this的指向又可以分为以下四种:
-
作为对象的方法调用
-
作为普通函数调用
-
构造器调用
-
apply和call调用
1. 作为对象的方法调用
作为对象方法调用时,this
指向 该对象
。
var obj = {
a: 1,
getA: function() {
console.log(this === obj);
console.log(this.a);
}
};
obj.getA(); // true , 1
2. 作为普通函数调用
作为普通函数调用时,this
总是指向 全局对象
(浏览器中是 window
)。
window.name = 'globalName';
var getName = function() {
console.log(this.name);
};
getName(); // 'globalName'
var myObject = {
name: "ObjectName",
getName: function() {
console.log(this.name)
}
};
myObject.getName(); // 'ObjectName'
// 这里实质上是把function() {console.log(this.name)}
// 这句话赋值给了theName。thisName在全局对象中调用,自然读取的是全局对象的name值
var theName = myObject.getName;
theName(); // 'globalName'
3. 构造器调用
作为构造器调用时,this
指向返回的 这个对象
。
var myClass = function() {
this.name = "Lxxyx";
};
var obj = new myClass();
console.log(obj.name); // Lxxyx
console.log(obj) // myClass {name: "Lxxyx"}
但是如果构造函数中手动指定了 return 其它对象
,那么 this将不起作用
。
如果 return 别的数据类型
,则没有问题。
var myClass = function() {
this.name = "Lxxyx";
// 加入return时,则返回的是别的对象。this不起作用。
return {
name:"ReturnOthers"
}
};
var obj = new myClass();
console.log(obj.name); // ReturnOthers
4. apply和call调用
call和apply的区别
共同点是第一个参数都是this,即函数运行时依赖的上下文。
apply
方法与 call
方法类似。两者唯一的不同点在于,apply
方法使用 数组
指定参数,而 call
方法每个参数 单独
需要指定:
apply(thisArg, [argsArray])
call(thisArg, arg1, arg2, …)
如果第一个参数为 null/undefined
,则 this
指向 调用的本身
。
如果第一个参数为 null/undefined
,则 this
指向 window(在node环境中则指向global)
。
// 调用Array的原型方法
Array.prototype.push.call(arguments, 3);
函数具有 arguments
属性,而 arguments
是一个 类数组
。
arguments
是不能直接调用数组的方法的,所以我们要用 call
或者 apply
来调用 Array 对象的原型方法。