调用位置
通常而言，调用位置就是函数被调用的位置
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 的调用位置
注意调用栈
绑定规则
- 默认绑定
独立函数调用是最常用的函数调用类型（没有修饰，若是严格模式那么不产生默认绑定），它产生的绑定就是默认绑定
// 这里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
- 隐式绑定
这个看的是调用位置是否有上下文对象，举个栗子
// 这个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();
以参数方式传递也会导致丢失
- 显示绑定
这个就看似简单了，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实现的
- new绑定
使用new调用函数会自动执行以下四步：
- 创建一个全新的对象（函数对象实例对象）
- 这个对象会被执行[[原型]]连接
- 这个对象会被绑定到函数调用的this
- 若是该函数未曾返回对象，那么该函数调用返回这个新对象
function foo(a) {
this.a = a;
}
var bar = new foo(2);
console.log( bar.a ); // 2
优先级
- 函数是否应用了new绑定
var bar = new foo(); - 函数是否通过call、apply、bind（显式绑定）
var bar = foo.call(obj); - 函数是否在某个上下文对象之中调用（隐式绑定）
var bar = obj.foo(); - 默认绑定，如果函数体在严格模式下绑定undefined，否则绑定到全局对象
var bar = foo();
绑定例外
- 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这个委托，比{}更空
- 间接引用
看下栗
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
- 软绑定
很明显是相对于硬绑定而言的，其实若是给默认绑定指定一个全局变量或者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);
