js this 阮一峰_JavaScript关于this指向的问题

前短时间在js this指向问题上有些迷茫，这段时间通过查阅一些资料以及看了阮一峰老师对this指向问题的解析，自己也深受体会，下面就谈一谈通过学习后自己对this指向的深入理解。

一丶关于this不同方式 调用的不同的表现方式

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

在上面的代码中，通过不同的方式对函数f1j进行了调用，然而结果却不一样，这就需要我们考虑对象中的this被调用时到底指向谁？所以我对this进行了专项打印。

通过上图我们可以发现通过对象的方法调用，this指向的则是这个对象，而直接调用this的指向这是Window,所以上面的结果就可以解释了。

那么终究原因是为什么呢？下面我就分享一下，最新‘get’的知识，哈哈哈~~~

二丶进一步解释this的指向问题

通过学习，好多大神也说，js中的this，跟内存里的数据结构有关，所以我就一顿狂补知识。

var obj = {a:5};

把一个对象赋值给变量obj。Js引擎会先在内存里面，生成一个对象{ a: 5 }，然后把这个对象的内存地址赋值给变量obj。

大概就是上图这个意思，也就是说，变量obj是一个地址。如果想要调用obj里的a,那么Js引擎先从obj拿到内存地址，然后再从该地址读出原始的对象，返回它的a属性。

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

{
     a:{
         [value]:5
        }
}

• 当然如果对象中的属性值是函数，那么JS引擎将把函数单独保存在内存中，然后把函数的地址赋给a属性的Value值（我感觉这个和new对象过程里中的的一样，函数保存在内存，把地址返给对象）

三丶this指向，变量的环境问题

var a = 1;
var f1 = function () {
 // var a = 1;
  console.log(a);
};

如上段代码，函数中的a可以在函数内部使用变量，可以使用内部变量，如果内部没有，则会去上级找变量，而变量则是存在Window中，然后再由它提供。所以如下面代码当this出现那么它则会指向提供者Window，那么this.a则是指向window中的a。

var a = 1;
var f1 = function () {
 // var a = 1;
  console.log(this.a);
};

So!!!!

var f = function () { 
  	console.log(this.a) 
  } 
var obj = {
   a: 1,
  f1:f
};
var f1 = obj.f1;
var a = 2;
obj.f1() //1
f1() //2

下面再看上面这个代码，应该就懂一点了吧！！不懂，没事儿，接着往下来。下面这个图就可以看出来函数f1在外面单独执行，this.a则是指向全局环境中的a.

那么在obj中的函数指向，这是指向Obj这个对象的环境，所以如下图，obj.f1() 调用的this.a,则指向1；

自己学到的也就这么多，说实话，如果自己在学习的某方面上遇到了问题，建议去搜一下大神们的解答，那么好多问题都会迎刃而解，而且还会记忆深刻，好了，分享到此结束。

End