关于javascript中this的trick

最新推荐文章于 2025-09-12 14:04:02 发布

weixin_34221112

最新推荐文章于 2025-09-12 14:04:02 发布

阅读量116

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000004756134

本文深入探讨了JavaScript中this关键字的工作原理及其在不同上下文中的行为表现。通过具体示例介绍了如何解决因this指向问题导致的错误，并提供了两种有效解决方案。

看如下对象定义：

'use strict'
var jane = {
    name ： ‘Jane’,
    display : function(){
        retrun 'Person named ' + this.name;
    }
};

这样能正常调用

jane.display();

下面的调用会出错：

var func = jane.display;
func()
TypeError: Cannot read property 'name' of undefined

因为，this指向已经改变，正确的方式如下：

var func2 = jane.display.bind(jane);
func2()
'Penson named Jane'

所有函数都有其特殊的this变量，如下面的forEach

var jane = {
    name : 'Jane',
    friends: ['Tarzan', 'Cheeta'],
    sayHiToFriends: function(){
        'use strict';
        this.friends.forEach(function(friend) {
            // 'this' is undefined here
            console.log(this.name + ' says hi to '+ friend);
        });
    }
}

调用sayHiToFriends会产生一个错误：

jane.sayHiToFriends()
TypeError: Cannot read property 'name' of undefined

解决方案一：将this保存在不同的变量中

var jane = {
    name : 'Jane',
    friends: ['Tarzan', 'Cheeta'],
    sayHiToFriends: function(){
        'use strict';
        var that = this;
        this.friends.forEach(function(friend) {
            console.log(that.name + ' says hi to '+ friend);
        });
    }
}

解决方案二：利用forEach的第二个参数，它可以给this指定一个值

var jane = {
    name : 'Jane',
    friends: ['Tarzan', 'Cheeta'],
    sayHiToFriends: function(){
        'use strict';
        this.friends.forEach(function(friend) {
            console.log(this.name + ' says hi to '+ friend);
        }, this);
    }
}