【Javascript】深入理解this作用域问题以及new/let/var/const对this作

snowLu 发布于2019-08-23 17:14 / 2644人阅读

摘要：理解作用域高级程序设计中有说到对象是在运行时基于函数的执行环境绑定的在全局函数中，等于，而当函数被作为某个对象调用时，等于那个对象。指向与匿名函数没有关系如果函数独立调用，那么该函数内部的，则指向。

理解this作用域

《javascript高级程序设计》中有说到:

this对象是在运行时基于函数的执行环境绑定的：在全局函数中，this等于window，而当函数被作为某个对象调用时，this等于那个对象。不过，匿名函数具有全局性，因此this对象同常指向window

针对于匿名函数this具有全局性的观点仍是有争议的，可参考 https://www.zhihu.com/questio...

关于闭包经常会看到这么一道题：

var name = "The Window";
    var object = {
        name : "My Object",
        getNameFunc : function(){
            return function(){
                return this.name;
            };
        }
    };
console.log(object.getNameFunc()());//result:The Window

在这里，getNameFunc return了1个匿名函数,可能你会认为这就是输出值为The Window的原因

但是，我们再来尝试写1个匿名函数

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

可以发现，同样是匿名函数,却输出了The Window, My Object

在作用域链中，执行函数时会创建一个称为“运行期上下文(execution context)”的内部对象，运行期上下文定义了函数执行时的环境。

个人认为是因为函数被object.getNameFunc()调用，funAA的作用域链被初始化为undefined即window的[[Scope]]所包含的对象,导致输出结果为window.name

对作用域链不是很了解的同学，可以查看这边文章【Javascript】深入理解javascript作用域与作用域链

实践是检验真理的唯一标准，让我们用代码测试一下

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

可以发现，输出了 My Object, My Object
getNameFunc仍为匿名函数，但是return的是this.funAA(),此时,this.funAA变成了由object调用，验证了我们之前的猜想：

函数执行环境影响了this作用域

new运算符对this作用域对影响

还是实践出真理，我们先来写一段代码

var a = 2
function test(){
    this.a = 1
    console.log(window.a)
}
new test()
test()

可以看出输出结果为2,1
new运算符改变了test函数内this的作用域,改变的原理是通过在函数内创建一个对象obj,并通过test.call(obj),执行obj.test(),这样test的父函数就变成了obj,test复制的是obj的作用域链,而不是window

function subNew(){
    var obj = {}
    var res = test.call(obj,...arguments)
}
subNew()   // 作用等于new test()

let/var/const对this作用域的影响

继续写代码通过事实来说明

var a = 1   //函数作用域
let b =1   //块级作用域
const c = 1   //块级作用域

function fn(){
    this.a = 2
    this.b = 2
    this.c =2
    console.log(this.a,this.b,this.c)
    console.log(a,b,c)
    //this指向全局作用域  this === window //true
}
fn()

var声明的变量属于函数作用域,let/const声明的变量属于块级作用域

可以发现，全局作用域中的a变量被改变，b变量与c变量都没有被改变,说明在fn()中通过this访问不到window作用域中的b/c变量
注:这里说的访问不到与const定义的变量是常量没有关系，因为如果访问到的话，是会报typeError的

总结

1.this的指向取决于函数执行时所创建运行期上下文(execution context)的内部对象,它与当前运行函数的[[scope]]所包含的对象组成了1个新的对象，这个对象就是活动对象，然后此对象会被推入作用域链的前端
2.如果调用的函数，被某一个对象所拥有，那么该函数在调用时，内部的this指向该对象。
3.this指向与匿名函数没有关系,如果函数独立调用，那么该函数内部的this，则指向undefined。但是在非严格模式中，当this指向undefined时，它会被自动指向全局对象。
4.在作用域链中，var定义的变量属于函数作用域,可以被子级作用域下的this访问,而let/const定义的变量属于块级作用域，不允许在其子级作用域中被访问

相关知识点

不理解new的实践可以查看我的这篇文章【Javascript】彻底捋清楚javascript中 new 运算符的实现
对作用域链不是很了解的同学，可以查看这边文章【Javascript】深入理解javascript作用域与作用域链

如果我的文章对你有帮助，欢迎关注我的博客,JS/Python/算法系列,码不停题！！！

GPU云服务器云服务器 this作用域 javascript的this javaScript中的this javascript中this详解

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

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

JavaScript深入浅出

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

blair 2019-08-21 18:26 评论0 收藏0
深入理解JavaScript系列1:编写高质量JavaScript代码的基本要点

摘要：访问全局对象在浏览器中，全局对象可以通过属性在代码的任何位置访问除非你做了些比较出格的事情，像是声明了一个名为的局部变量。前言才华横溢的Stoyan Stefanov，在他写的由O’Reilly初版的新书《JavaScript Patterns》(JavaScript模式)中，我想要是为我们的读者贡献其摘要，那会是件很美妙的事情。具体一点就是编写高质量JavaScript的一些要素...

Enlightenment 2019-08-19 17:18 评论0 收藏0
深入javascript——作用域和闭包

摘要：注意由于闭包会额外的附带函数的作用域内部匿名函数携带外部函数的作用域，因此，闭包会比其它函数多占用些内存空间，过度的使用可能会导致内存占用的增加。作用域和作用域链是javascript中非常重要的特性，对于他们的理解直接关系到对于整个javascript体系的理解，而闭包又是对作用域的延伸，也是在实际开发中经常使用的一个特性，实际上，不仅仅是javascript，在很多语言中都...

oogh 2019-08-21 10:18 评论0 收藏0
这一次，我们换种姿势学习 javascript

摘要：操作符或调用函数时传入参数的操作都会导致关联作用域的赋值操作。此外可以使用和来设置对象及其属性的不可变性级别。忽视这一点会导致许多问题。使用调用函数时会把新对象的属性关联到其他对象。前言《你不知道的 javascript》是一个前端学习必读的系列，让不求甚解的JavaScript开发者迎难而上，深入语言内部，弄清楚JavaScript每一个零部件的用途。本书介绍了该系列的两个主题：...

zone 2019-08-26 11:54 评论0 收藏0
一道JS面试题所引发的"血案"，透过现象寻本质，再从本质看现象

摘要：一看这二逼就是周杰伦的死忠粉看看控制台输出，确实没错就是对象。从根本上来说，作用域是基于函数的，而执行环境是基于对象的例如全局执行环境即全局对象。全局对象全局属性和函数可用于所有内建的对象。全局对象只是一个对象，而不是类。觉得本人写的不算很烂的话，可以登录关注一下我的GitHub博客，博客会坚持写下去。今天同学去面试，做了两道面试题,全部做错了，发过来给我看,我一眼就看出来了，因为...

QiShare 2019-08-21 15:17 评论0 收藏0