【Javascript】深刻理解this做用域问题

理解this做用域

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

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

不过，在全局函数中，this等于window,匿名函数具备全局性，所以this对象一般指向window,针对于匿名函数this具备全局性的观点还是有争议的，可参考 www.zhihu.com/question/21…

this的指向取决于函数(不包含箭头函数)执行时的环境

验证过程以下：

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

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做用域,对这个demo的代码不太理解的同窗，能够看一下另外一个比较简单的案例

this.x = 9;   
var module = {
  x: 81,
  getX: function() { console.log(this.x) }
};

module.getX(); // 81

var retrieveX = module.getX;
function A(){
  this.x = 22;
  retrieveX() //22
}
A()
复制代码

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()，call函数原理:

Function.prototype.call1 = function(obj,...args){
	obj.fn = this
	obj.fn(...args)
	delete obj.fn
}
复制代码

这样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 foo(){
  var d = 1  // 函数做用域
  this.a = 2
  this.b = 2
  this.c = 2
  this.d = 2
  console.log(a,b,c,d) // 2,1,1,1
}
foo()
复制代码

a为全局做用域中的变量，能够被this对象访问,b/c/d则不行

能够发现，全局做用域中的a变量被改变，b变量与c变量都没有被改变,说明在fn()中经过this访问不到window做用域中的b/c变量
注:这里说的访问不到与const定义的变量是常量没有关系，由于若是访问到的话，是会报typeError的

箭头函数对this做用域的影响

var num = 1
const object = {
  num:2,
  foo: function(){
    return ()=>{
      console.log(this.num)
    }
  }
}
object.foo()  // 2
复制代码

箭头函数 this 指向 所处环境的上下文的 this 值，与是否独立调用或做为属性被调用，没有关系。 箭头函数没有arguments/prototype,不能做为构造函数，不能使用new

总结

1. this的指向取决于函数执行时所建立运行期上下文(execution context)的内部对象,它与当前运行函数的[[scope]]所包含的对象组成了1个新的对象，这个对象就是活动对象，而后此对象会被推入做用域链的前端
2. 若是调用的函数，被某一个对象所拥有，那么该函数在调用时，内部的this指向该对象。
3. this指向与匿名函数没有关系,若是函数在全局做用域window中被独立调用，那么该函数内部的this，则指向undefined。可是在非严格模式中，当this指向undefined时，它会被自动指向全局对象。
4. 在函数被独立调用时，并处于非严格模式下，函数内的this对象有能力也仅能访问到全局做用域中定义的变量即window对象, 块级做用域/函数做用域内的变量都没法被访问
5. 箭头函数 this 指向 所处环境的上下文的 this 值，与是否独立调用或做为属性被调用，没有关系。

相关知识点

不理解new的实践能够查看个人这篇文章【Javascript】完全捋清楚javascript中 new 运算符的实现
对做用域链不是很了解的同窗，能够查看这边文章【Javascript】深刻理解javascript做用域与做用域链