JavaScript嵌套函数this的重定向

函数在嵌套后,this指向了内层的函数,导致无法获取外部定义的数据,也无法修改。

看下面一段代码。

var obj = {
    name: 'wang',
    friends: [ 'zhang', 'li' ],
    loop: function () {
        'use strict';
        this.friends.forEach(
            function (friend) {  
                console.log(this.name+' knows '+friend);  
            }
        );
    }
};
obj.loop();//Cannot read property 'name' of undefined 找不到this

如何重定向this让其重新指向外部,获取/修改外部数据,有三个方法:

1:在进入嵌套函数前,将当前的this保存在一个变量中。

var obj = {
    name: 'wang',
    friends: [ 'zhang', 'li' ],
    loop: function () {
        'use strict';
        var that = this ;
        this.friends.forEach(
            function (friend) {  
                console.log(that.name+' knows '+friend);  
            }
        );
    }
};
obj.loop();//this指向改变,成功获取了外部数据

 2:使用.bind(this)改变this指向

var obj = {
    name: 'wang',
    friends: [ 'zhang', 'li' ],
    loop: function () {
        'use strict';
        this.friends.forEach(
            function (friend) {  
                console.log(this.name+' knows '+friend);  
            }.bind(this)
        );
    }
};
obj.loop();//this指向改变,成功获取外部数据

3.使用callback改变this指向

var obj = {
    name: 'wang',
    friends: ['zhang', 'li'],
    loop: function() {
        'use strict';
        this.friends.forEach(function(friend) {
            console.log(this.name + ' knows ' + friend);
        }, this);
    }
};
obj.loop();//this指向改变,成功获取外部数据

 

posted @ 2021-05-12 16:29  野望之风  阅读(452)  评论(0编辑  收藏  举报