javascript对象不完全探索记录01：this! which？

rubyshen 发布于2019-08-21 17:54 / 2276人阅读

温馨提示：作者的爬坑记录，对你等大神完全没有价值，别在我这浪费生命

这一切，源于阮大神博文学习Javascript闭包（Closure）- 阮一峰中的一道思考题

//问题1:
var name = "The Window";
var object = {
　　name : "My Object",
　　getNameFunc : function(){
　　　　return function(){
　　　　　　return this.name;
　　　　};
　　}
};
alert(object.getNameFunc()());

这道题，出现在了关于闭包的博文之中，而阮大神的一句“如果你能理解下面两段代码的运行结果，应该就算理解闭包的运行机制了。”彻底激发了我的斗志。

乍一看，外面一个变量叫name，对象内还有一个变量是name这就很明显了，这就是在考察对于作用域链的理解了，这里返回的应该是一个妥妥的“My Object”，
可是运行结果却狠狠大打了我的脸，但是弹出的一个大大“The Window”让我不得不重新面对这一段代码，这里面的this指得到底是什么？
进一步尝试，将this打印到控制台上出现的结果是“window”，这下就明白了，问题就出在了this上，它并没有按照我所想的去指向了object而是指向了全局对象window这就是为什么会返回“The Window”了

//在这里，把this去掉也会返回“My Object”具体原因还没整明白以后补充

再看阮大神给出的第二道题就更懵逼了

//问题2:
var name = "The Window";
var object = {
　　name : "My Object",
　　getNameFunc : function(){
　　　　var that = this;
　　　　return function(){
　　　　　　return that.name;
　　　　};
　　}
};
alert(object.getNameFunc()());//My Object

按照这几行代码的意思，在getNameFunc的this指向的是object而在其内部的函数中，则会指向全局对象，这去哪说理，再次又开始狂搜博文

Javascript的this用法 - 阮一峰
彻底理解js中this的指向，不必硬背。- 追梦子
JS 中 this 关键字详解 - 苹果小萝卜
JavaScript中知而不全的this - Snandy

看了一圈，心里算是有了普，get到了一个基本的概念
this指向的是调用它的对象
这也就是说，在对象定义的时候this并没有一个具体的指向，只有当被调用时，this才会被赋值给调用他的对象，了解了这个概念，再回头看看第一题，还是有问题这句object.getNameFunc()()在执行的时候到底发生了什么，我们对第一题做一些改变

var name = "The Window";
var object = {
　　name : "My Object",
　　getNameFunc : function(){
       console.log(this.name)
       return function(){
　　　　    console.log(this.name)
　　　　    return this.name;
　　　　};
　　}
};
object.getNameFunc()//My Object 执行语句1
object.getNameFunc()()//The Window 执行语句2

在执行语句1中，可以理解getNameFunc()是被object对象所调用，在函数中的this就指向了object，所以就出现了这个结果，
在执行语句2中，我们可以理解为执行语句1的返回函数，被执行了一次，而执行它的就是我们的window对象了，为了便于理解我们把执行语句2进行改写

var getVal = object.getNameFunc()
getVal()//The Window

实际上，执行语句2就是执行了getVal()而这个函数的执行对象是window，所以就出现了上文中的结果。
我们再来看问题2就很明白了var that = this;是在object.getNameFunc()执行的过程中被执行的，所以这里的this指向的就是object而把他赋值给变量that后实际上就是把object赋值给了that（有不严谨之处，领会精神），而由于that处于内部函数的作用域链中，不能被释放，连同返回的内部函数形成闭包（终于见到你了），所以一直都指向了object，所以题目2的最终结果就是“My Object”了

长出一口气

这么看this这个概念很是神奇，并且包含了许多对象方面的知识，使我不禁对彻底弄明白他的各种应用方法和原理产生了不切实际的幻想，那么交给写后文的未来的我去梳理把

能看到这的都是真爱

GPU云服务器云服务器对象名this javascript的this javaScript中的this 不完全

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

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

javascript对象不完全探索记录02：疯狂打call！给谁打call？打什么call？

摘要：注意该方法的作用和方法类似，只有一个区别，就是方法接受的是若干个参数的列表，而方法接受的是一个包含多个参数的数组。指定的参数列表。返回值返回值是你调用的方法的返回值，若该方法没有返回值，则返回。温馨提示：作者的爬坑记录，对你等大神完全没有价值，别在我这浪费生命温馨提示-续：打call原本是属于我们偶像宅文化中的专业名词，指的是饭们在看live时在台下配合爱豆演出的节奏喊口号，举例：超...

Shimmer 2019-08-21 17:58 评论0 收藏0
从-1开始的ES6探索之旅01：颜文字成精的箭头函数上篇 - 大哥，你指哪呢？

摘要：基础语法参数参数参数函数声明参数参数参数表达式单一相当于参数参数参数表达式当只有一个参数时，圆括号是可选的单一参数函数声明单一参数函数声明没有参数的函数应该写成一对圆括号。温馨提示：作者的爬坑记录，对你等大神完全没有价值，别在我这浪费生命温馨提示-续：你们要非得看，我也拦不住，但是至少得准备个支持ES6的Chrome浏览器吧？之前在某些大神的代码中出现一串神秘符号类似于num =>...

Snailclimb 2019-08-21 18:36 评论0 收藏0
javascript闭包不完全探索记录01：闭包？啥馅的？

摘要：闭包一词来源于以下两者的结合要执行的代码块由于自由变量被包含在代码块中，这些自由变量以及它们引用的对象没有被释放和为自由变量提供绑定的计算环境作用域。在以及及以上等语言中都能找到对闭包不同程度的支持。温馨提示：作者的爬坑记录，对你等大神完全没有价值，别在我这浪费生命闭包，好吃吗？第一次听到这个词，很不幸是在一次面试中，可想而知结果很细碎，从此闭包和跨域在我匮乏的前端知识中成为了...

TANKING 2019-08-21 17:41 评论0 收藏0
从-1开始的ES6探索之旅02：小伙子，你对象咋来的？续篇 - 你的对象班（class）里来的？

摘要：这是因为子类没有自己的对象，而是继承父类的对象，然后对其进行加工。温馨提示：作者的爬坑记录，对你等大神完全没有价值，别在我这浪费生命温馨提示-续：你们要非得看，我也拦不住，但是至少得准备个支持ES6的Chrome浏览器吧？温馨提示-再续：ES6简直了，放着不用简直令人发指！书接上回，即便是程序员，也还是能够通过自己的努力辛辛苦苦找到合适对象的，见前文《javascript对象不完全...

incredible 2019-08-21 18:41 评论0 收藏0
javascript对象不完全探索记录05：小伙子，你对象咋来的？下篇 - 啥样的对象适合你

摘要：温馨提示作者的爬坑记录，对你等大神完全没有价值，别在我这浪费生命温馨提示续本文内容简单，发扬了潜入潜出的精神，请谨慎浪费时间温馨提示再续魔卡少女樱动画再开撒花经过前两篇文章的梳理对象不完全探索记录小伙子，你对象咋来的上篇对象不完全探索记温馨提示：作者的爬坑记录，对你等大神完全没有价值，别在我这浪费生命温馨提示-续：本文内容简单，发扬了潜入潜出的精神，请谨慎浪费时间温馨提示-再续：《魔...

hlcfan 2019-08-21 18:27 评论0 收藏0