关于this指向这个问题，活生生折磨了我一个下午，回来静下心捋顺一下，总结出来一下规律。
当然，this这个复杂的问题不是一句两句可以说清楚，作为菜鸟，我的总结也就是为了做一些 ‘坑人的’ 笔试题，所以只能欢迎吐槽了。
题中一般分为两种情况
- 调用者是函数
- 函数通过对象被调用（
this指向对象 ） - 函数单独被调用（
this指向undefined，非严格模式下指向全局） - 调用者是对象
- 对象声明在函数中 （
this指向undefined，非严格模式下指向全局） - 对象声明在函数外 （
this指向全局）
PS:匿名函数的存在会导致this指向的丢失与以上情况不符合，用bind()来解决就可以了
举一些栗子🌰🌰🌰
- ** 栗子🌰一**
var a = 1;
var obj = {
a:2,
c:this.a + 10,
b: function () {
return this.a;
}
}
console.log(obj.b()); //函数b通过对象obj被调用，this指向obj【2】
console.log(obj.c); //对象声明在函数外，this指向全局【11】
- ** 栗子🌰二**
var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a);
}
}
}
o.b.fn();//fn通过对象被b调用，this指向b【12】
- ** 栗子🌰三**
var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a);
console.log(this);
}
}
}
var j = o.b.fn;//fn未被执行
j();//此时fn单独被调用，this指向全局,全局没有a【undefined】【window】
- ** 栗子🌰四**
var name = '222';
var a = {
name:'111',
say:function () {
console.log(this.name);
}
}
var fun = a.say;//say未被执行
fun();//say单独被执行,this指向全局【222】
a.say();//函数say通过对象a被调用,this指向对象a【111】
var b = {
name: '333',
say: function (fun) {
fun();
}
}
b.say(a.say);//a.say未被执行
fun();//say单独执行,this指向全局【222】
/*b.say(function(){}),但是通过b对象调用的函数say被执行,this指向b,。
但此时的this不是我们要打印的this，我们要打印的this在function(){}里，function里的this指向全局
*/
b.say = a.say;//a.say未被执行,将function赋值给了b，此时b对象也可以打印啦！
b.say();//say函数被对象b调用执行,this指向b【333】
- ** 栗子🌰五**
var name = 'global';
var obj = {
name: 'obj',
getName: function () {
return function () {
console.log(this.name);
}
}
}
obj.getName()();//【global】
/*
var fn = obj.getName();
fn();
*/
call和apply改变this指向
- call和apply的第一个参数都是this的指向
- call的其他参数是一个一个传的
- apply的其他参数以数组形式传递。
function fn(a,b,c) {
console.log(this.a + a + b + c);
}
var obj = {
a: 20
}
fn.call(obj, 10, 20, 30);//【80】
fn.apply(obj, [100, 200, 300]);//【620】
