你不知道的JavaScript——第二章：this全面解析

1调用位置

　　调用栈：为了到达当前执行位置所调用的所有函数。　　　　

function baz(){
    //当前调用栈：baz
    //因此，当前调用位置是全局作用域
    console.log('baz');
    bar();    //bar的调用位置
}

function bar(){
    //当前调用栈：baz->bar
    //因此，当前调用位置在baz
    console.log('bar');
    foo();    //foo的调用位置
}
function foo(){
    //当前调用栈：baz->bar->foo
    //因此，当前调用位置在bar中
    console.log('foo');
}
baz();    //baz的调用位置

2绑定规则：

　　2.1默认绑定：

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

　　　　函数调用时应用了this的默认绑定，因此this指定全局对象。

　　　　如果使用严格模式（strict mode），则不能将全局对象用于默认绑定，因此this会绑定到undefined。

function foo(){ //严格模式下声明
    "use strict";
    console.log(this.a);
}
var a=2;
foo();//TypeError:this is undefined

　　　　　　！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！1

　　　　虽然this的绑定规则完全取决于调用的位置，但是只有foo()运行在非strict mode下时，默认绑定才能绑定到全局对象。

　　　　在严格模式下调用foo()则不影响默认绑定。！！！！

function foo(){
    console.log(this.a);
}
var a=2;
(function(){  //严格模式下调用
    "use strict";
    foo();//2
})();

　　2.2隐式绑定

　　　　需要考虑的规则是调用位置是否有上下文对象，或者说是否被某个对象拥有或者包含，！！不过这种说法可能会造成一些误导。

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

　　　　无论是直接在obj中定义还是先定义再添加为引用属性，这个函数严格来说都不属于obj对象。

　　　　然而，调用位置会使用obj上下文来引用函数，因此可以说函数被调用时obj对象“拥有”或者“包含”函数引用。

　　　　当函数引用有上下文对象时，隐式绑定规则会把函数调用中的this绑定到这个上下文对象。

　　　　！！！！！！！！！！！！！！！！

　　　　对象属性引用链中只有上一层或者说最后一层在调用位置中起作用。（函数直接关联层起作用）　　　　

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';
bar();//'oops,global'

　　　　　　虽然bar是obj.foo的一个引用，但实际上，它引用的是foo函数本身，因此此时bar（）其实是一个不带任何修饰的函数调用，因此应用了默认绑定。

function foo(){
    console.log(this.a);
}
function doFoo(fn){
    fn();
}
var obj={
    a:2,
    foo:foo
}
var a='oops,global';
doFoo(obj.foo);//'oops,global';

参数传递其实就是一种隐式赋值。

function foo(){
    console.log(this.a);
}
var obj={
    a:2,
    foo:foo
}
var a="oops,global";
setTimeout(obj.foo,100);//"oops, global";

JavaScript环境中内置的setTimeout()函数实现和下面的伪代码类似：

function setTimeout(fn,delay){
    //等待delay毫秒
    fn();//调用位置
}

　　2.3显式绑定  （call,apply,bind）

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

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

　　　　如果你传入了一个原始值（字符串类型、布尔类型或者数字类型）来当作this的绑定对象，这个原始值会被转换成它的对象形式（也就是new String(…)、new Boolean(…)或者new Number(…)）。这通常被称为“装箱”。

　　　　1.硬绑定：　　　显式的强制绑定　　　

function foo(){
    console.log(this.a);
}
var obj={
    a:2
};
var bar=function(){
    foo.call(obj);
};
bar();    //2
setTimeout(bar,100); //2
//硬绑定的bar不可能再修改它的this
bar.call(windwo);//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

　　　　另一种使用方法是创建一个可以重复使用的辅助函数：

function foo(something){
    console.log(this.a,something);
    return this.a+something;
}
//简单的辅助绑定函数
function bind(fn,obj){
    return function(){
        fn.appl(obj,arguments);
    };
}
var obj={
    a:2
};
var bar=bind(foo,obj);
var b=bar(3);//2 3
console.log(b);//5

　　　　ES5提供了内置的方法Function.prototype.bind

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

　　　　 　　bind(…)会返回一个硬编码的新函数，它会把你指定的参数设置为this的上下文并调用原始函数。

　　　　2.API调用的“上下文”

function foo(el){
    console.log(el,    this.id);
}
var obj={
    id:"awesome"
};
//调用foo(…)时把this绑定到obj
[1,2,3].forEach(foo,obj);//1 awesome   2 awesome    3 awesome

　　2.4new绑定

　　　　 包括内置对象函数在内的所有函数都可以用new来调用，这种函数调用被称为构造函数调用。注：实际上并不存在所谓的“”构造函数“”，只有对于函数的“”构造调用“”。

　　　　使用new来调用函数，或者说发生构造函数调用时，会自动执行下面的操作。

　　　　　　1.创建（或者说构造）一个全新的对象。

