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

     <button id="sumit">点击</button>
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