深刻理解JavaScript中的this

---

对于刚刚开始接触前端开发的程序猿来讲，不管是平常工做仍是面试新工做，对this的理解与掌握都相当重要，不要着急，学完这节课，你就真正的能理解this其实没那么难。

起源

var obj = {
   name: "hansheng",
   getName:function (){
        console.log(this.name)
   }
}
var name = "shengxiansheng";
var getName = obj.getName;
getName(); //shengxiansheng
obj.getName();//hansheng
复制代码

这段代码，相信小伙伴们都能看得懂，网上搜索的时候，大部分都是这种例子，全部的人都告诉你，this指向运行时调用它的对象。obj.getName()运行时，getName运行在obj环境（上下文），因此，this指向obj，而getName()运行在全局环境下，因此获取到的是全局环境下的name值。 规则是这么定义的，可是，不多有人告诉你，函数的运行环境究竟是怎么决定的。

内存数据结构

JavaScript中，内存分为栈内存和堆内存。

基础数据类型：

• Number
• String
• Boolean
• null
• undefined
• symbol

这些基础数据类型存储在栈内存中。

引用数据类型

• Array
• Function
• Object
• ...

能够认为除了上文提到的基本数据类型之外，全部类型都是引用数据类型。 引用数据类型存在于堆内存中。 举个例子：

var obj  = {name: hansheng};
复制代码

上面的代码中，将一个对象赋值给变量obj。JavaScript引擎会先在堆内存中，生成一个对象{name: hansheng},而后把这个对象的内存地址赋值给变量obj。

也就是说，变量obj是一个内存地址，后面要读obj.name,引擎先从obj中拿到内存地址，而后再从该地址读出原始对象，返回它的name属性。 原始对象以字典结构保存，每个属性名都对应一个属性描述对象。

值为函数

上面的例子中，值为基础数据类型时，显示的很是明显，可是，有可能，对象属性值为函数。

var obj = {
    name:function(){}
}
复制代码

这时候，引擎会将函数单独保存在内存中，而后再将函数的地址赋值给foo属性的value属性。

这就能够解释，为何函数能够在不一样的环境中运行了。

var f = function(){}
var obj  = {
    f: f
}
f(); //单独环境运行
obj.f()//obj环境运行
复制代码

那么问题来了，一个函数能够在不一样的环境中运行，这时候，就须要一种机制，可以在函数体内部得到当前的运行环境。因此，this的出现，就是为了在函数体内部，指代函数当前的运行环境。

var f = function () {
  console.log(this.x);
}

var x = 1;
var obj = {
  f: f,
  x: 2,
};

// 单独执行
f() // 1
// obj 环境执行
obj.f() // 2
复制代码

上面代码中，函数f在全局环境中执行，this.x指向全局环境x。

在obj环境中运行，this.x指向obj.x

回到开头，obj.getName()是经过obj找到的getNamee，因此就在obj环境执行，一旦 var getName = obj.getName，变量getName就直接指向函数自己，因此getName是运行在全局环境中的。

感谢阮一峰大神的分享。 下面的文章我会给你们分享，如何改变this的指向，相信你会学到不同的内容. 切图不易，感谢你们阅读，若是以为不错，记得关注哦。 文章会每周更新两篇，别忘了点赞呦～