JS-this小解析(1)

this的绑定

this既不指向函数自身也不指向函数的词法作用域。

this的绑定和函数声明的位置没有任何关系，只取决于函数的调用位置（调用方式）。

当一个函数被调用时，会创建一个活动记录（执行上下文）。这个记录也会包含函数在哪里被调用（调用栈）、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性。

绑定规则

函数执行过程中调用位置如何决定this的绑定对象呢？
先找到调用位置，然后判断需应用哪条规则：默认绑定；隐式绑定；显示绑定；new绑定。

1.默认绑定

最常用的函数调用类型：独立函数调用。

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

当调用foo （）时，this.a被解析成了全局变量a，因为函数调用时应用了this的默认绑定，this就指向了全局对象。为什么是默认绑定呢？因为foo （）是直接使用不带任何修饰的函数引用进行调用的，所以只能是默认绑定，无法应用其他规则。

虽然this的绑定规则完全取决于调用位置，但是只有foo （）运行在非strict mode（严格模式） 下时，默认绑定才能绑定到全局对象；严格模式下与函数的调用位置无关。如果使用严格模式（strict mode），那么全局对象将无法使用默认绑定，因此this会绑定到undefined。

2.隐式绑定

这条规则需要考虑调用位置是否有上下文对象。
先看代码：

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

需要注意foo （）的声明方式，及其之后是如何被当做引用属性添加到obj中的。但是无论是直接在obj中定义还是先定义再添加为引用属性，这个函数严格来说都不属于obj对象。调用位置会使用obj上下文来引用函数。

当foo（）被调用时，它的落脚点指向obj对象。当函数引用有上下文对象时，隐式绑定规则会把函数调用中的this绑定到这个上下文对象。因为调用foo（）时this被绑定到obj，因此this.a和obj.a是一样的。

对象属性引用链中只有最顶层或者说最后一层会影响调用位置：

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

隐式丢失

被绑定的函数丢失绑定对象时，它会应用默认绑定，从而把this绑定到全局对象或undefined（严格模式）上。

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()其实是一个不带任何修饰的函数调用，因此应用了默认绑定。

另一种丢失情况发生在传入回调函数时：

function foo() {    console.log(this.a );}function doFoo(fn){    // fn其实引用的是foo        fn();// <-- 调用位置！}var obj ={    a:2,        foo: foo };var a ="oops, global";// a是全局对象的属性doFoo( obj.foo );// "oops, global"

参数传递其实就是一种隐式赋值，因此我们传入函数时也会被隐式赋值，所以结果和上一个例子一样。如果把函数传至语言内置的函数而不是传入自己的函数声明，结果也相同。

3.显示绑定

使用call(..)和apply(..)方法

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

通过foo.call(..)，可以再调用foo时强制把它的this绑定到obj上。

*从this的绑定角度来说，这两个方法是一样的，他们的区别体现在其他参数上。

显式绑定仍然无法解决之前提出的丢失绑定问题，但是显式绑定的一个变种可以解决这个问题。

function foo() {    console.log(this.a );}var obj ={    a:2};var bar = function () {    foo.call( obj );};bar();// 2setTimeout( bar,100);// 2// 硬绑定的bar不可能再修改它的thisbar.call( window );// 2

这段代码创建了函数bar( )，并在它的内部手动调用了foo.call(obj)，因此强制把foo的this绑定到了obj。无论之后如何调用函数bar，它总会手动在obj上调用foo。这种绑定是一种显式的强制绑定，称之为硬绑定。

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上。new是最后一种可以影响函数调用时this绑定行为的方法，称之为new绑定。

优先级

new绑定–>显示绑定–>隐式绑定–>默认绑定

判断this

现在我们可以根据优先级来判断函数在某个调用位置应用的是哪条规则。可以按照下面的顺序来进行判断：

1. 函数是否在new中调用（new绑定）？如果是的话this绑定的是新创建的对象。
   var bar = new foo ( )

2. 函数是否通过call、apply（显式绑定）或者硬绑定调用？如果是的话，this绑定的是指定的对象。
   var bar = foo.call (obj2)

3. 函数是否在某个上下文对象中调用（隐式绑定）？如果是的话，this绑定的是那个上下文对象。
   var bar = obj1.foo ( )

4. 如果都不是的话，使用默认绑定。如果在严格模式下，就绑定到undefined，否则绑定到全局对象。
   var bar = foo ( )

就是这样，对于正常的函数调用来说，理解了这些知识就可以明白this的绑定原理了。

---

写着写着就全完都是书上的东西了…下次要有自己的理解…