前端里的this指向问题

目录

1.代码输出结果

2.代码输出结果

3.代码输出结果

4.代码输出结果

5.代码输出结果

6.代码输出结果

7.代码输出结果

8.代码输出结果

9.代码输出结果

10.代码输出结果

11.代码输出结果

12.代码输出结果

13.代码输出结果

14.代码输出结果

总结

---

1.代码输出结果

function foo() {console.log( this.a );
}function doFoo() {foo();
}var obj = {a: 1,doFoo: doFoo
};var a = 2; 
obj.doFoo()

输出结果为2，因为执行foo的是doFoo函数，函数默认执行window

但是如果doFoo函数里：

function doFoo() {// foo();console.log(this.a);//1}

输出的就是1，因为执行它的是obj对象，会隐式的把this指向obj对象

2.代码输出结果

var a = 10
var obj = {a: 20,say: () => {console.log(this.a)}
}
obj.say() //10  var anotherObj = { a: 30 } 
obj.say.apply(anotherObj) //10

输出结果为10；10

apply或者bind通过绑定会指向里面的参数

但是这个是往外翻两层到window这层，所以都是最外层的a=10

如果换成普通函数的话就是20；30

3.代码输出结果

function a() {console.log(this);
}
a.call(null);

输出结果为window

call里面的参数如果是null或者undefined的话，this就会指向全局对象（浏览器里是window）

但是在严格模式情况下，参数是null输出的就是null；参数是undefined输出的是undefined

4.代码输出结果

var obj = { name: 'cuggz', fun: function(){ console.log(this.name); } 
} 
obj.fun()     // cuggz
new obj.fun() // undefined

第二个new是取出了obj里的fun作为新的构造函数，所以里面没有name参数，结果为undefined

5.代码输出结果

var obj = {say: function() {var f1 = () =>  {console.log("1111", this);}f1();},pro: {getPro:() =>  {console.log(this);}}
}
var o = obj.say;
o();
obj.say();
obj.pro.getPro();

第一个：o=obj.say然后再调用o（），其实相当于是：

o=function() {var f1 = () =>  {console.log("1111", this);}f1();},

而且里面是箭头函数，翻第一层到f1，第二层到o，o是一个函数，它拥有this，与o平级的this就是window

第二个：obj.say() 翻第一层到f1，第二层到say，say平级的this就是obj

第三个：obj.pro.getPro()第一层翻到getPro，翻第二层到pro（注意对象是没有this 的！！只有函数有！），所以第二层直接翻到最外层，this就是window

对象不构成单独的作用域=>没有this

6.代码输出结果

var myObject = {foo: "bar",func: function() {var self = this;console.log(this.foo);  console.log(self.foo);  (function() {console.log(this.foo);  console.log(self.foo);  }());}
};
myObject.func();

func是myObject调用的，所以func里面的this是myObject，那么self也是

this.foo就是bar

self.foo也是bar

下面的函数被调用，里面作用域的this是func，所以它里面没有foo属性，输出undefined

然后最后一个self.foo，这块是一个闭包，里面函数可以调用外层函数的属性self.foo===bar

7.代码输出结果

window.number = 2;
var obj = {number: 3,db1: (function(){console.log(this);this.number *= 4;return function(){console.log(this);this.number *= 5;}})()
}
var db1 = obj.db1;
db1();
obj.db1();
console.log(obj.number);     // 15
console.log(window.number);  // 40

⚠️注意：obj.db1是个立即执行函数，它在obj对象定义完之后就会执行，然后返回后面的函数

所以在下面一系列调用函数之前就会有一次输出window，而且此时window上的number=8，在非严格模式下，自执行函数IIFE输出的this就是window

所以第一次先会输出一个window，此时这个函数变成了这样：

window.number = 2;
var obj = {number: 3,db1: function(){console.log(this);this.number *= 5;}
}
var db1 = obj.db1;
db1();
obj.db1();
console.log(obj.number);     // 15
console.log(window.number);  // 40

db1=obj.db1之后，db1如下：

db1=function(){console.log(this);this.number *= 5;}

打印这个this就是window（db1时函数不是对象），此时window . number=5*8=40

然后调用obj.db1()，this打印obj对象，obj.number=3*5=15

8.代码输出结果

var length = 10;
function fn() {console.log(this.length);
}var obj = {length: 5,method: function(fn) {fn();arguments[0]();}
};obj.method(fn, 1);

fn（）这样调用只是一个普通函数，而不是作为对象的方法去调用，所以this是window，输出10

而arguments承接参数fn和1，但是这次相当于arguments（因为它是个类数组对象！）去调用方法，所以this指向arguments，而且它是伪数组有length，输出2

9.代码输出结果

var a = 1;
function printA(){console.log(this.a);
}
var obj={a:2,foo:printA,bar:function(){printA();}
}obj.foo(); // 2
obj.bar(); // 1
var foo = obj.foo;
foo(); // 1

obj.foo()，foo里的this指向obj；它跟上面的区别是：上面那个只是由obj穿参的，但是不是obj去调用的，只是函数进行到那里去调用了，不是对象调用的，而这个就是obj调用的，所以this是obj；

obj.bar()，现在printA函数就不是由obj对象调用而进行的了，所以printA函数里的this是全局对象，输出1；

var foo=obj.foo，那么foo相当于（foo是函数）：

全局上的foo:printA,this是window，输出1

10.代码输出结果

var x = 3;
var y = 4;
var obj = {x: 1,y: 6,getX: function() {var x = 5;return function() {return this.x;}();},getY: function() {var y = 7;return this.y;}
}
console.log(obj.getX()) // 3
console.log(obj.getY()) // 6

第一个：又是一个立即执行函数，IIFE里面的this指向全局对象，所以x=3

第二个：调用对象是obj，this是obj的this，输出6

11.代码输出结果

 var a = 10; var obt = { a: 20, fn: function(){ var a = 30; console.log(this.a)} }obt.fn();  // 20obt.fn.call(); // 10(obt.fn)(); // 20

obt.fn()调用者是obj，所以函数里的this是obj，输出obj的a，20

obt.fn.call（），call用来改变this，但是里面的参数为空（null），call里的参数为undefined或者null，this就是全局对象window，所以输出a为10

（）的作用是改变运算顺序，所以这个跟第一个没什么区别，输出20

12.代码输出结果

function a(xx){this.x = xx;return this
};
var x = a(5);
var y = a(6);console.log(x.x)  // undefined
console.log(y.x)  // 6

x一开始相当于：

var x=function a（5）{

this.x=5;

return this

}

没有对象调用这个函数，所以this.x说的是window.x=5，最后return this => window，返回的window又赋值回给var x了，所以最外层的window.x=window，x.x=undefined

顺序：

window.x=5

var x=window=>window.x=window

y一开始相当于：

var y=function a（6）{

this.x=6;

return this

}

window上的x=6，返回window赋值给y

顺序：

window.x=6

window=y

输出y.x=6

13.代码输出结果

function foo(something){this.a = something
}var obj1 = {foo: foo
}var obj2 = {}obj1.foo(2); 
console.log(obj1.a); // 2obj1.foo.call(obj2, 3);
console.log(obj2.a); // 3var bar = new obj1.foo(4)
console.log(obj1.a); // 2
console.log(bar.a); // 4

先是调用obj1.foo(2)，obj1去调用的函数，所以obj1里的a是2，下面输出为2

然后obj1.foo.call(obj2,3)，obj2上的a赋值为3

var bar=new obj1.foo(4)这是又new了一个，所以不会赋值之前的2，obj1上的a输出还是2

bar相当于：

var bar=function foo（）{}，注意new出来的比隐式绑定优先级高，所以里面的this是bar，bar的a就是4

14.代码输出结果

function foo(something){this.a = something
}var obj1 = {}var bar = foo.bind(obj1);
bar(2);
console.log(obj1.a); // 2var baz = new bar(3);
console.log(obj1.a); // 2
console.log(baz.a); // 3

这一步相当于：

var bar=function foo(sm){

this.a=sm；（this是obj1）

}，obj1上

bar（2）=> obj1.a=2

var baz= new bar（3），new出来的比bind绑定的优先级高，所以this是baz，baz上的a为3

总结

改变this指向的四种方式：

函数默认指向，this是window

对象调用函数，函数里的this指向对象

显示绑定：call、apply、bind绑定，有参数绑定参数，null或者undefined就是window

通过new绑定this

其中new>显示>对象调用>默认指向

箭头函数里的this是一开始就定义好的，与后来谁去调用没有关系，this会继承自定义时的外层作用域，而且对象不会创建作用域，所以往外翻的时候只能翻到函数上

就比如这张图，obj.say()第一层到f1函数，第二层到say函数，然后找与say函数平级的this

obj.pro.getPro()第一层到getPro函数，第二层到最外层window

还有一些特殊情况比如立即执行匿名函数IIFE，在非严格模式下this就是window