bind(this)和es6箭头函数

最新推荐文章于 2025-04-08 13:45:05 发布

BeterJane

最新推荐文章于 2025-04-08 13:45:05 发布

阅读量3.7k

点赞数

本文链接：https://blog.youkuaiyun.com/u012369271/article/details/71941416

版权

当对象方法作为回调传递时，this的指向可能会引起问题。例如在遍历数组并将其元素推送到对象属性的数组时，this默认指向window而非对象本身。解决方法包括在forEach中指定this、使用bind方法、直接调用对象的push方法，或者使用ES6的箭头函数，确保this保持原指向。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果将一个对象的方法作为回调函数传入,你需要定义一个确定的this,否则它将作为一个函数来执行，即this的指向会出现问题.例如:
我们想遍历一个数组，并把数组的每一项放入一个新数组，而这个新数组和push方法是一个对象obj的属性及方法，我们感觉正常写法如下

var obj={
    ar:[],
    push: function (c) {
        console.log(this);-->打印window
        this.ar.push(c);
    }
}

    var arr=[1,2,3];
    arr.forEach(obj.push)
    console.log(obj.ar);

但是却报错：TypeError: Array.prototype.push called on null or undefined 意思是在该对象上没有push方法，果然打印这个方法中的this是指向window的而不是obj，这自然无法调用obj的push方法，于是我们想到要修改this的指向，让它指向obj就好了
方法一：为forEach方法的第二个参数设置this指向的对象，这个参数一般我们用不到，因此被忽略了，不清楚的可以再去看一下forEach的基本使用方法，这样就正常了,我们打印一下push方法中的this指向也是正确指向了obj

var obj={
    ar:[],
    push: function (c) {
        console.log(this);-->obj
        this.ar.push(c)
    }
}

    var arr=[1,2,3];
    arr.forEach(obj.push,obj)
    console.log(obj.ar);--> [1, 2, 3]

方法二：我们还可以用bind来为this重新设置指向，让其指向obj

arr.forEach(obj.push.bind(obj));

方法三：在回调函数里面调用obj的push方法

  arr.forEach(function (val) {
        obj.push(val)
    });

方法四：使用箭头函数，其实就是方法三的es6写法！这样可以保证其this就是一开始的指向

arr.forEach((val)=>obj.push(val));