闭包中的this

最新推荐文章于 2024-02-23 15:11:31 发布

masterHuan

最新推荐文章于 2024-02-23 15:11:31 发布

阅读量515

点赞数

CC 4.0 BY-SA版权

分类专栏： javaScript 文章标签：函数闭包对象

本文链接：https://blog.youkuaiyun.com/masterHuan/article/details/77145990

javaScript 专栏收录该内容

5 篇文章

订阅专栏

本文探讨了JavaScript中this关键字的指向问题，在不同上下文中的表现及其解决方法，并介绍了闭包的概念及如何调整闭包中this的指向。

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

在不使用闭包的情况下

this指向的调用该函数的对象

var name = "小刚";
var obj = {
    name:"小明",
    fn:function () {
        console.log(this.name,this);
    }
}
obj.fn() // 小明  obj

闭包函数中this的指向

在使用了闭包的情况下，this会丢失自己原本的指向
下面的例子中this 实际上是指向的window

var name = "小刚";
var obj = {
    name:"小明",
    fn:function () {
          return function () {
            console.log(this.name);
        }
    }
}

obj.fn()()  // 小刚 window

如何修改闭包函数中 this 的指向

1. 使用一个变量保存当前 this（简单易懂的方法）

    var name = "小刚";
    var obj = {
        name:"小明",
        fn:function () {
            var that = this ; 
              return function () {
                console.log(that.name);
            }
        }
    }

obj.fn()() // 小明

2. 使用 call 或 apply方法

 var obj = {
    name: "小明",
    fn: function() {
        var foo = function() {
            console.log(this.name);
        }
        foo.call(this)
        return foo
    }
}

obj.fn()() // 小明

3. 使用 bind 方法

var obj = {
    name: "小明",
    fn: function() {
        return function() {
            console.log(this.name);
        }.bind(this)
    }
}

obj.fn()() // 小明

4. 使用ES6的箭头函数
- 箭头函数中的this完全使用了一套新的规则

var obj = {
    name: "小明",
    fn: function() {
        return () => {
            console.log(this.name)
        }
    }
}

obj.fn()()  // 小明