`

JavaScript Prototype 详解

 
阅读更多

---------------------- android培训java培训、期待与您交流! ----------------------

本文里讲述的是关于JavaScript的prototype问题,至于具体的JavaScript面向对象的编程教程,请各位看客到其他网站搜索一下,或者到这里看看。

首先开始一个例子,如下:


1 function A() {
2     this.t1 = "ffffff";
3     this.t2 = function (msg) {
4         alert(msg);
5     };
6 };
7
8 A.prototype.p1 = "xxxx";
9
10 A.prototype.f1 = function () {
11      do something.
12 };
其实p1,f1是对function的prototype对象的操作,大家要明白,function
也是一个对象,对象也有属性,而prototype就是function的属性,该属性
也是一个对象,不同之处是,function在做为类定义的时候,创建类实例的
过程(new的过程)要参照它的prototype对象,把prototype对象的所有
属性(也就是Java里的成员,包括成员变量和成员函数)都复制到新的对象
中去,所以可以看出prototype就是模板,而这个模板是在new一个对象之
前就已经存在了。

上面的JavaScript就好像在定义一个Java类,书写类的时候,除了用不同的声明
(Class和Function)区别,基本没有其他的区别,但在运行时有很大的区别。
首先Java要求类必须被编译成字节码才能被载入虚拟机,而JavaScript是在运行
代码的同时,执行了类似Java的编译载入的过程。并且Java的类在载入虚拟机
后一般就不能再改变类的定义了,比如把一个方法的行为改变或指向另一个方
法的引用等。而JavaScript在运行期还可以通过prototype来改变类及所有该类生成
的对象的行为。例如上面的例子中,在解析完function A的函数体后,整个类也
就生成了,这时候如果new的话就能得到类的实例,紧接着的代码又向类动态
添加了新的行为。

而在function A的函数体内定义的this成员,可以理解为‘后’绑定成员。
可以这么理解,在new A()的时候JavaScript建立了一个临时对象,
把A.prototype的所有成员复制到临时对象中,然后再把函数A中
定义的this成员也绑定到临时对象中,然后把临时对象返回给用户。
下面是模拟JavaScript的new关键字的处理伪过程:

//建立临时对象
var tobj = {};
//复制prototype
for (var key in A.prototype)
tobj[key] = A.prototype[key];
//绑定函数体内的this成员(这个过程是JavaScript的内部处理,没有办法模拟)
return tobj to user;

之所以存在function内部定义的this成员,以及prototype的成员是
有原因的。由于JavaScript的类在构造时是可以传递构造参数的,
所以,this成员的行为可能由于参数的不同而不同。这也就是需要后
绑定的原因了。在看下一个例子:

1 function AA(val1,val2) {
2     this.test1 = function() {
3         alert(val1);
4     };
5
6     this.test2 = val2 ? function () { return this.test1;} : function () { return 456; };
7
8     this.test3 = val1 ? val1 : function () {alert("no val1");};
9 }
这个例子很好的说明了后绑定的实际使用价值,所以后绑定对于成员
函数来说是非常有用的,对于成员变量来说其实没什么实际用处。
唯一不同的是,this成员在每次new对象时都要被JavaScript引擎解析,
原因很简单,根据不同的构造参数,使它们在运行期的行为可能有很大
的不同。而prototype的成员就不会每次都解析,第一次定义prototype
成员时才解析,以后可以直接引用prototype成员,并且更改了prototype
成员,所有已经建立的实例对象的相应成员都会被更改。

在运行期可以通过'对象名.成员名'来更改成员,这种方式可以更改this成员
和prototype成员的默认定义,但是更改只限于自身对象,因为JavaScript
和Java一样,也是传值,对象的引用也是一个地址值,所以new一个对象后,
prototype的成员也被复制到那个对象上了,再更改那个对象的成员,只会
影响那个对象自身,其他从同一个类new出来的对象都不会有任何变化。

不能通过运行期设置'类.prototype.成员名'来覆盖this同名成员,这样做没有
任何效果。

通过复制一个对象的所有属性到一个新对象,是不能通过修改prototype成员
来修改新对象的成员行为,因为新对象不是通过原来对象的类new出来的。
通常的复制方法如下:

1 var tobj = {};
2 for (var key in otherObj)
3     tobj[key] = otherObj[key];
看似tobj和otherObj的行为是一致的,他们不是一个类new出来的。
一个很好的办法可以测试,比如otherObj是A类new出来的,
可以通过使用 (tobj instanceof A) 来测试,结果显然是false。

最新的测试表明,这种复制方法可以复制所有自定义方法,
但是系统提供的默认方法是不能被复制的,即使你显式的覆盖了
系统默认提供的方法,如toString方法等。

最后再谈谈prototype的constructor成员,该成员是对一个类的构造
函数的引用,在类定义的初期,如果一个类没有从其他别的类那
里继承,该类的prototype.constructor属性保存的是该类自身的引用,
如果该类从别的类继承,那么它的constructor属性就保存了父类的
constructor引用,一般constructor没有什么用处,但可以通过它来取
得他的类的信息,就像Java里的对象都有getClass()方法,constructor
就是干这个用的。有它的好处是,再运行期可以改变所有同类对象
的成员行为,如:

1 someObj.constructor.prototype.somePrototype = function () {
2 other process .
3 }
因此好的习惯是在继承之后把prototype的constructor成员设置一下,
否则会把父类的prototype成员改掉,那样程序的行为就不可预知了。
如:

1 function classA() {
2
3 }
4
5 classB.prototype = new classA();
6 classB.prototype.constructor = classB;
7
我要说的关于JavaScript的prototype属性就这么多,大家多提意见多交流。

---------------------- android培训java培训、期待与您交流! ----------------------

分享到:
评论

相关推荐

    javascript prototype原型详解(比较基础)

    javascript的prototype原型简单介绍: prototype原型是javascript中特别重要的概念,属于必须要掌握,如果没有良好的掌握的话,进一步用好或者学好js基本是不可能的实现的事情,并且此概念稍有难度,可能对于初次接触...

    JavaScript prototype属性详解

    JavaScript中的`prototype`属性是面向对象编程的关键特性之一,它关联了函数(特别是构造函数)与实例之间的继承关系。每个函数都有一个`prototype`属性,这个属性是一个对象,包含了所有实例共享的方法和属性。当...

    Prototype详解

    ### Prototype详解:深入理解JavaScript库的核心功能与Ajax应用 #### 一、Prototype简介与核心功能解析 ##### 1. Prototype是什么? Prototype是一个由Sam Stephenson创建的JavaScript库,旨在简化和标准化...

    javaScript使用详解.pdf

    JavaScript,是一种广泛应用于Web开发的轻量级编程语言,它主要负责实现客户端的动态...总结,《JavaScript使用详解》这本书将深入讲解这些内容,帮助读者从基础到进阶全面掌握JavaScript,为Web开发打下坚实的基础。

    Prototype

    **Prototype 框架详解** Prototype 是一个广泛使用的JavaScript库,设计目的是为了简化JavaScript的开发,尤其是处理DOM操作、AJAX交互以及事件处理等方面的工作。它通过提供一系列实用的工具函数和面向对象的特性...

    javascript函数详解!

    JavaScript函数详解 JavaScript是一种强大的、基于原型的、动态类型的脚本语言,广泛应用于网页和网络应用开发。在JavaScript中,函数扮演着核心角色,它们不仅可以作为可执行的代码块,还可以作为值进行传递和存储...

    JavaScript 继承详解(六)

    在本章中,我们将分析Prototypejs中关于JavaScript继承的实现。 Prototypejs是最早的JavaScript类库,可以说是JavaScript类库的鼻祖。 我在几年前接触的第一个JavaScript类库就是这位,因此Prototypejs有着广泛的...

    prototype.js javaScript插件

    **JavaScript原型(Prototype)库详解** JavaScript是一种动态类型的编程语言,其灵活性和强大的对象操作能力使其在Web开发中占据重要地位。"Prototype.js"是一个针对JavaScript的开源库,旨在增强和扩展JavaScript的...

    Javascript中prototype的使用详解

    JavaScript中的`prototype`是面向对象编程的一个核心概念,它允许我们为对象定义共享的方法和属性。在JavaScript中,每一个函数都有一个`prototype`属性,这个属性是一个对象,当我们创建一个新对象实例时,该实例会...

    Prototype框架详解

    Prototype框架是一种广泛使用的JavaScript库,它为JavaScript编程提供了一系列实用的功能,增强了JavaScript的面向对象特性。这个框架的主要目标是简化DOM操作,提供更强大的函数工具,并优化JavaScript代码的可读性...

    JavaScript 继承详解(三)

    在JavaScript编程中,继承是面向对象编程的核心概念之一,它允许开发者构建出层级化的对象结构。在JavaScript中实现继承有多种方法,其中构造函数和原型链的方式是较为传统的一种,但在实际应用中存在一些问题和陷阱...

    JavaScript继承详解.doc

    JavaScript中的继承是面向对象编程的重要概念,它允许一个对象(子对象)获取另一个对象(父对象)的属性和方法,从而实现代码复用和多态性。JavaScript支持多种继承实现方式,包括以下四种: 1. **构造函数继承**...

    JavaScript 继承详解(二)

    // "ZhangSan" 在JavaScript中,继承是通过原型链机制实现的,这里的原型就是prototype属性。每个函数都有一个prototype属性,它指向一个对象,这个对象就是实例化该函数时,新创建的对象所继承的属性和方法的来源...

    Javascript中prototype与__proto__的关系详解

    主要给大家介绍了关于Javascript中prototype与__proto__的关系的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。

    JavaScript使用详解

    这份名为“JavaScript使用详解”的PDF文件,无疑是对这门语言的一次深入剖析,旨在帮助开发者全面理解和熟练掌握JavaScript的核心概念与实际应用。 JavaScript最初由Brendan Eich在1995年为Netscape Navigator...

    详解JavaScript中基于原型prototype的继承特性_.docx

    JavaScript中的原型(prototype)机制是实现继承的一种核心方式。由于JavaScript是一种基于原型的面向对象语言,它不支持传统的类(class)概念,因此其继承机制显得与众不同。在JavaScript中,对象可以直接从另一个...

    prototype.chm+jquery详解

    标题"prototype.chm+jquery详解"提到了两个关键的JavaScript库:Prototype和jQuery。Prototype是早期非常流行的JavaScript库,它提供了一系列工具来简化DOM操作、事件处理以及Ajax交互。jQuery则是目前广泛应用的一...

Global site tag (gtag.js) - Google Analytics