JQuery里的原型prototype分析

在 JavaScript 中,每个函数对象都有一个默认的属性 prototype,称为函数对象的原型成员,这个属性指向一个对象,称为函数的原型对象,当我们每定义了一个函数的时候,JavaScript 就创建了一个对应的原型对象,也就是说,当我们定义一个函数的时候,实际上得到了两个对象,一个函数对象,一个原型对象。原型对象是一个特殊的对象,函数的 prototype 成员指向它的原型对象。

可以通过函数对象的 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();

这个原型对象上定义的成员将用来共享给所有通过这个函数创建的对象使用。相当于 C# 中的实例方法,对象,函数和原型在内存中的关系如下图所示:

每个对象也都有一个原型成员 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

}

这个函数实际上通过 new jQuery.fn.init( selector, context )来完成,也就是通过 init 函数创建了一个对象。

下面重新指定了函数 init 的原型对象。所以 init 函数的原型对象就是 fn 对象。

1

// Give the init function the jQuery prototype for later instantiation

2

jQuery.fn.init.prototype = jQuery.fn;

这样所有通过 $ 创建出来的对象都将共享 fn 对象上的成员。因此,jQuery 对象都有了类似 attr 、html 等等方法了。

整理了一下 jQuery 的原型关系图,理解起来更加方便一些。

图例:黄色的为对象,蓝色的为函数。

时间: 2024-08-02 19:15:38

JQuery里的原型prototype分析的相关文章

Jquery之isPlainObject源码分析

今天对Jquery中 isPlainObject 源码分析. 1.  isPlainObject 方法的作用: 用来判断传入参数,是否是对象. 2. 源码分析:isPlainObject: function( obj ) { // 1. jQuery.type( obj ): 通过 juery 封装的类型判断方法,如果不是 Object类型,返回false // 2. obj.nodeType : 用来判断是否是dom 节点, 如果是,返回 false // 3. jQuery.isWindow

jQuery之ajax错误调试分析

jQuery之ajax错误调试分析 jQuery中把ajax封装得非常好.但是日常开发中,我偶尔还是会遇到ajax报错.这里简单分析一下ajax报错 一般的jQuery用法如下,ajax通过post方式提交"汤姆和老鼠"这段数据到xxx.php文件中.成功后则打印返回的数据,失败则打印错误原因. 1 2 3 4 5 6 7 8 9 10 $.ajax({     url:"xxx.php",     type:"post",     dataty

JS原型,Prototype,原型

对于javascript这样一种前端语言,个人觉得,要真正的理解其oop, 就必须要彻底搞清楚javascript的对象,原型链,作用域,闭包,以及this所引用的对象等概念.这些对弄明白了,应该就可以比较自信的驾驭这种语言了. 大家都知道,javascript中的继承不是使用的类继承的机制,而是使用的另一种方式 – 原型继承.在原型继承方式中,本质上是javascript语言加入原型链这种机制,从而实现了面向对象的重要特性之一 – 继承.在这篇博文中,基于个人的理解,来说说javascript

JQuery data API实现代码分析

JQuery data 接口是什么? .data() Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements. 根据jquery官网介绍,data给存储DOM关联的数据, 设置数据是对$选取的所有JQuery对象, 获取数据是对$选取的所有对象的

对象 原型prototype

一.对象   1. var person={          name:"kobe",//键值必须用,间隔          "age":30,          sayName:function(){              console.log("i'm"+this.name);          }     }; 可配置性:指明该属性是否可以修改.删除   可删除configurable:true/false   若 configur

原型(Prototype)模式

原型模式属于对象的创建模式.通过给出一个原型对象来指明所有创建的对象的类型,然后用复制这个原型对象的办法创建出更多同类型的对象.这就是原型模式的用意.原型模式的结构 原型模式要求对象实现一个可以“克隆”自身的接口,这样就可以通过复制一个实例对象本身来创建一个新的实例.这样一来,通过原型实例创建新的对象,就不再需要关心这个实例本身的类型,只要实现了克隆自身的方法,就可以通过这个方法来获取新的对象,而无须再去通过new来创建.原型模式有两种表现形式:简单形式.登记形式,这两种表现形式仅仅是原型模式的

关于构造函数和原型prototype对象的理解

构造函数     1.什么是构造函数 构造函数,主要用于对象创建的初始化,和new运算符一起用于创建对象,一个类可以有多个构造函数,因为函数名相同,所以只能通过参数的个数和类型不同进行区分,即构造函数的重构, 如果没有定义构造函数,那么该类会自动生成一个空参数的构造函数. 在javascript中,对象创建有二种方式:对象字面量和使用new表达式. 对象字面量,每创建一个对象都要重新定义一次语句,不便于创建大量相同类型的对象 new表达式,配合构造函数使用,例如var person1 = new

[js高手之路]一步步图解javascript的原型(prototype)对象,原型链

我们接着上文继续,我们通过原型方式,解决了多个实例的方法共享问题,接下来,我们就来搞清楚原型(prototype),原型链的来龙去脉. function CreateObj(uName) {             this.userName = uName;         }         CreateObj.prototype.showUserName = function(){             return this.userName;         }         va

克隆复制可使用原型( Prototype)设计模式

今天有学习设计模式的原型(Prototype)<设计模式--原型(Prototype)模式>http://www.cnblogs.com/insus/p/4152773.html .为了加强了解与认识,现再做一个练习. 创建一个原型接口: 创建一个用户控件,并实现接口: 现在网页中有一个按钮,用户点一点这个铵钮,能动态添加这个用户控件,每点击一次,克隆复制一个: 演示: 源代码下载:http://download.cnblogs.com/insus/CSharpNET/uc_prototype