JavaScript嵌套函数this的重定向

最新推荐文章于 2024-04-03 12:39:13 发布

DecadeScript

最新推荐文章于 2024-04-03 12:39:13 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript 函数嵌套 this

本文链接：https://blog.youkuaiyun.com/u010703975/article/details/48446287

javascript 专栏收录该内容

18 篇文章

订阅专栏

本文探讨了在JavaScript嵌套函数中，this的指向问题。当在嵌套函数内部，this不再指向预期的对象，导致错误。解决这个问题的方法包括：1) 保存外部函数的this到一个变量；2) 使用.bind()方法绑定this；3) 在使用数组方法如forEach时，利用其内置的回调函数。如有疑问，可联系作者decadecode@foxmail.com。

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

在嵌套函数里，this的指向已经不是那么的明朗了。
看下面一段代码。

var obj = {
    name: 'Jane',
    friends: [ 'Tarzan', 'Cheeta' ],
    loop: function () {
        'use strict';
        this.friends.forEach(
            function (friend) {  
                console.log(this.name+' knows '+friend);  
            }
        );
    }
};
obj.loop();//Cannot read property 'name' of undefined

这里就直接报错了。
至于为什么，直接看下面一段代码。

var obj = {
    name: 'Jane',
    friends: [ 'Tarzan', 'Cheeta' ],
    loop: function () {
        'use strict';
console.log(this);.//Object {name: "Jane", friends: Array[2]}
        this.friends.forEach(
            function (friend) {  
console.log(this);//undefined
                console.log(this.name+' knows '+friend);  
            }
        );
    }
};
obj.loop();

可以看出来，因为嵌套的原因，嵌套函数里的this已经没有指向任何对象了。解决这个问题，有三个方法。
1：在进入嵌套函数前，将当前的this保存在一个变量中。

var obj = {
    name: 'Jane',
    friends: [ 'Tarzan', 'Cheeta' ],
    loop: function () {
        'use strict';
        var that = this ;
        this.friends.forEach(
            function (friend) {  
                console.log(that.name+' knows '+friend);  
            }
        );
    }
};
obj.loop();//这样可以正常输出

2：使用bind().

var obj = {
    name: 'Jane',
    friends: [ 'Tarzan', 'Cheeta' ],
    loop: function () {
        'use strict';
        this.friends.forEach(
            function (friend) {  
                console.log(this.name+' knows '+friend);  
            }.bind(this)
        );
    }
};
obj.loop();//这样可以正常输出

3:使用forEach的callback，详情请看 Examination Methods

var obj = {
    name: 'Jane',
    friends: ['Tarzan', 'Cheeta'],
    loop: function() {
        'use strict';
        this.friends.forEach(function(friend) {
            console.log(this.name + ' knows ' + friend);
        }, this);
    }
};
obj.loop();