前端this指向总结

使用js开发的时候，很多初学者以及很多的老老师多多少少会被this的指向搞蒙圈 ，其实只要你彻彻底底的理解了它，它一点都不难，记住最核心的一句话：哪个对象调用函数，函数里面的this指向哪个对象。我相信看了这篇文章，你不在处于一个蒙圈的状态。

离不开的是函数，接下来了解几个函数的调用场景：

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

分析：

• 对于直接调用foo来说，不管foo函数被放在什么地方，this一定是window(普通/声明函数调用，这个情况没特殊意义，就是指向全局对象window)
• 对于obj.foo()来说，我们只需要记住，谁调用了函数，this就指向谁，所以此时foo函数中的this就是obj对象。哪个对象调用函数，函数里面的this指向哪个对象
• 对于new的方法来说，this被永远绑定在了c上面，不会被任何方式改变this，this指向的是实例化对象
• 友情提示：在构造函数里面返回一个对象，会直接返回这个对象，而不是执行构造函数后创建的对象

this指向大致分为这几类

1. 普通函数调用     ➡️   this指向window
2. 全局作用域         ➡️   this指向window
3. 构造函数调用     ➡️   this指向实例对象 原型对象里面的方法也指向实例对象
4. 对象方法调用     ➡️   this指向该方法所属对象
5. 事件绑定方法     ➡️   this指向绑定事件对象
6. 定时器函数         ➡️   this指向window
7. 立即执行函数     ➡️   this指向window
8. 在全局作用域函数中  ➡️  this指向window对象

JavaScript除了提供了正常模式外，还提供了严格模式 ,那么在严格模式下几个特殊的this指向会有何不同呢？

1. 严格模式下，全局作用域中函数中的this是undefined
2. 严格模式下，在全局作用域中，this指向window对象
3. 严格模式下，如果构造函数不加 new 调用，this指向的是 undefined ，如果给它赋值，会报错

实例：

1、在严格模式下，全局作用域中函数中的this是undefined

"use strict";
console.log("严格模式");
console.log('在全局作用域中函数中的this');
function f1(){
console.log(this);
}function f2(){
function f3(){
console.log(this);
}
f3();
}
f1();
f2();

 

 2、在严格模式下，在全局作用域中，this指向window对象

"use strict";console.log("严格模式");
console.log("在全局作用域中的this");
console.log("this.document === document",this.document === document);
console.log("this === window",this === window);
this.a = 9804;
console.log('this.a === window.a===',window.a);

3、严格模式下，如果构造函数不加 new 调用，this指向的是 undefined ，如果给它赋值，会报错

        'use strict';function Star() {this.sex = '男';}Star();

'use strict';function Star() {this.sex = '男';}var ldh = new Star();console.log(ldh.sex);

 箭头函数中this指向问题

指向箭头函数定义时所处的对象，而不是箭头函数使用时所在的对象，默认使用父级的this.

箭头函数中的this,首先从它的父级作用域中找，如果父级作用域还是箭头函数，再往上找，如此直至找到this的指向 

       function fn() {console.log(this); //此时this指向的是objreturn () => {console.log(this); //由于箭头函数被定义在了fn函数的内部，所以此时的this指向的是fn函数里面的this}}const obj = { name: "张三" };const res = fn.call(obj); //call函数将fn函数的this指向obj对象res();

 接下来我们分析一道经典的面试题

 obj对象里面有age属性和say方法 ，首先查看我们箭头函数所在的位置，它的父级作用域是obj，但是obj是一个对象，不能产生作用域，所以实际上箭头函数被定义在全局作用域下，此时的this指向的是window，但是在全局作用域下 并没有age属性，所以弹出undefined;

var obj = {age: 20,say: () => {alert(this.age) }}obj.say();

 在全局作用域下定义了一个age，此时this指向的就是全局作用域下的age=100； 

        var age = 100;var obj = {age: 20,say: () => {alert(this.age) ;}}obj.say();

  

当然this的指向并不是固定的，改变函数内部this指向的方法

call()方法调用一个对象，简单理解为调用函数的方式，但是它可以改变函数的this指向

语法：fun.call(thisArg,传递的实参，传递的实参...)

参数：

• 第一个参数是this指向谁
• 后面的额参数是调用函数时传递的参数

应用：

1. 调用函数
2. 改变this指向
3. 主要应用：实现继承

从下面案例分析this的指向

在调用父类的时候，让父构造函数里的this指向子构造函数里面的this

        //call()主要的作用可以实现继承function Father(uname, age, sex) {this.uname = uname;this.age = age;this.sex = sex;}function Son(uname, age, sex) {Father.call(this, uname, age, sex);}var son = new Son('刘德华', 18, '男');console.log(son);

 apply()方法

语法：fun.apply(thisArg,[argsArry]).

参数：

1. thisArg：在fun函数运行时指定的this值
2. 第二个参数：传递的值，必须包含在数组里面
3. 返回值就是函数的返回值，因为它就是调用函数

应用：

• 调用函数
• 利用apply借助于数学内置对象求最大值
• 注意：后面传递的参数用数组的方式书写

 此时this不需要指向谁，所以就是null，第二个是将数组arr传递给math

但是更加完美的写法就是把null改为Math 因为Math调用max方法所以将this指向Math

        //apply主要应用 var arr = [22, 1, 14, 55];var max = Math.max.apply(null, arr); console.log(max);

bind()方法不会调用函数。但是能改变函数内部this指向

语法：fun.bind(thisArg,arg1,arg2...)

1. thisArg: 在fun函数运行时指定的this的值
2. 后面的参数：传递的其他参数
3. 返回由指定的this值和初始化参数改造的原函数拷贝，也就是原函数改变this之后产生的新函数
4. 不会立即调用函数 

 
   fn.bind(t)返回的是改变this指向后的函数 所以f是一个函数

var t = {name: '你好'}function fn() {console.log(this);};var f = fn.bind(t);//此时只是将fn绑定了，this指向的是t对象，但是并不会调用fn函数f();

call、apply、bind 总结 

 相同点：

都可以改变函数内部的this指向

区别点：

1. call和apply会调用函数，并且改变函数内部this指向
2. call和apply传递的参数不一样，call传递参数arg1,arg2...形式 apply必须数组形式[arg]
3. bind不会调用函数，可以改变函数内部this指向

主要应用场景：

1. call经常做继承
2. apply经常跟数组有关系，比如借助于数学对象实现数组最大值最小值
3. bind 不调用函数，但是还想改变this指向，比如改变定时器内部的this指向 

看了这篇博客，不知道大家有没有收获呢 期待大家的反馈哟❤️