初次看到prototype.js框架里面的Function.prototype.bind = function() {}和class.create()方法实在有些不理解,因为通常mickey在使用jquery的时候并没多想这些强大的库里面为我们提供的那些及其方便使用的原型方法是如何实现的。所以在看到prototype.js此类的框架的部分源码后,对里面一些基础的类扩展原型方法的巧妙使用理解起来吃力的原因了。但是mickey经过层层分析,段段调用,因此得出了以下结论,如有不足之处请留言指正。
prototype.js中的Function.prototype.bind方法:
Function.prototype.bind = function() {
var __method = this;
var args = Array.prototype.slice.call(arguments);
var object=args.shift();
return function() {
return __method.apply(object,
args.concat(Array.prototype.slice.call(arguments)));
}
}
为所有function对象增加一个新的prototype(原型)方法bind:
1.将调用bind方法的对象保存到__method(方法)变量里面。
2.将调用bind方法时传递的参数转换成为数组保存到变量args。
3.将args数组的第一位[0]元素提取出来保存到变量object。
4.返回一个函数。
这个被返回的函数在再次被调用的时候执行如下操作:
1.使用apply方法将调用bind方法的函数里面的this指针替换为object。
2.将传递到这个匿名函数里面的参数转换为数组,与args数组组合形成一个新的数组,传递给__method方法。
var args = Array.prototype.slice.call(arguments)将这条代码简写来看可以成为这样[].slice.call(arguments);但是这样会给内存里增加一个空的数组对象,为了容易阅读点在简化可以把它假看成为这样的形式slice.call(arguments),去掉call可以假看成为这样的形式function slice(arguments){….},其实在slice就是一个为所有数组定义好的prototype方法而已它与我们自定义的原型方法不同的是,它是javascript为开发者预先定义好的内置方法,他只能被数组调用。mickey在编辑器里面alert(Array.prototype.slice)之后得到的就是funciton slice(){…}。
既然slice也只是一个普通函数方法,slice.call(object)这样让slice里面的this临时的被替换一下也是可以的。就如[].slice(){..}里面的this指针会指向调用slice方法的数组对象一样。使用call方法或apply方法可以将调用此方法的对象内的this指针临时性的改变为传递参数中的第一个参数,这一切都是临时性的,它会在函数执行完毕内存释放后重置。
var object=args.shift()将数组中的[0]位置的对象保存到object变量,这个object就是要被替换的指针。
function o(){
this.num = 1;
var fn = function(arg){alert(this.num+arg)}.bind(this,2);
fn();
}
new o()
代码的第3行:一个匿名函数调用了bind方法,并传递o对象和一个数字2到bind函数里面,这两个传递过去的参数都将被转换成为数组形式,o对象会被单独提取出来放入object里。之后bind函数调用完毕,返回一个函数保存到 fn变量里边,现在fn变量里保存了bind函数的返回函数,fn里面的内容就文章第一个代码块的第五行到第七行。
代码第4行:调用fn函数,或者说是在调用bind函数的返回值。这时候会弹出数字“3”。
bind方法中的匿名函数间接保存了它运行环境里面的变量,通常这样的方法称之为“闭包”。
这在很多开源框架为开发者制作出的强大方法和属性便是这样出来的,对于初学者mickey来说以上言论如有不正确的地方还是我想还是可以勉强原谅的,如果您发现了不妥之处请留言指出。
http://www.mymickey.org/?p=97
分享到:
相关推荐
它在Web开发中扮演着重要的角色,尤其在AJAX(异步JavaScript和XML)应用中,Prototype.js 提供了丰富的功能和工具,使得开发者能更高效地编写JavaScript代码。 ### 一、Prototype.js核心特性 1. **DOM操作**:...
《prototype.js 1.4版开发者手册》是JavaScript开发领域中的一个重要参考资料,尤其对于那些希望深入理解并利用Prototype库的开发者来说,它是一份不可多得的资源。Prototype.js是一个强大的JavaScript库,由Sam ...
此外,`Function.prototype.bind()` 方法允许将函数绑定到特定的上下文,确保this关键字始终指向期望的对象,这是在事件处理和其他回调函数中非常有用的特性。 除了核心库,提供的中文CHM帮助文档是学习和理解...
总结,Prototype.js是JavaScript开发中的一个重要工具,它通过一系列强大的API和设计模式,使得JavaScript的开发更加高效、优雅。通过学习和掌握Prototype,开发者可以更好地驾驭JavaScript,创造出更具交互性的Web...
8. **实用工具**:Prototype.js 还包含许多实用工具函数,如`$()`用于快速获取DOM元素,`$$()`用于选择一组元素,以及`Function.bind()`用于绑定函数上下文等。 9. **性能优化**:Prototype.js 在设计时就考虑了...
Prototype.js提供了许多Function类的扩展,例如Function.prototype.bind()、Function.prototype.defer()等。 2.5. 对 String 类的扩展 Prototype.js提供了许多String类的扩展,例如String.prototype.camelize()、...
`Object.extend`方法是Prototype.js中的一个核心功能,它实现了对象的浅复制,即把源对象的所有属性和方法复制到目标对象上。这类似于多重继承,但不同于真正的多重继承,因为JavaScript中的继承关系不会改变。旧...
Prototype.js是开源的JavaScript框架,它扩展了JavaScript的基本对象,提供了类和面向对象编程的支持,以及一系列实用的DOM操作方法,极大地简化了JavaScript的开发工作。 Prototype.js的核心知识点包括: 1. **类...
对于函数绑定(Function binding)很有可能是大家在使用JavaScript时最少关注的一点,但是当你意识到你需要一个解决方案来解决如何在另一个函数中保持this上下文的时候,你真正需要的其实就是 Function.prototype.bind...
- **2.4 对 Function 类的扩展**:例如 `Function.prototype.bind()` 方法允许绑定函数的上下文。 - **2.5 对 String 类的扩展**:增加了诸如 `String.prototype.trim()` 等方法来清理字符串两侧的空白字符。 - **...
7. **Function增强**:Prototype.js 对Function原型进行了扩展,添加了bind()方法,可以改变函数的调用上下文,还有defer()用于延迟执行函数。 8. **Prototype对象**:每个JavaScript对象都隐含地继承自Prototype...
- **函数工具**:Prototype.js 也提供了很多函数级的操作工具,例如`Function.bind()`用于绑定函数的上下文,`Function.prototype.curry()`可以部分应用函数参数。 ### 2. Prototype.js 开发者手册1.4版 在1.4版本...
在Prototype.js 1.6版本中,它提供了一系列高效且功能强大的工具,帮助开发者更高效地编写JavaScript代码。这份帮助文档不仅是一份API参考,更是一份学习Prototype.js的宝贵资料。 1. **对象与类的扩展** ...
Function.prototype.bind() 是 JavaScript 中的一个方法,用于创建一个新的函数,该函数将被绑定到指定的 this 上,以及初始参数传递给函数。 #### 2. 需要解决的问题 在 JavaScript 编程中,经常需要在不同的上...
【描述】:本文档主要涵盖了Prototype.js库的编程指南,包括其核心概念、通用方法、Ajax对象以及对JavaScript原生类型和DOM对象的扩展。Prototype.js是一个由Sam Stephenson编写的JavaScript库,旨在简化Web 2.0应用...
《prototype.js 1.4版开发手册》是针对JavaScript开发者的重要参考资料,主要聚焦于Prototype JavaScript框架的1.4版本。Prototype是一个广泛使用的开源JavaScript库,它扩展了JavaScript语言,为Web开发提供了强大...
Prototype.js是一款强大的JavaScript库,主要为了解决JavaScript在浏览器环境中的不一致性,提供了一套优雅的API,使得开发者能够更高效地编写跨浏览器的Ajax应用。作为Ajax技术的核心库,Prototype.js以其丰富的...
2. **Function.prototype.bind**:让函数拥有指定的上下文(this值),解决了JavaScript中this动态绑定的问题。 3. **Element**和**$$**:提供了一套强大的DOM操作接口,Element对象可以对HTML元素进行各种操作,$$...
7. **Function增强**:Prototype扩展了JavaScript的函数,增加了如 curry、bind 和 throttle 等方法,提高了函数的可操作性和复用性。 `prototype.pdf`很可能是Prototype的开发文档,通常这类文档会详细介绍...