js 中的 this 关键字

前言：this关键字是一个非常重要的语法点，毫不夸张地说，不理解它的含义，大部分开发任务都无法完成。（阮一峰老师原话）

1、那this到底是个什么鬼？（知其然）

简单一句话概括：this就是属性或方法“当前”所在的对象。意思就是不管是什么场合，this都有一个共同点：它总是返回一个对象。

function f() {
  return '姓名：'+ this.name;
}

var A = {
  name: '张三',
  describe: f
};

var B = {
  name: '李四',
  describe: f
};

A.describe() // "姓名：张三"
B.describe() // "姓名：李四"

　　上面代码中，函数f内部使用了this关键字，随着f所在的对象不同，this的指向也不同。即this的指向是可变的。（属性同样的道理）

2、this的设计初衷（知其所以然）

JavaScript 语言之所以有 this 的设计，跟内存里面的数据结构有关系。

var obj = { foo:  5 };

　　上面的代码将一个对象赋值给变量obj。JavaScript 引擎会先在内存里面，生成一个对象{ foo: 5 }，然后把这个对象的内存地址赋值给变量obj。也就是说，变量obj是一个地址（reference）。后面如果要读取obj.foo，引擎先从obj拿到内存地址，然后再从该地址读出原始的对象，返回它的foo属性。

原始的对象以字典结构保存，每一个属性名都对应一个属性描述对象。举例来说，上面例子的foo属性，实际上是以下面的形式保存的。

{
  foo: {
    [[value]]: 5
    [[writable]]: true
    [[enumerable]]: true
    [[configurable]]: true
  }
}

　　正如上面我们想当属性值是函数时也就四我们所说的方法的时候？？？？？

var obj = { foo: function () {} };

//即上面例子的  5变成 函数function () {} 时

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

{
  foo: {
    [[value]]: 函数的地址
    ...
  }
}

　　由于函数是一个单独的值，所以它可以在不同的环境（上下文）执行。

var f = function () {};
var obj = { f: f };

// 单独执行
f()

// obj 环境执行
obj.f()

　　（真相在这里），由于函数可以在不同的运行环境执行，所以需要有一种机制，能够在函数体内部获得当前的运行环境（context）。所以，this就出现了，它的设计目的就是在函数体内部，指代函数当前的运行环境。

上个例子琢磨一下

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

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

// 单独执行
f() // 1

// obj 环境执行
obj.f() // 2

最后还是看看阮一峰老师的吧：https://wangdoc.com/javascript/oop/this.html