This is this

this的指向是JavaScript中一个经久不衰的热门问题，在不一样的场景下指向规则也不一样，在此本文总结了this在不一样场景下的指向规则以及ES6中新增的箭头函数中this的指向问题。

关于this

this提供了一种更优雅的方式来隐式"传递"一个对象引用,所以能够将API设计得更加简洁而且易于复用.

this常见的误解

1. 指向自身

2. 指向函数的做用域

   1. this在任何状况下都不指向函数的词法做用域。在JavaScript内部，做用域确实和对象相似，可见的标识符都是它的属性。可是做用域“对象”没法经过JavaScript代码访问，它存在于JavaScript引擎内部。

this的机制

1. this是在运行时进行绑定的,并非在编写时绑定,它的上下文取决于函数调用时的各类条件。this的绑定和函数声明的位置没有任何关系,只取决于函数的调用方式.
2. 当一个函数被调用时，会建立一个活动记录（有时候也称为执行上下文）。这个记录会包含函数在哪里被调用（调用栈）、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性，会在函数执行的过程中用到。

---

this指向解析

this的指向:函数在代码中被调用的位置(而不是声明位置)

调用栈：为了到达当前执行位置所调用的全部函数.

function baz() {
    // 当前调用栈是：baz
    // 所以，当前调用位置是全局做用域
    console.log( "baz" );
    bar(); // <-- bar的调用位置
}
function bar() {
    // 当前调用栈是baz -> bar
    // 所以，当前调用位置在baz中
    console.log( "bar" );
    foo(); // <-- foo的调用位置
}
function foo() {debugger;
    // 当前调用栈是baz -> bar -> foo
    // 所以当前调用位置在bar中
       console.log( "foo" );
}
baz(); // <-- baz的调用位置

经过浏览器的调试工具能够查看调用栈，能够查看当前函数体内this的指向:

---

this的五种绑定规则

1. 默认绑定

直接使用不带任何修饰的函数引用进行调用的,会进行默认绑定。

function foo() {
    console.log(this.a);
}
var a = 2;
foo();  // 2

2. 隐式绑定

调用位置是否有上下文对象,或者说是否被某个对象拥有或包含。

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

须要注意的是不管是直接在obj中定义仍是先定义再添加为引用属性，这个函数严格来讲都不属于obj对象。 然而，调用位置会使用obj上下文来引用函数，所以你能够说函数被调用时obj对象“拥有”或者“包含”它。
当foo()被调用时，它的落脚点确实指向obj对象。当函数引用有上下文对象时，隐式绑定规则会把函数调用中的this绑定到这个上下文对象。由于调用foo()时this被绑定到obj，所以this.a和obj.a是同样的。

隐式丢失问题

function foo() { 
    console.log( this.a );
}
var obj = { 
    a: 2,
    foo: foo 
};
var bar = obj.foo; // 函数别名！
var a = "oops, global"; // a是全局对象的属性
bar(); // "oops, global"

虽然bar是obj.foo的引用,但实际上其引用的是foo自己,所以此时的bar是不带修饰的函数调用,所以应用默认绑定。

实际状况里比较常见的是回调函数的this丢失问题:

function foo() { 
    console.log( this.a );
}
var obj = { 
    a: 2,
    foo: foo 
};
var a = "oops, global"; // a是全局对象的属性
setTimeout( obj.foo, 100 ); // "oops, global"

回调函数失去this值绑定也是同样的缘由,func(fn)中fn实际上是赋值给了函数的参数

在上面这段代码里obj.foo在传入setTimeout时实际上是作了一个隐式的赋值操做，所以，在setTimeout函数体内调用时，其实调用的参数直接引用了function foo(){}，致使this绑定到全局对象上。

3. 显式绑定

像隐式绑定中的例子里，若是不想将函数包含在对象体内的属性上，那么能够利用显式绑定方法(call、apply),它们会把这个对象绑定到this，接着在调用函数时指定这个this。

function foo() { 
    console.log( this.a );
}
var obj = { 
    a:2
};
foo.call( obj ); // 2

