《你不知道的JavaScript》-- this（05）
一、this的绑定规则
针对于函数来来说，this的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式，它指向什么完全取决于函数在哪里被调用。
当一个函数被调用时，会创建一个活动记录（有时候也称为执行上下文）。这个记录会包含函数在哪里被调用（调用栈）、函数的调用方式、传入的参数等信息。this就是这个记录的一个属性，会在函数执行的过程中用到。
我们先来看下this的四条绑定规则，然后解释多条规则都可用时它们的优先级如何排列。
1.默认绑定
即独立函数调用。
function foo(){
console.log(this.a)
}
var a = 2;
foo() // 2
在上述代码中，foo()是直接使用不带任何修饰的函数引用进行调用的，即默认绑定到window，所以this.a 等于2.
如果foo内部使用严格模式，则不能将全局对象用于默认绑定，this会绑定到undefind。但是foo运行在严格模式下则不影响默认绑定。
2.隐式绑定
隐式绑定需要看函数调用位置是否有上下文对象。
function foo(){
console.log(this.a)
}
var obj = {
a:2,
foo:foo
}
obj.foo() // 2
上面的代码片段中，函数的调用位置会使用obj上下文来引用函数，也就是说，当foo被调用时，它的前面加上了对obj的一弄，当函数引用有上下文对象时，隐式绑定规则会把函数调用中的this绑定到这个上下文对象。所以this.a 就是obj.a.
但是要注意不要掉入一些陷阱里面。
function foo(){
console.log(this.a)
}
var obj = {
a:2,
foo:foo
}
var bar = obj.foo()
var a = 'oops,global' // a是全局对象的属性
bar() // oops,global
虽然bar是obj.foo的一个引用，但是实际上，它引用的是foo函数本身，因此此时的bar()其实是一个不带任何修饰的函数调用，因此应用了默认绑定。
function foo(){
console.log(this.a)
}
function doFoo(fn){
// fn其实引用的是foo
fn() // 调用位置
}
var obj = {
a:2,
foo:foo
}
var a = 'oops,global' // a是全局对象的属性
doFoo(obj.foo() )
参数的传递其实就是一种隐性赋值，所以这个例子跟上面的一样。
3.显示绑定
JavaScript提供的绝大多数函数以及你自己创建的所有函数都可以使用call(..)和apply(..)方法。
它们的第一个参数是一个对象，是给this准备的，接着在调用函数时将其绑定到this。两者的区别在于给函数传递参数的方式上。
function foo(){
console.log(this.a)
}
var obj = {
a:2
}
foo.call(obj) // 2
通过foo.call(..)，我们可以在调用foo时强制把它的this绑定到obj上。
通过call和apply，我们也可以解决隐式绑定中将函数传入回调函数中，this绑定丢失的问题
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(window) // 2
这种绑定的常见应用场景，创建一个可以重复使用的辅助函数
function foo(somethisthing){
console.log(this.a , something)
return this.a + something
}
// 简单的辅助绑定函数
function bind(fn,obj){
return function(){
return fn.apply(obj,arguments)
}
}
var obj = {
a:2
}
var bar = bind(foo,obj)
var b = bar(3) // 2,3
console.log(5)
4.new绑定
JavaScript中的new用来调用构造函数。使用new来调用函数，或者说发生构造函数调用时，会自动执行下面的操作
1．创建（或者说构造）一个全新的对象。
2．这个新对象会被执行[[Prototype]]连接。
3．这个新对象会绑定到函数调用的this。
4．如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。
function foo(a){
this.a = a
}
var bar = new foo(2)
console.log(bar.a) // 2
使用new 来调用foo时，会构造一个新对象并把它绑定到foo调用中的this上。
二、优先级
具体优先级的测试案例就不多说了，推荐大家看原版书中写的很详细。这里直接引用原文的结论。
判断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、如果都不是的话，使用默认绑定，如果在严格模式下，就绑定undefind，否则绑定到全局对象
var bar = foo()
三、那些例外
凡事总有例外。
1、如果把null或者undefind作为this的绑定对象传入call，apply或者bind，这些值在调用时会被忽略，应用默认绑定规则。
function foo(){
console.log(this.a)
}
var a = 2;
foo.call(null)
2、创建了一个函数的‘间接引用’，从而导致应用了默认规则
function foo(){
console.log(this.a)
}
var a = 2;
var o = { a:3, foo:foo};
o.foo() // 3
(p.foo = o.foo)() // 2
赋值表达式p.foo = o.foo的返回值是目标函数的引用，因此调用位置是foo()而不是p.foo()或者o.foo()。根据我们之前说过的，这里会应用默认绑定。
3、软绑定
给默认绑定指定一个全局对象和undefind以外的值，实现和硬绑定相同的效果，同时保留隐式绑定或者显示绑定修改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;
}
}
softBind(..)的其他原理和ES5内置的bind(..)类似。它会对指定的函数进行封装，首先检查调用时的this，如果this绑定到全局对象或者undefined，那就把指定的默认对象obj绑定到this，否则不会修改this。
function foo(){
console.log('name:'+this.name)
}
var obj = { name: 'obj'},obj2 = { name : 'obj2'}, obj3 = {name:'obj3'}
var fooOBJ = foo.softBind(obj)
fooOBJ() // name:obj
obj2.foo = foo.softBind(obj)
obj2.foo() // name:obj2
fooOBJ.call(obj3); // name:obj3
setTimeout(obj2.foo,10)
// name:obj 应用了软绑定
可以看到，软绑定版本的foo()可以手动将this绑定到obj2或者obj3上，但如果应用默认绑定，则会将this绑定到obj。
发表评论 (审核通过后显示评论)：