JavaScript中如何实现函数的动态this和绑定机制？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1898个文字，预计阅读时间需要8分钟。
JavaScript 是一门动态语言，最显著的特点就是 dynamic this。它通常作为函数调用者存在。在 JavaScript 中，所有关系都可以作为对象的关联数组元素存在。那么，那些函数就被成两部分存储。
javascript是一门动态语言，最明显就是那个dynamic this。它一般都是作为函数调用者存在。在javascript，所有关系都可以作为对象的一个关联数组元素而存在。那么函数就是被掰成两部分储存于对象，一是其函数名（键），一是函数体（值），那么函数中的this一般都指向函数所在的对象。但这是一般而已，在全局调用函数时，我们并没有看到调用者，或者这时就是window。不过，函数声明后，其实并没有绑定到任何对象，因此我们可以用call apply这些方法设置调用者。
一个简单的例子：
window.name = "window"; var run = function() { alert("My name is " + this.name); } run();
这里你不能说run是作为window的一个属性而存在，但它的确是被window属性调用了。实质上大多数暴露在最上层的东西都则window接管了。在它们需要调用时被拷贝到window这个对象上（不过在IE中window并不继承对象），于是有了window['xxx']与window.xxx性能上的差异。这是内部实现，不深究了。
另一个例子，绑定到一个明确的对象上
window.name = "window"; object = { name: "object", run: function() { alert("My name is " + this.name); } }; object.run();
答案显然易见，this总是为它的调用者。但如果复杂一点呢？
window.name = "window"; object = { name: "object", run: function() { var inner = function(){ alert("My name is " + this.name); } inner(); } }; object.run();
尽管它是定义在object内部，尽管它是定义run函数内部，但它弹出的既不是object也不是run，因为它既不是object的属性也不是run的属性。它松散在存在于run的作用域用，不能被前两者调用，就只有被window拯救。window等原生对象浸透于在所有脚本的内部，无孔不入，只要哪里需要到它做贡献的地方，它都义不容辞。但通常我们不需要它来帮倒忙，这就需要奠出call与apply两大利器了。
window.name = "window"; var object = { name: "object", run: function() { inner = function() { alert( this.name); } inner.call(this); } } object.run();
call与apply的区别在于第一个参数以后的参数的形式，call是一个个，aplly则都放到一个数组上，在参数不明确的情况，我们可以借助arguments与Array.slice轻松搞定。
window.name = "Window"; var cat = { name: "Cat" }; var dog = { name: "Dog", sound: function(word) { alert(this.name + word); } }; dog.sound(" is pooping"); dog.sound.call(window, " is banking"); dog.sound.call(dog, " is banking"); dog.sound.apply(cat, [" miaowing"]);
由此Prototype开发者搞了一个非常有名的函数出来，bind!以下是它的一个最简单的版本：
var bind = function(context, fn) { return function() { return fn.apply(context, arguments); } }
不过为了面对更复杂的情况建议用以下版本。
function bind(context,fn) { var args = Array.prototype.slice.call(arguments, 2); return args.length == 0 ? function() { return fn.apply(context, arguments); } : function() { return fn.apply(context, args.concat.apply(args, arguments)); }; };
它还有一个孪生兄弟叫bindAsEventListener ，绑定事件对象，没什么好说的。
var bindAsEventListener = function(context, fn) { return function(e) { return fn.call(context, (e|| window.event)); } }
Prototype的版本
Function.prototype.bind = function() { if (arguments.length < 2 && (typeof arguments[0]==='undefined')) return this; var _slice = Array.prototype.slice var __method = this, args = _slice.call(arguments,0), context = args.shift(); return function() { return __method.apply(context, args.concat(_slice.call(arguments,0))); } }
bind函数是如此有用，google早早已把它加入到Function的原型中了（此外还有inherits，mixin与partial）。
有绑定就有反绑定，或者叫剥离更好！例如原生对象的泛化方法我们是无法通过遍历取出它们的。
for(var i in Array){ alert(i + " : "+ Array[i]) } for(var i in Array.prototype){ alert(i + " : "+ Array.prototype[i]) }
要取出它们就需要这个东西：
var _slice = Array.prototype.slice; function unbind(fn) {//第一步取得泛化方法 return function(context) {//第二部用对应原生对象去重新调用！ return fn.apply(context, _slice.call(arguments, 1)); }; };
示例以前也给过了，请见这里
总结：
this 的值取决于 function 被调用的方式，一共有四种，
- 如果一个 function 是一个对象的属性，该 funtion 被调用的时候，this 的值是这个对象。如果 function 调用的表达式包含句点（.）或是 []，this 的值是句点（.）或是 [] 之前的对象。如myObj.func 和myObj["func"] 中，func 被调用时的 this 是myObj。
- 如果一个 function 不是作为一个对象的属性，那么该 function 被调用的时候，this 的值是全局对象。当一个 function 中包含内部 function 的时候，如果不理解 this 的正确含义，很容易造成错误。这是由于内部 function 的 this 值与它外部的 function 的 this 值是不一样的。解决办法是将外部 function 的 this 值保存在一个变量中，在内部 function 中使用它来查找变量。
- 如果在一个 function 之前使用 new 的话，会创建一个新的对象，该 funtion 也会被调用，而 this 的值是新创建的那个对象。如function User(name) {this.name = name}; var user1 = new User("Alex"); 中，通过调用new User("Alex") ，会创建一个新的对象，以user1 来引用，User 这个 function 也会被调用，会在user1 这个对象中设置名为name 的属性，其值是Alex 。
- 可以通过 function 的 apply 和 call 方法来指定它被调用的时候的 this 的值。 apply 和 call 的第一个参数都是要指定的 this 的值。由于它们存在，我们得以创建各种有用的函数。
本文共计1898个文字，预计阅读时间需要8分钟。
JavaScript 是一门动态语言，最显著的特点就是 dynamic this。它通常作为函数调用者存在。在 JavaScript 中，所有关系都可以作为对象的关联数组元素存在。那么，那些函数就被成两部分存储。
javascript是一门动态语言，最明显就是那个dynamic this。它一般都是作为函数调用者存在。在javascript，所有关系都可以作为对象的一个关联数组元素而存在。那么函数就是被掰成两部分储存于对象，一是其函数名（键），一是函数体（值），那么函数中的this一般都指向函数所在的对象。但这是一般而已，在全局调用函数时，我们并没有看到调用者，或者这时就是window。不过，函数声明后，其实并没有绑定到任何对象，因此我们可以用call apply这些方法设置调用者。
一个简单的例子：
window.name = "window"; var run = function() { alert("My name is " + this.name); } run();
这里你不能说run是作为window的一个属性而存在，但它的确是被window属性调用了。实质上大多数暴露在最上层的东西都则window接管了。在它们需要调用时被拷贝到window这个对象上（不过在IE中window并不继承对象），于是有了window['xxx']与window.xxx性能上的差异。这是内部实现，不深究了。
另一个例子，绑定到一个明确的对象上
window.name = "window"; object = { name: "object", run: function() { alert("My name is " + this.name); } }; object.run();
答案显然易见，this总是为它的调用者。但如果复杂一点呢？
window.name = "window"; object = { name: "object", run: function() { var inner = function(){ alert("My name is " + this.name); } inner(); } }; object.run();
尽管它是定义在object内部，尽管它是定义run函数内部，但它弹出的既不是object也不是run，因为它既不是object的属性也不是run的属性。它松散在存在于run的作用域用，不能被前两者调用，就只有被window拯救。window等原生对象浸透于在所有脚本的内部，无孔不入，只要哪里需要到它做贡献的地方，它都义不容辞。但通常我们不需要它来帮倒忙，这就需要奠出call与apply两大利器了。
window.name = "window"; var object = { name: "object", run: function() { inner = function() { alert( this.name); } inner.call(this); } } object.run();
call与apply的区别在于第一个参数以后的参数的形式，call是一个个，aplly则都放到一个数组上，在参数不明确的情况，我们可以借助arguments与Array.slice轻松搞定。
window.name = "Window"; var cat = { name: "Cat" }; var dog = { name: "Dog", sound: function(word) { alert(this.name + word); } }; dog.sound(" is pooping"); dog.sound.call(window, " is banking"); dog.sound.call(dog, " is banking"); dog.sound.apply(cat, [" miaowing"]);
由此Prototype开发者搞了一个非常有名的函数出来，bind!以下是它的一个最简单的版本：
var bind = function(context, fn) { return function() { return fn.apply(context, arguments); } }
不过为了面对更复杂的情况建议用以下版本。
function bind(context,fn) { var args = Array.prototype.slice.call(arguments, 2); return args.length == 0 ? function() { return fn.apply(context, arguments); } : function() { return fn.apply(context, args.concat.apply(args, arguments)); }; };
它还有一个孪生兄弟叫bindAsEventListener ，绑定事件对象，没什么好说的。
var bindAsEventListener = function(context, fn) { return function(e) { return fn.call(context, (e|| window.event)); } }
Prototype的版本
Function.prototype.bind = function() { if (arguments.length < 2 && (typeof arguments[0]==='undefined')) return this; var _slice = Array.prototype.slice var __method = this, args = _slice.call(arguments,0), context = args.shift(); return function() { return __method.apply(context, args.concat(_slice.call(arguments,0))); } }
bind函数是如此有用，google早早已把它加入到Function的原型中了（此外还有inherits，mixin与partial）。
有绑定就有反绑定，或者叫剥离更好！例如原生对象的泛化方法我们是无法通过遍历取出它们的。
for(var i in Array){ alert(i + " : "+ Array[i]) } for(var i in Array.prototype){ alert(i + " : "+ Array.prototype[i]) }
要取出它们就需要这个东西：
var _slice = Array.prototype.slice; function unbind(fn) {//第一步取得泛化方法 return function(context) {//第二部用对应原生对象去重新调用！ return fn.apply(context, _slice.call(arguments, 1)); }; };
示例以前也给过了，请见这里
总结：
this 的值取决于 function 被调用的方式，一共有四种，
- 如果一个 function 是一个对象的属性，该 funtion 被调用的时候，this 的值是这个对象。如果 function 调用的表达式包含句点（.）或是 []，this 的值是句点（.）或是 [] 之前的对象。如myObj.func 和myObj["func"] 中，func 被调用时的 this 是myObj。
- 如果一个 function 不是作为一个对象的属性，那么该 function 被调用的时候，this 的值是全局对象。当一个 function 中包含内部 function 的时候，如果不理解 this 的正确含义，很容易造成错误。这是由于内部 function 的 this 值与它外部的 function 的 this 值是不一样的。解决办法是将外部 function 的 this 值保存在一个变量中，在内部 function 中使用它来查找变量。
- 如果在一个 function 之前使用 new 的话，会创建一个新的对象，该 funtion 也会被调用，而 this 的值是新创建的那个对象。如function User(name) {this.name = name}; var user1 = new User("Alex"); 中，通过调用new User("Alex") ，会创建一个新的对象，以user1 来引用，User 这个 function 也会被调用，会在user1 这个对象中设置名为name 的属性，其值是Alex 。
- 可以通过 function 的 apply 和 call 方法来指定它被调用的时候的 this 的值。 apply 和 call 的第一个参数都是要指定的 this 的值。由于它们存在，我们得以创建各种有用的函数。