利用显式绑定的一个变种方法能够解决隐式丢失的问题，即建立一个包裹函数，传入全部的参数并返回接收到的全部值：

function foo(something) { 
    console.log( this.a, something ); 
    return this.a + something;
}
var obj = { 
    a:2
};
var bar = function() {
    return foo.apply( obj, arguments );
};
var b = bar( 3 ); // 2 3
console.log( b ); // 5

经过建立函数bar()，并在它的内部手动调用foo.call(obj)，从而强制把foo的this绑定到了obj。不管以后如何调用函数bar，它总会手动在obj上调用foo。这种绑定是一种显式的强制绑定。
在ES5中也提供了内置的这种绑定方法:Function.prototype.bind，bind(..)会返回一个硬编码的新函数，它会把参数设置为this的上下文并调用原始函数。

bind()与call()和apply()这两种方法不一样之处在于其处理后函数不会执行，而是返回了一个改变了上下文的函数副本，然后二者则会直接执行函数。

4. new绑定

与其余语言中不一样，在JavaScript中，构造函数只是一些使用new操做符时被调用的函数。它们并不会属于某个类，也不会实例化一个类。实际上，它们甚至都不能说是一种特殊的函数类型，它们只是被new操做符调用的普通函数而已。
包括内置对象函数在内的全部函数均可以用new来调用，这种函数调用被称为构造函数调用。这里有一个重要可是很是细微的区别：实际上并不存在所谓的“构造函数”，只有对于函数的“构造调用”。

new操做符进行构造函数调用时的操做流程:

1. 建立一个全新的对象
2. 这个新对象会被执行[[原型]]链接
3. 这个新对象会绑定到函数调用的this
4. 若是函数返回没有其它对象,那么new表达式中的函数调用会自动返回这个新对象.

function foo(a) { 
    this.a = a;
} 
var bar = new foo(2);
console.log( bar.a ); // 2

使用new来调用foo(..)时，咱们会构造一个新对象并把它绑定到foo(..)调用中的this上.

利用优先级规则判断非箭头函数的this指向

1. 函数是否在new中调用（new绑定）？若是是的话this绑定的是新建立的对象。
2. 函数是否经过call、apply（显式绑定）或者硬绑定调用？若是是的话，this绑定的是指定的对象。
3. 函数是否在某个上下文对象中调用（隐式绑定）？若是是的话，this绑定的是那个上下文对象。
4. 若是都不是的话，使用默认绑定。若是在严格模式下，就绑定到undefined，不然绑定到全局对象。

5. 箭头函数绑定

箭头函数是ES6新增的一种函数表达式，不是使用function关键字来定义，也不适用上述四条断定规则，而是依据外层做用域来决定this。

1. 箭头函数可让this绑定定义时的做用域，而不是调用时的做用域。
2. 箭头函数可让this指向固定化，这种特性颇有利于封装回调函数。

this指向的固定化，并非由于箭头函数内部有绑定this的机制，实际缘由是箭头函数根本没有本身的this，致使内部的this就是外层代码块的this。正是由于它没有this，因此也就不能用做构造函数。

箭头函数实质上就是保存了其外层做用域的this指向，从而在函数体内进行调用。ES6在Babel转换后的ES5代码以下：

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}
// ES5
function foo() {
  var _this = this;
  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}

---

绑定例外问题

1. 把null或undefined做为绑定对象传入call或者apply,此时实际绑定的是默认规则(全局对象).

这种方法主要是用apply展开数组并传入函数.可是若是这个函数确实使用了this,那么this会绑定到全局对象,形成恶劣后果。

1. “更安全”的作法是传入一个特殊的对象，把this绑定到这个对象不会对你的程序产生任何反作用

function foo(a,b) {
    console.log( "a:" + a + ", b:" + b );
}
// 咱们的DMZ空对象
var ø = Object.create( null );
// 把数组展开成参数
foo.apply( ø, [2, 3] ); // a:2, b:3
// 使用bind(..)进行柯里化
var bar = foo.bind( ø, 2 ); 
bar( 3 ); // a:2, b:3

---

参考：《你不知道的JavaScript》等