彻底搞懂Js中this指向，Js中this通俗易懂讲解
静态作用域与动态作用域
Javascript 采用的是词法作用域（静态作用域），也就是说函数的作用域（可以访问到的变量）在函数定义的时候就确定了。
与之相反的是动态作用域，即函数的作用域在函数调用时才确定。
下边的代码可以很好的说明Js是一个静态作用域语言，如果函数的作用域是在运行时确定的话，运行foo函数时， 从 foo 函数内部没有找到局部变量 value后，会从调用函数的作用域，也就是 bar 函数内部查找 value 变量，那么会打印 2。
Js引擎底层的实现为：函数在定义的时候，会把其所属环境（全局环境）的变量生成一个变量对象放入到函数的scope属性，调用函数时，会生成执行环境并创建一个作用域链，即先把函数scope属性中的变量对象放到作用域链中，再利用函数参数和内部变量生成一个活动对象，并放入作用域链的前端。
var value = 1;
function foo() {
console.log(value);
}
function bar() {
var value = 2;
foo();
}
bar(); // 1
this 关键字是 JS 中的动态作用域机制，是为了在 JS 中加入动态作用域而做的努力，因为this指向的对象是在函数调用时绑定的。
在任何函数中，this的指向都不是静态的(static)。它总是在你调用一个函数，但尚未执行函数内部代码前被指定。即this的指向与函数被调用的方式（语法）有关。
下边的代码可以很好的说明这一点
var o = {
a: 10,
b: {
fn: function() {
console.log(this);
}
}
}
o.b.fn(); //指向o中的对象b
var j = o.b.fn;
j(); //指向全局对象
上述代码的执行结果为
可以看到，函数内部的this指向和其调用方式有关，和函数本身的定义方式无关
绑定规则
this对象有四种绑定规则，优先级有高到低分别如下:
- 构造绑定：通过new关键字调用构建函数。此时会生成一个实例对象，并且this指向这个实例对象。这种方式实际上是new的底层实现修改了this指向 var savedThis; function Constr() { // 保存构造函数中的this savedThis = this; } // 通过new关键字执行构造函数 var inst = new Constr(); // 构造函数中的this指向的就是新创建的对象实例inst console.log(savedThis === inst); // true
- 显式绑定：apply()、call()、bind()三个方法改变函数的调用对象（this对象）
- 隐式绑定：某个上下文对象中调用函数。比如使用 obj.foo() 这样的语法来调用函数，函数 foo 中的 this 绑定到 obj 对象 //对象的方法 var o = { a:10, b:{ fn:function(){ console.log(this.a); //undefined,this指向b对象 } } } o.b.fn(); // 事件处理函数 function doAlert() { alert(this); } doAlert(); // 全局对象 var myElem = document.getElementById(test); myElem.onclick = doAlert; myElem.onclick(); // 指向myElem元素
- 默认绑定：不符合上述三种情况，在一个函数中使用了 this，但是没有为 this 绑定对象。这种情况下，严格模式this绑定到undefined，非严格模式this绑定到全局对象（Node 环境中的 global，浏览器环境中的window） var o = { a:10, b:{ a:12, fn:function(){ console.log(this.a); //undefined console.log(this); //window } } } var j = o.b.fn; j();
对于3、4两点，可以用一个简单的规则去判断
当一个函数被调用时，应该立马看()左边的部分。
-
如果()左边是一个引用(reference)，那么函数的this指向这个引用所属的对象（隐式绑定） 否则this指向的就是全局对象或者undefined（默认绑定）
上边代码中fn是一个引用，属于b这个对象，所以this指向b；j不是引用，所以this指向window