　　　　　　2.这个新对象会被执行 [[Prototype]]连接

　　　　　　3.这个新对象会绑定到函数调用的this。

　　　　　　4.如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。

function foo(a){
    this.a=a;
}
var bar=new foo(2);//函数没有返回其他对象，new表达式中的函数调用会自动返回新对象。
console.log(bar.a)//2

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

3优先级：

　　判断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，否则绑定到全局对象。　　varbar=foo();

　　　　隐式绑定和显示绑定比较显示绑定的优先级更高。例：　　　　

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

　　　　new绑定比隐式绑定的优先级高。例：　　　　

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

        obj1.foo.call(obj2,3);
        console.log(obj2.a);//3

        var bar=new obj1.foo(4);
        console.log(obj1.a);//2
        console.log(bar.a);//4

　　　　new和bind比较：

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

        var baz=new bar(3);
        console.log(obj1.a);//2
        console.log(baz.a);//3

4绑定例外;

　　1被忽略的this：

　　　　　　如果把null或者undefined作为this的绑定对象传入call、apply或者bind，这些值在调用时会被忽略，实际应用的是默认绑定规则。

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

　　　　　应用：　

　　　　    apply（…）来“展开”一个数组，并当做参数传入一个函数。

　　　　　bind（…）可以对参数进行柯里化（预先设置一些参数）。　　　　　

        function foo(a,b){
            console.log("a: "+a+"，b: "+b);
        }
        //把数组“展开”成参数
        foo.apply(null,[2,3]);//a:2,b:3
        //使用bind（…）进行柯里化
        var bar=foo.bind(null,2);
        bar(3);//a:2,b:3

　　　　更安全的this：

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

　　　　在JavaScript中创建一个空对象最简单的方法就是Object.create(null)。Object.create(null)和{}很像，但是并不会创建Object.prototype这个委托，所以它比{}“更空”：　　　　　　

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

　　　2间接引用：

   　　 function foo(){
            console.log(this.a);
        }
        var a=2;
        var o={a:3,foo:foo};
        var p={a:4};
        
        o.foo();//3
        (p.foo=o.foo)();//2

　　　　赋值表达式p.foo=o.foo的返回值是目标函数的引用，因此调用位置是foo()而不是p.foo()或者o.foo()。根据我们之前所说的，这里会应用默认绑定。

　　　　注意：

　　　　　　对于默认绑定来说，决定this绑定对象的并不是调用位置是否处于严格模式，而是函数体是否处于严格模式。如果函数体处于严格模式，this会被绑定到undefined，否则this会被绑定到全局对象。

　　3软绑定

　　　　可以给默认绑定指定一个全局对象和undefined以外的值。可以实现和硬绑定相同的效果，同时保留隐式绑定或者显示绑定修改this的能力。　　　　

    if(!Function.prototype.softBind){
            Function.prototype.softBind=function(obj){
                var fn=this;
                //捕获所有的curried参数
                var curried=[].slice.call(arguments,1);
                var bound=function(){
                    return fn.apply(
                            (!this||this===(windwo || global))?obj:this,
                            curried.concat.apply(curried,arguments)
                        );
                };
                bound.prototype=Object.create(fn.prototype);
                return bound;
            };
        }

　　　　softBind实现软绑定功能：　　　　　　

        function foo(){
            console.log("name: "+this.name);
        }
        var obj={name:"obj"},
            obj2={name:"obj2"},
            obj3={name:"obj3"};
        var fooOBJ=foo.softBind(obj);
        fooOBJ();//obj
        obj2.foo=foo.softBind(obj);
        obj2.foo();//obj2
        fooOBJ.call(obj3);//obj3
        setTimeout(obj2.foo,100);//obj

5this词法：

　　箭头函数

　　　　箭头函数并不是使用function关键字定义的，而是使用被称为“胖箭头”的操作符=>定义的。箭头函数不使用this的四种规则，而是根据外层（函数或者全局）作用域来决定this（定义函数时）。　　　　

        function foo(){
            //返回一个箭头函数
            return (a)=>{
                //this继承自foo()
                console.log(this.a);
            };
        }
        var obj1={
            a:2
        };
        var obj2={
            a:3
        };
        var bar=foo.call(obj1);
        bar.call(obj2);//2    不是3       绑定到创建箭头函数时的this上，绑定无法被修改

　　　　　　foo()内部创建的箭头函数会捕获调用是foo()的this。由于foo()的this绑定到obj1，bar（引用箭头函数）的this也会绑定到obj1，箭头函数的绑定无法被修改。（new 也不行！）

　　　　　　箭头函数最常用于回调函数中，例如事件处理器或者定时器。　　　　　　

        function foo(){
            setTimeout(()=>{
                //这里的this在词法上继承自foo()
                console.log(this.a);
            },100);
        }
        var obj={
            a:2
        };
        foo.call(obj);//2