理解JavaScript中的this

genedna 发布于2019-08-22 10:42 / 2250人阅读

摘要：别的文章一来就举例子，我这里首先告诉大家一个结论指向的是调用函数的那个对象。这里依然是之前的例子中的俗称箭头函数，使用它来定义匿名函数，同样可以解决的绑定问题这是由于函数体内的就是定义时所在的对象，而不是执行时所在的对象。

一、结论在前

javascript中的this是一个老生常谈的话题，但不知道是之前那些作者没讲清楚还是我太笨没能理解，始终没能真正理解它，随着自己在项目过程中的大量实践，终于对this比较理解，这里作个总结，也与大家分享一下。

别的文章一来就举例子，我这里首先告诉大家一个结论：

this指向的是调用函数的那个对象。

要是觉得理解了就可以不用看后面的文章了：）

二、经典栗子

var name = "The Window";
var object = {
    name: "My Object",
    getName: function() {
        return this.name
    }
};
alert(object.getName());

这是一个所有讲this都会使用的简单而又经典的例子，我们根据一开始的结论----this指向的是调用函数的那个对象，很容易就知道输出结果是My Object，接下来我们将这个经典例子升级。

var name = "The Window";
var object = {
    name: "My Object",
    getName: function() {
        return function () {
            return this.name
        }

    }
};
alert(object.getName()());

请告诉我输出结果是什么。

许多人会说还是My Object，那么你就进入陷阱了。其实这也是JS新手常有的误区，他们总简单地以为this指向this所在的对象，这是错误的！一定要牢记结论this指向的是调用函数的那个对象，这个重要的结论我终于说满三遍。那么我们再来分析上面的代码：

首先我们创建了一个全局变量name，为它赋值"The Window"；接下来我们创建了对象object，它有个属性name，属性值"My Object"，这个对象还包含一个方法getName()，而这个方法会返回一个匿名函数，而匿名函数又返回this.name。

逻辑理清后，我来告诉大家陷阱在哪：

匿名函数执行具有全局性，其this对象通常会指向window

说"通常"就是说有例外，在通过call()或apply()改变函数执行环境的情况下，this就会指向其他对象了，这些函数我之后会讲到，这里不做展开。

ok，我们知道了这个陷阱，但这也只是个没用的知识点，有用的是怎么解决这种尴尬的情况。虽然我之前说很多新手会犯总简单地以为this指向this所在的对象这样的错误，但是我们在实际开发中就是想让this有这样的效果，那么我们该怎么做呢？

三、this的绑定 1.var _this=this

这是最基础的绑定this的方式，将this赋值给一个变量，这个变量可以取任何名字，我喜欢取名_this,有些人喜欢取名that，我们再回顾之前升级的例子：

var name = "The Window";
var object = {
    name: "My Object",
    getName: function() {
        var _this=this
        return function () {
            return _this.name
        }

    }
};
alert(object.getName()());

2.bind()

稍微高级点的方法是使用bind()函数，这是一个ECMAScript 5.1出来的扩展方法，与call()、apply()是"同期生"，他们的关系和差别之后我会专门谈。这里依然是之前的例子：

var name = "The Window";
var object = {
    name: "My Object",
    getName: function() {
        return function () {
            return this.name
        }.bind(this)
    }
};
alert(object.getName()());

3.ES6中的()=>

()=>俗称箭头函数，使用它来定义匿名函数，同样可以解决this的绑定问题

var name = "The Window";
var object = {
    name: "My Object",
    getName: function() {
        return ()=> {
            return this.name
        }
    }
};
alert(object.getName()());

这是由于()=>函数体内的this就是定义时所在的对象，而不是执行时所在的对象。

以上，想到再补充吧...

GPU云服务器云服务器 javaScript中的this js中的this js中的this机制 js中的this与html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91116.html

理解 JavaScript this

摘要：回调函数在回调函数中的指向也会发生变化。在闭包回调函数赋值等场景下我们都可以利用来改变的指向，以达到我们的预期。文章参考系列文章理解闭包理解执行栈理解作用域理解数据类型与变量原文发布在我的公众号，点击查看。这是本系列的第 5 篇文章。还记得上一篇文章中的闭包吗？点击查看文章理解 JavaScript 闭包。在聊 this 之前，先来复习一下闭包： var name = Nei...

zombieda 2019-08-23 14:10 评论0 收藏0
理解 JavaScript 中的 this 关键字

摘要：原文许多人被中的关键字给困扰住了，我想混乱的根源来自人们理所当然地认为中的应该像中的或中的一样工作。尽管有点难理解，但它的原理并不神秘。在浏览器中，全局对象是对象。运算符创建一个新对象并且设置函数中的指向调用函数的新对象。原文：Understanding the this keyword in JavaScript 许多人被JavaScript中的this关键字给困扰住了，我想混乱的...

jayzou 2019-08-21 10:32 评论0 收藏0
JavaScript深入浅出

摘要：理解的函数基础要搞好深入浅出原型使用原型模型，虽然这经常被当作缺点提及，但是只要善于运用，其实基于原型的继承模型比传统的类继承还要强大。中文指南基本操作指南二继续熟悉的几对方法，包括，，。商业转载请联系作者获得授权，非商业转载请注明出处。怎样使用 this 因为本人属于伪前端，因此文中只看懂了 8 成左右，希望能够给大家带来帮助....（据说是阿里的前端妹子写的） this 的值到底...

blair 2019-08-21 18:26 评论0 收藏0
我对JavaScript中this的一些理解

摘要：匿名函数的执行环境具有全局性，因此它的对象通常指向。如果对此有疑惑，可以看知乎上的答案知乎匿名函数的指向为什么是作为对象方法的调用，指向该对象当函数作为某个对象的方法调用时，就指这个函数所在的对象。因为日常工作中经常使用到this，而且在JavaScript中this的指向问题也很容易让人混淆一部分知识。这段时间翻阅了一些书籍也查阅了网上一些资料然后结合自己的经验，为了能让自...

focusj 2019-08-23 15:23 评论0 收藏0
理解 JavaScript call()/apply()/bind()

摘要：理解文章中已经比较全面的分析了在中的指向问题，用一句话来总结就是的指向一定是在执行时决定的，指向被调用函数的对象。与和直接执行原函数不同的是，返回的是一个新函数。这个新函数包裹了原函数，并且绑定了的指向为传入的。理解 JavaScript this 文章中已经比较全面的分析了 this 在 JavaScript 中的指向问题，用一句话来总结就是：this 的指向一定是在执行时决定的，...

duan199226 2019-08-23 14:27 评论0 收藏0