完全弄懂Javascript中的this

在很长的一段时间以内，我一直觉得做用域就是上下文，这也就对JavaScript中的this理解增长了不少麻烦，因此这篇文章开篇第一个要陈诉的概念就是做用域和上下文不是一个概念。做用域(scope) 是指变量的可访问性，上下文是来决定this。（注意执行期上下文指的是做用域，这是JavaScipt规范，因此得遵照）

在JavaScript中只有两种做用域，一种是全局做用域，另外一个就是函数做用域。上下文则会this息息相关，而this是在运行的时候进行绑定的，它的上下文取决于函数在哪里被调用，this的绑定和函数声明的位置没有任何关系。

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

固然这句话出自《你不知道的JavaScript（上卷）》，在这里强烈推荐这本书，字字珠玑。

再次强调：this其实是在函数被调用的时候发生绑定，它指向什么彻底取决于函数在哪里调用。

调用位置

接下来咱们看看函数调用包括哪几种状况，只有正确的知道函数调用的位置，才能正确的明白this的指向问题。

默认绑定(全局调用)

var a = 2;
function foo() {
    console.log(this.a)
}
foo();
复制代码

以上就是默认绑定，foo函数是直接调用的。

隐式绑定

b = 2;
var obj = {
    b: 3,
    foo: foo
}

function foo () {
    console.log(this.b);
}
obj.foo(); // 3
复制代码

这里为何叫作隐式绑定，由于这个foo函数不管是在obj里面声明仍是在obj外面声明，他实际上都是不属于obj这个对象的（obj只是记录了foo这个属性的引用值），可是最后在执行的时候this却被绑定到了obj这个对象上下文中。固然若是有多个对象链式调用，this只会绑定到最后一层。obj2.obj1.foo()，this是绑定到obj1这个对象上下文中。

固然这里有一个注意点

var obj = {
    b: 3,
    foo: foo
}
function foo () {
    console.log(this.b);
}
var bar = obj.foo;

bar(); // 2 
复制代码

这里实际上bar直接是foo的引用，就至关于var bar = obj.foo = foo，咱们打印一下能够发现

console.log(bar === foo && foo === obj.foo && bar === obj.foo) // true
复制代码

因此此时就和第一种默认绑定同样，bar函数是直接在全局上下文中被调用的，因此this会指向全局。

还有一种就是嵌套函数了

b = 2;
var obj = {
    b: 3,
    foo: foo
}
function foo () {
    console.log('foo', this.b);// 3
    foo2();
}
function foo2() {
    console.log('foo2', this.b); // 2
}
obj.foo();
	
复制代码

实际上foo2也是直接被（window）调用了。

显示绑定call，apply，bind

经过call，apply，bind函数能够强制某个函数在哪一个对象（或者上下文）中被调用

b = 2;

var obj = {
    b: 3,
    foo: foo
}

function foo () {
    console.log('foo', this.b);
}

foo.call(obj); // 3
复制代码

固然若是你传入的是一个基本类型的值，那么JavaScript会把它转换成它的对象形式。

new绑定

说到new操做符，就不得不说它的内部工做原理了，咱们在执行new操做的时候究竟执行了什么。

1 建立一个全新的对象 var obj = {} 2 这个新对象的原型会被执行[[原型]]链接 obj[[prototype]] = Fun.prototye 3 这个新对象会绑定到函数调用的this Fun.bind(obj) 4 若是函数没有返回其余对象，那么会返回这个新建立的对象 return obj;

因此new绑定实质仍是显式绑定。

总结一下咱们能够按照下面的顺序进行判断

1 函数是否在new中调用（new 绑定），若是是this绑定的就是返回的新对象 2 函数是否经过call、apply（显式绑定）若是是this绑定的是那个指定的对象 3 函数是否在某个上下文对象中调用（隐式绑定），若是是，this绑定的是那个上下文无关文法对象 4 若是都不是那么就是默认绑定，this绑定的就是全局对象或者undefined（严格模式）

例外

凡事总有例外，若是你把null、undefined做为this的绑定对象传入call、apply或者bind那么实际上，这些值在执行的时候会被忽略，实际使用的是默认绑定。那么什么状况下咱们会去绑定一个null或者undefined的呢？一种就是用apply来展开一个数组，固然这种方法的确很实用(不过在ES6中出现了...操做符来展开数组)。

function foo(a, b) {return a + b}
foo.apply(null, [2, 3]);
复制代码

箭头函数，箭头函数中的this是根据外层做用域来决定this的，也就是说箭头函数中的this就和箭头函数在哪里声明有关系了。

a = 2;

var obj = {
    a: 3,
    foo: foo
}

function foo () {
    return () => {
	    console.log(this.a);
    };	
}

var fun = foo.call(obj);

fun(); // 3 此时箭头函数的外层做用域为foo，foo函数的this被绑定在了obj对象上
复制代码

a = 2;

var obj = {
    a: 3,
    foo: foo
}

var arrowFun = () => {
    console.log(this.a);
}

function foo () {
    return arrowFun;	
}

var fun = foo.call(obj);

fun(); //2 箭头函数的外层做用域为全局做用域，全局做用域中的this指向全局上下文
复制代码

最后

最后欢迎你们关注个人我的博客，将会有更多的精彩文档，喜欢的话也能够给个star。

Github连接

DJL箫氏的博客