在js中,this总是指向一个对象,具体要看那个对象在运行时函数的执行环境(动态绑定
),即“函数在谁那被调用,this就指向谁”。
1、在对象的方法内调用——指向该对象
例如
var obj = {
name: '小阔爱',
getName: function () {
console.log('this === obj?', this === obj);
console.log('this.name=', this.name);
}
};
obj.getName(); // '小阔爱'
2、在普通方法内调用——指向全局对象window
例如
window.name = '小阔爱';
var getName = function () {
return this.name;
};
console.log('getName=', getName()); // 小阔爱
或者
window.name = '小阔爱';
var obj = {
name: '宝批龙',
getName: function () {
return this.name;
}
};
var getName = obj.getName;
console.log('getName=', getName()); // 小阔爱
或者——当函数里面嵌套函数时,指向window
window.id = 'xiaokuoai';
document.getElementById('baopilong').onclick = function () {
console.log('this.id=', this.id); // 'baopilong'
var newFun = function () {
console.log('this.id=', this.id); // 'xiaokuoai'
}
newFun();
};
注意:在ES5的strict模式下,普通函数内的this被规定为不会指向window,而是undefined
例如
function func () {
'user strict'
console.log('this=', this); // undefined
}
func()
3、构造器调用(被new运算符调用)
当函数被new运算符调用时,该函数总会返回一个对象。
例如(一般情况)
var obj = function () {
this.name = '小阔爱';
};
var newObj = new obj();
console.log('newObj.name=', newObj.name); // '小阔爱'
特殊情况:(函数有返回值的情况)
如果返回值是一个对象,那么this指向的就是那个返回的对象,如果返回值不是一个对象那么this还是指向函数的实例。(区分构造器是否显式地返回一个object类型的对象)
例如(不显式返回object对象)
var obj = function () {
this.name = '小阔爱';
return '宝批龙';
};
var newObj = new obj();
console.log('newObj.name=', newObj.name); // '小阔爱'
以及(显式返回object对象)
var obj = function () {
this.name = '小阔爱';
return {
name: '宝批龙'
};
};
var newObj = new obj();
console.log('newObj.name=', newObj.name); // '宝批龙'
4、call或apply调用
跟普通函数相比,这种方式可以动态改变传入函数的this
例如
var obj1 = {
name: '小阔爱',
getName: function () {
return this.name;
}
};
var obj2 = {
name: '宝批龙'
};
console.log('obj1.getName=', obj1.getName()); // '小阔爱'
console.log('obj1.getName.call(obj2)=', obj1.getName.call(obj2)); // '宝批龙'