2021.06.22（JavaScript中的this理解）

Posted 2021-06-22

var obj = {
  foo: function () { 
      console.log(this.bar)
  },
  bar: 1
};
var foo = obj.foo;
var bar = 2;
obj.foo() // 1
foo() // 2

obj.foo()和foo() 是同一个函数，为什么输出结果不一样呢？
因为函数的运行环境不一样。obj.foo()函数运行在obj内部，foo()函数运行在全局，在obj内部，bar的值是1，全局bar的值是2

内存的数据结构

 

• javascript 语言之所以有this的设计，跟内存里面的数据结构有关系。
• JavaScript引擎会先在内存里面，生成一个对象，然后把这个对象的内存地址复制给变量。

    var obj = {
        foo : 5 
    }

obj变量实际引用的是{ foo : 5 }对象的地址，后面如果要读取obj.foo，引擎先从obj拿到内存地址，然后再从该地址读出原始的对象，返回它的foo属性，原始的对象以字典解构保存，每个属性名都对应一个属性的描述对象。
{ foo : 5 } 存储则是

    foo : {
        value:5,
        xxxx1:true,
        xxxx2:true
    }

但是foo很有可能是个函数。如果是个函数的话，引擎会将函数淡出保存在内存中，然后再将函数的地址赋值给foo的属性value

    var foo = {
        foo:function () {}
    }
    // foo是个函数 那么foo的value 就不再是个值了 而是内存地址
     foo : {
        value:0X1100001110111 // 内存地址
        xxxx1:true,
        xxxx2:true
     }

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

2021-06-22  14:52:36