this 分解解析

this JavaScript scope

this的指向问题，想必大家都很熟悉了。

js作用域是词法作用域，即书写时决定的变量的可见性，又由于函数是对象，是引用类型，会产生闭包现象。而动态作用域是取决于运行时的，this是最接近动态作用域这个概念的。因此this指向，取决于函数的调用形式。四种调用形式（函数、方法、call、new），四种指向。

我出几道题，考考大家

第一题：this丢失问题:

var a = {
    value: 'a',
    fn:function() {
        alert(this.value);
    }
};
var b = a.fn;
b();

告诉你个秘密，答案在后面哦。大家可以先尝试自己去做前面三题，再结合答案比较一下哦
也许这个比较简单，继续前进...

第二题：

var a = {
    value: 'a',
    fn:function() {
        alert(this.value);
    }
};
setTimeout(a.fn);

答案在后面哦。
这也想难倒我，哼，看你还有什么把戏，尽管来吧...

第三题：作为“函数”调用，换种形式写呢

var a = {
    value: 'a',
    fn:function() {
        alert(this.value);
    }
};
var b;
(b = a.fn)();

函数赋值？这是什么鬼，赋值后发生了什么？

前面三道题的答案：

三道题，你都做对了吗，做对了你敢继续接受挑战吗，没做对也不要怕怕哦，掌握了这些以后面试就再也不怕了哦

第四题：

var a = {
    value: 'a',
    fn:function() {
        alert(this.value);
    }
};
var b = {
    value: 'b'
};
(b.fn = a.fn)();

额，这又耍什么把戏，和上面那道不是一样么？

第五题：

var a = {
    value: 'a',
    fn:function() {
        alert(this.value);
    }
};
(a.fn = a.fn)();
(a.fn, a.fn, a.fn)();

你做对了吗？还是晕倒在厕所了

第六题 很熟悉的哦，千万别晕菜，哈哈哈

var a = {
    value: 'a',
    fn:function() {
        alert(this.value);
    }
};
(a.fn)();

第七题 bind也来参合一下

var a = {
    value: 'a',
    fn:function() {
        alert(this.value);
    }
};
var b = {
    value: 'b'
};
a.fn = a.fn.bind(b);
a.fn();

第八题 new也来了...

var a = {
    value: 'a',
    fn:function() {
        alert(this.value);
    }
};
var b = {
    value: 'b'
};
a.fn = a.fn.bind(b);
new a.fn();

第九题

var fn = function() {
    setTimeout(function() {
        alert(this.value)
    });
};
fn.call({value:'a'});

这个this应该弄懂了吧？

第十题:ES6的箭头函数也不消停啊

var fn = function() {
    setTimeout(() => {
        alert(this.value)
    });
};
fn.call({value:'a'});

那这个this又是怎么指向的呢？
后面六道题的答案：

你答对了几道题呢？
以上题目均来自《你不知道的JavaScript》一书，
书中详细说明了，
默认绑定（函数调用）,
隐式绑定（方法调用）,
显式绑定（call或apply）,
new绑定（new构造函数）
还指出了上述方式调用优先级（从上到下，优先级越来越高）