8种this指向问题汇总

目录

1.作为对象方法被调用

2. 作为普通函数被调用时

3.作为构造函数被调用时

4.箭头函数里面的this

5.call&& apply&&bind

call或apply调用

总结补充

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个最后调用它的对象

1.作为对象方法被调用

当函数作为对象方法被调用时this指向该对象

     var obj = {     age: 18,     fn: function () {  console.log(this === obj);//true  console.log(this.age);//18     }  } console.log(obj.fn());

2. 作为普通函数被调用时

this指向全局对象window

严格模式下 this被规定不会指向全局 则是undefined

    window.age = 18; function fn() {     console.log(this.age);//18 } fn()

3.作为构造函数被调用时

构造函数主要用来初始化对象 为对象的成员变量赋值初始值 他总于new一起使用

new在构造函数中做了哪些事

1.在内存中创建一个新的对象

2.让this指向这个新对象

3.在构造函数里面的代码,给这个新对象添加属性和方法

4.返回这个新对象 所以构造函数里面一般不需要return

构造函数里面的this

构造函数里的this指向 new创建的实例化对象(没有return的情况下)

如果构造函数内出现了return并且是一个object对象那么最终的运算结果返回这个对象

只要构造函数不返回数据或者返回基本数据类型 this仍然指向实例

   function Fn() {     this.age = 18;     //此时a.age是return的结果20     return {  age: 20     } } let a = new Fn(); console.log(a.age);//20

4.箭头函数里面的this

箭头函数里面没有自己的this 他只会从自己的作用域链上一层继承this

      this.age = 20; var obj = {     age: 18,     fn: () => {  console.log(this.age);//20     }  } obj.fn()

5.call&& apply&&bind

在function的原型上有三个方法 call apply bind,所有函数都是Function的实例,所以所有的函数都可以调用这三个方法,而这三个方法都是用来改变this指向的

call或apply调用

• 都是把函数立即执行改变函数中的this指向(第一个参数是谁this就是谁)
• apply同理 唯一的区别就是传参的格式不一样,apply把传递给函数的形参以数组的形式管理起来,最终的效果和call一样,也是把数组中的每一项作为实参,一个个的传递给函数
• 真实项目中建议大家使用call,因为其性能好一些(三个及以上参数,call的性能明显比apply好一些)
• this存储的值 null.undefined.对象
• 一个也不写,非严格模式下是window 严格模式下是undefined
• null 严格模式下是null非严格模式下是window
   

    function fn(x, y) { console.log('加油'); console.log(this);//this指向window console.log(x + y);    }    var o = { name: 'andy'    }    fn.call()//call 呼叫 可以调用函数    fn.call(o, 1, 2)//第一个值是this指向, 后边实参    fn.apply(o, [10, 20])//apply传递数组    fn.call(10, 20)//this-->new Numbe(10) x-->20 y-->undefined 

apply的应用小技巧 :获取数组中的最大值

    let arr = [10, 20, 58, 79, 66]    console.log(Math.max(arr));//NaN,要求传递数字,不是直接传递数组    console.log(Math.max(...arr));//es6中的展开运算符    console.log(Math.max.apply(Math, arr));

call VS bind

call是立即把函数执行,而bind只是预处理函数中的this和参数,不会立即执行

点击按钮 ,fn方法执行,我们想让其中的this变成obj ev事件对象也存在 在传递10/20

     点击const sumit = document.querySelector("#sumit")    const fn = function fn(x, y, ev) { console.log(this, ev);    }    let obj = { name: 'obj'    }    sumit.onclick = fn;//点击按钮时this-->sumit x-->PointerEvent事件对象    // 点击按钮 ,fn方法执行,我们想让其中的this变成obj ev事件对象也存在 在传递10/20    // sumit.onclick = fn.call(obj, 10, 20)//这样处理是错误的,因为call把函数立即执行了    sumit.onclick = function (ev) { //先把事件行为绑定匿名函数,先执行匿名函数(获取ev对象)在匿名函数执行的时候this-->sumit,我们在让真正处理的fn函数执行,此时可以基于call方法改变this'了 fn.call(obj, 10, 20, ev)     }    sumit.onclick = fn.bind(obj, 10, 20)//这样就可以了

总结补充

函数中的this指向

1. 普通函数下this是window  严格模式下是undefined
2. 对象或方法this指向调用者
3. 构造函数里面的this指向实例对象(原型对象里面的this也指向实例对象 在本篇中没有展开)
4. 箭头函数没有自己的this
5. call和apply可以改变this指向

再来补充几条

1. 绑定点击事件里面的this指向的是调用者
2. 定时器里面的this指向window
3. 立即执行函数里面的this指向window

由此我们可以得出)函数执行的时候，看它前面有没有点，如果有，点前面是谁，this就是谁，如果没有，就是window