调用位置

通常而言，调用位置就是函数被调用的位置

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 的调用位置

注意调用栈

绑定规则

1. 默认绑定
   独立函数调用是最常用的函数调用类型（没有修饰，若是严格模式那么不产生默认绑定），它产生的绑定就是默认绑定

// 这里foo的调用没有任何修饰且foo的运行体未在严格模式之下，所以默认绑定
// 即this被绑定到全局对象
function foo() {
    console.log(this.a);
}
var a = 2;
foo(); // 2

// 这里foo执行虽然在严格模式之下，但是foo得运行体未在
// 所以执行ok，this绑定的是全局window
function foo() {
    console.log(this.a);
}
var a = 2;
(function() {
    "use strict";
    foo(); // 2
})();

// 这里foo的运行体在严格模式下，所以this绑定的是undefined
// 执行异常
function foo() {
    "use strict";
    console.log(this.a);
}
var a = 2;
(function() {
    foo(); // 2
})();

// 只要产生默认绑定绑定的就是全局变量，与函数定义位置调用位置无关无关
function foo() {
    console.log(this.a);
    return function baz() {
        console.log(this.a);
    }
}
var a = 2;
foo()(); // 2

2. 隐式绑定
   这个看的是调用位置是否有上下文对象，举个栗子

// 这个foo是obj的一个引用属性
// 通过obj来调用foo，那么调用位置会使用obj上下文
// 就像函数被调用时obj对象“拥有”它
function foo() {
    console.log(this.a);
}
var obj = {
    a: 2,
    foo: foo
};
obj.foo(); // 2

对象属性引用链只有最后一层会影响调用位置

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

隐式丢失
被隐式绑定的函数会丢失绑定对象导致应用默认绑定

// 这里的fn看似obj1.obj2.foo的引用，但是实际上它引用的是foo函数本身
// 所以它调用等于没有任何修饰
function foo() {
    console.log(this.a);
}
var obj2 = {
    a: 42,
    foo: foo
};
var obj1 = {
    a: 2,
    obj2: obj2
};
var fn = obj1.obj2.foo;
fn();

以参数方式传递也会导致丢失

3. 显示绑定
   这个就看似简单了，call、apply、bind

值得注意的是，若是函数体在严格模式下，那么传入的是null、undefined就是绑定传入的，若未在严格模式下，那么绑定的是全局变量。其它的基本类型则是其包装类型

硬绑定

// 其实没啥花头，就是只要执行bar那么就会强绑定到obj1，所以外面改不了
function foo() {
    console.log(this.a);
}
var obj1 = {
    a: 42
};
var bar = function() {
    foo.call(obj1);
}
bar.call(window);

也就是自己搞一个包裹函数，后面ES5搞了个bind函数，不用自己写包裹函数
API调用的上下文
比如forEach的第二参数就是其上下文，原理就是call、apply实现的

4. new绑定
   使用new调用函数会自动执行以下四步：

• 创建一个全新的对象（函数对象实例对象）
• 这个对象会被执行[[原型]]连接
• 这个对象会被绑定到函数调用的this
• 若是该函数未曾返回对象，那么该函数调用返回这个新对象

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

优先级

1. 函数是否应用了new绑定
   var bar = new foo();
2. 函数是否通过call、apply、bind（显式绑定）
   var bar = foo.call(obj);
3. 函数是否在某个上下文对象之中调用（隐式绑定）
   var bar = obj.foo();
4. 默认绑定，如果函数体在严格模式下绑定undefined，否则绑定到全局对象
   var bar = foo();

绑定例外

1. this被忽略
   当call、apply、bind被传入null、undefined，this会应用默认绑定
   在不关心传入的是什么的时候，null是一个不错的选择，比如对参数柯里化

function foo(a, b) {
    console.log(a, b);
}
var bar = foo.bind(null, 2);
bar(3); // 2  3

不过若是某些函数使用了this，那么传入null就不合适了（全局莫名其妙多了一些属性），但是需要占位，那么可以传入一个DMZ对象（空的非委托对象），可以用ø来表示，var ø = Object.create(null)，这家伙不会创建Object.prototype这个委托，比{}更空

2. 间接引用
   看下栗

function foo() {
    console.log(this.a);
}
var a = 2;
var o = {a: 3, foo: foo};
var p = {a: 4};
// 这里(p.foo = o.foo)返回值是foo引用，所以默认绑定
(p.foo = o.foo)(); // 2

3. 软绑定
   很明显是相对于硬绑定而言的，其实若是给默认绑定指定一个全局变量或者undefined以外的值，那么就可以防止函数调用默认绑定（硬绑定效果），还保留有隐式绑定或显示绑定修改this的能力。
   就是在Function的原型对象上扩展一个方法，该方法可以判定当前this是否是全局以及undefined、null，是的话应用apply之类的方法显示绑定隐式绑定或者显示绑定的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 === (window || global)) ?
                    obj : this,
                curried.concat.apply(curried, arguments)
            );
        };
        bound.prototype = Object.create(fn.prototype);
        return bound;
    };
}

this词法

this绑定均用于上述4条规则除了箭头函数，箭头函数this绑定于它的定义位置所在的函数或者全局

function foo() {
    setTimeout(() => {
        //  这里的this继承自foo的this
        console.log(this.a);
    })
}
var obj = {
    a = 3;
}
foo(); // undefined
foo.call(obj);