js this 绑定机制深入详解
本文实例讲述了jsthis绑定机制。分享给大家供大家参考，具体如下：
函数调用位置
与词法作用域相反的是，this的指向由函数运行时决定，它是动态的，随着函数调用位置变化而变化。
要理解this，首先要理解调用位置：调用位置就是函数在代码中被调用的位置（而不是声明的位置）。只有仔细分析调用位置才能回答这个问题：这个this到底引用的是什么？
functionbaz(){
//当前调用栈是：baz
//因此，当前调用位置是全局作用域
console.log("baz");
bar();//<--bar的调用位置
}
functionbar(){
//当前调用栈是baz->bar
//因此，当前调用位置在baz中
console.log("bar");
foo();//<--foo的调用位置
}
functionfoo(){
//当前调用栈是baz->bar->foo
//因此，当前调用位置在bar中
console.log("foo");
}
baz();//<--baz的调用位置
多数现代桌面浏览器都内置了开发者工具，其中包含JavaScript调试器。你可以在工具中给函数的第一行代码设置一个断点，或者直接在第一行代码之前插入一条debugger;语句。运行代码时，调试器会在那个位置暂停，同时会展示当前位置的函数调用列表，这就是你的调用栈。因此，如果你想要分析this的绑定，使用开发者工具得到调用栈，然后找到栈中第二个元素，这就是真正的调用位置。
this绑定规则
函数的调用位置决定了this的绑定对象，当我们找到调用位置后，然后判断需要应用下面四条规则中的哪一条。
独立函数调用
独立函数调用，this指向函数调用位置所在的包含环境对象。
functionfoo(){
console.log(this.a);
}
vara=2;
foo();//2
作为对象的方法调用
当函数作为某个对象的方法被调用时，this指向这个对象。
functionfoo(){
console.log(this.a);
}
varobj={
a:2,
foo:foo
};
obj.foo();//2
特别注意：虽然函数foo并不属于obj对象，但调用位置使用obj的上下文来调用函数。我一直在强调调用位置的重要性，因为你可能一不留神就会忽略掉它，看下面的列子：
functionfoo(){
console.log(this.a);
}
varobj={
a:2,
foo:foo
};
varbar=obj.foo;//函数别名！步骤1
vara="oops,global";//a是全局对象的属性
bar();//"oops,global"步骤2
在步骤1中，变量bar是obj.foo的一个引用，它实际指向的是函数foo。所以使用bar()与直接使用foo()并没有不同。
使用.call/.apply绑定
每创建一个函数，这个函数就有了两个继承而来的方法：call和apply。
它们的第一个参数是一个对象，它们会把这个对象绑定到this，接着在调用函数时指定这个this。因为你可以直接指定this的绑定对象，因此我们称之为显式绑定。
functionfoo(){
console.log(this.a);
}
varobj={
a:2
};
foo.call(obj);//2
new绑定
使用new来调用函数，或者说发生构造函数调用时，会自动执行下面的操作。
- 创建（或者说构造）一个全新的对象。
- 这个新对象会被执行[[原型]]连接，即指向构造函数的原型Foo.prototype。
- 这个新对象会绑定到函数调用的this。
- 如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。
functionfoo(a){
this.a=a;
}
varbar=newfoo(2);
console.log(bar.a);//2
使用new来调用foo(..)时，我们会构造一个新对象并把它绑定到foo(..)调用中的this上。
优先级
如果要判断一个运行中函数的this绑定，就需要找到这个函数的直接调用位置。找到之后就可以顺序应用下面这四条规则来判断this的绑定对象。
- 由new调用？绑定到新创建的对象。
- 由call或者apply（或者bind）调用？绑定到指定的对象。
- 由上下文对象调用？绑定到那个上下文对象。
- 默认：在严格模式下绑定到undefined，否则绑定到全局对象。
一定要注意，有些调用可能在无意中使用默认绑定规则。如果想“更安全”地忽略this绑定，你可以使用一个DMZ对象，比如ø=Object.create(null)，以保护全局对象。
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题：《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。