JQuery里的原型prototype分析
2016-03-03 00:00
330 查看
在 JavaScript 中,每个函数对象都有一个默认的属性 prototype,称为函数对象的原型成员,这个属性指向一个对象,称为函数的原型对象,当我们每定义了一个函数的时候,JavaScript 就创建了一个对应的原型对象,也就是说,当我们定义一个函数的时候,实际上得到了两个对象,一个函数对象,一个原型对象。原型对象是一个特殊的对象,函数的 prototype 成员指向它的原型对象。
可以通过函数对象的 prototype 成员取得这个原型对象的引用。
下面定义一个函数对象 Person,然后通过 prototype 来取得它的原型对象。然后在它的原型对象上定义了一个方法。
这个原型对象上定义的成员将用来共享给所有通过这个函数创建的对象使用。相当于 C# 中的实例方法,对象,函数和原型在内存中的关系如下图所示:
每个对象也都有一个原型成员 prototype,通过 new 函数创建的对象会通过函数的 prototype 找到函数的原型,然后将自己的原型指向这个对象。对于不是通过函数创建的对象实例和原型对象,它们的原型会被设置为 Object 函数的原型对象。
Object 函数对象是 JavaScript 中定义的顶级函数对象,在 JavaScript 中所有的对象都直接或者间接地使用 Object 对象的原型。 当访问对象的属性或者方法的时候,如果对象本身没有这个属性或者方法,那么,JavaScript 会检查对象的 prototype 对象是否拥有这个属性或者方法,如果有,则作为对象的属性或者方法返回,如果没有,那么将通过原型对象的 prototype 继续进行检查,直到原型对象为 Object 函数的原型对象为止。
但是 prototype 是一个特殊的属性,在大多数的浏览器上,例如 IE 浏览器,都不能直接访问对象的 prototype 成员。返回的结果为 undefined。不能赋予对象一个新的原型,只能通过创建它的函数来确定对象的原型。
函数对象的原型有一个特殊的用途,就是通过函数 new 创建出来的对象,会自动将函数对象的原型赋予新创建出的对象的原型。这样,如果为某个函数设置了原型对象,那么,所有通过这个函数创建的对象将拥有同样的原型对象。通过这个方法,可以使这些对象共享相同的属性或者方法,来模拟类型的概念。
在 jQuery 中,我们经常使用的 $() 函数就是定义在 window 对象上的 $() 函数。
这个函数实际上通过 new jQuery.fn.init( selector, context )来完成,也就是通过 init 函数创建了一个对象。
下面重新指定了函数 init 的原型对象。所以 init 函数的原型对象就是 fn 对象。
这样所有通过 $ 创建出来的对象都将共享 fn 对象上的成员。因此,jQuery 对象都有了类似 attr 、html 等等方法了。
整理了一下 jQuery 的原型关系图,理解起来更加方便一些。
图例:黄色的为对象,蓝色的为函数。
可以通过函数对象的 prototype 成员取得这个原型对象的引用。
下面定义一个函数对象 Person,然后通过 prototype 来取得它的原型对象。然后在它的原型对象上定义了一个方法。
01 | function Person() |
02 | { |
03 | } |
04 |
05 | Person.prototype.showPerson = function() |
06 | { |
07 | alert( "Person Object."); |
08 | } |
09 |
10 | var alice = new Person(); |
11 | alice.showPerson(); |
每个对象也都有一个原型成员 prototype,通过 new 函数创建的对象会通过函数的 prototype 找到函数的原型,然后将自己的原型指向这个对象。对于不是通过函数创建的对象实例和原型对象,它们的原型会被设置为 Object 函数的原型对象。
Object 函数对象是 JavaScript 中定义的顶级函数对象,在 JavaScript 中所有的对象都直接或者间接地使用 Object 对象的原型。 当访问对象的属性或者方法的时候,如果对象本身没有这个属性或者方法,那么,JavaScript 会检查对象的 prototype 对象是否拥有这个属性或者方法,如果有,则作为对象的属性或者方法返回,如果没有,那么将通过原型对象的 prototype 继续进行检查,直到原型对象为 Object 函数的原型对象为止。
但是 prototype 是一个特殊的属性,在大多数的浏览器上,例如 IE 浏览器,都不能直接访问对象的 prototype 成员。返回的结果为 undefined。不能赋予对象一个新的原型,只能通过创建它的函数来确定对象的原型。
函数对象的原型有一个特殊的用途,就是通过函数 new 创建出来的对象,会自动将函数对象的原型赋予新创建出的对象的原型。这样,如果为某个函数设置了原型对象,那么,所有通过这个函数创建的对象将拥有同样的原型对象。通过这个方法,可以使这些对象共享相同的属性或者方法,来模拟类型的概念。
在 jQuery 中,我们经常使用的 $() 函数就是定义在 window 对象上的 $() 函数。
1 | jQuery = window.jQuery = window.$ = function( selector, context ) |
2 | { |
3 | // The jQuery object is actually just the init constructor 'enhanced' |
4 | return new jQuery.fn.init( selector, context ); |
5 | } |
下面重新指定了函数 init 的原型对象。所以 init 函数的原型对象就是 fn 对象。
1 | // Give the init function the jQuery prototype for later instantiation |
2 | jQuery.fn.init.prototype = jQuery.fn; |
整理了一下 jQuery 的原型关系图,理解起来更加方便一些。
图例:黄色的为对象,蓝色的为函数。
相关文章推荐
- [jQuery学习系列六]6-jQuery实际操作小案例
- [jQuery学习系列五 ]5-Jquery学习五-表单验证
- jquery是如何架构的.
- [jQuery学习系列四 ]4-Jquery学习四-事件操作
- [jQuery学习系列三 ]3-JQuery学习二-字典操作
- jquery源码解析
- jquery 事件綁定
- JQuery+AJAX file upload demo (Python+flask as web server)
- js与jquery实现搜索框提示文字显示与隐藏
- 利用jQuery中hover()和cookie机制编写的小程序
- jQuery--加一行减一行
- jQuery--后台主机列表编辑
- IE8 jquery ajax获取静态资源报错TypeError 拒绝访问
- JqueryEasyUi
- jQuery与其他JS库的共存问题
- 关于jQuery新的事件绑定机制on()的使用技巧
- jquery.blockUI.2.31.js 弹出层项目介绍
- MVC+jQuery 无刷新导出EXCEL的过程(伪excel格式)
- jquery noConflict
- JQuery-复选框的操作(摘自<锋利的JQuery>)