`
zxq198181
  • 浏览: 13828 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

javascript下的protype

阅读更多
了解下JavaScript中的prototype
JS中的phototype是JS中比较难理解的一个部分。javascript的方法可以分为三类:类方法,对象方法,原型方法。

例子:

view sourceprint?01 function People(name) 



     this.name=name; 

     //对象方法 

    this.Introduce=function(){ 

         alert("My name is "+this.name); 

     } 



//类方法 

People.Run=function(){ 

     alert("I can run"); 



//原型方法 

People.prototype.IntroduceChinese=function(){ 

     alert("我的名字是"+this.name); 



   

//测试 

var p1=new People("Windking"); 

p1.Introduce(); 

People.Run(); 

p1.IntroduceChinese();

obj1.func.call(obj)方法意思是将obj看成obj1,调用func方法。

prototype是什么含义
javascript中的每个对象都有prototype属性,Javascript中对象的prototype属性的解释是:返回对象类型原型的引用。

' view sourceprint?1 A.prototype = new B();

理解prototype不应把它和继承混淆。A的prototype为B的一个实例,可以理解A将B中的方法和属性全部克隆了一遍。A能使用B的方法和属性。这里强调的是克隆而不是继承。可以出现这种情况:A的prototype是B的实例,同时B的prototype也是A的实例。

先看一个实验的例子:

view sourceprint?01 function baseClass() 



     this.showMsg = function() 

     { 

         alert("baseClass::showMsg");    

    } 



   

function extendClass() 



       



   

extendClass.prototype = new baseClass(); 

instance = new extendClass(); 

instance.showMsg(); // 显示baseClass::showMsg

我们首先定义了baseClass类,然后我们要定义extentClass,但是我们打算以baseClass的一个实例为原型,来克隆的extendClass也同时包含showMsg这个对象方法。extendClass.prototype = new baseClass()就可以阅读为:extendClass是以baseClass的一个实例为原型克隆创建的。

那么就会有一个问题,如果extendClass中本身包含有一个与baseClass的方法同名的方法会怎么样?

下面是扩展实验2:

view sourceprint?01 function baseClass() 



     this.showMsg = function() 

     { 

         alert("baseClass::showMsg");    

     } 



   

function extendClass() 



     this.showMsg =function () 

     { 

         alert("extendClass::showMsg"); 

     } 



   

extendClass.prototype = new baseClass(); 

instance = new extendClass(); 

   

instance.showMsg();//显示extendClass::showMsg

实验证明:函数运行时会先去本体的函数中去找,如果找到则运行,找不到则去prototype中寻找函数。或者可以理解为prototype不会克隆同名函数。

那么又会有一个新的问题:如果我想使用extendClass的一个实例instance调用baseClass的对象方法showMsg怎么办?

答案是可以使用call:

view sourceprint?
extendClass.prototype = new baseClass(); 

instance = new extendClass(); 

   

var baseinstance = new baseClass(); 

baseinstance.showMsg.call(instance);//显示baseClass::showMsg

这里的baseinstance.showMsg.call(instance);阅读为"将instance当做baseinstance来调用,调用它的对象方法showMsg"。好了,这里可能有人会问,为什么不用baseClass.showMsg.call(instance);这就是对象方法和类方法的区别,我们想调用的是baseClass的对象方法

最后,下面这个代码如果理解清晰,那么这篇文章说的就已经理解了:

view sourceprint?01 <script type="text/javascript"> 

function baseClass() 



     this.showMsg = function() 

     { 

        alert("baseClass::showMsg");    

     } 

      

     this.baseShowMsg = function() 

     { 

         alert("baseClass::baseShowMsg"); 

     } 



baseClass.showMsg = function() 



     alert("baseClass::showMsg static"); 



   

function extendClass() 



     this.showMsg =function () 

    { 

         alert("extendClass::showMsg"); 

     } 



extendClass.showMsg = function() 



     alert("extendClass::showMsg static") 



   

extendClass.prototype = new baseClass(); 

instance = new extendClass(); 

   

instance.showMsg(); //显示extendClass::showMsg 

instance.baseShowMsg(); //显示baseClass::baseShowMsg 

instance.showMsg(); //显示extendClass::showMsg 

   

baseClass.showMsg.call(instance);//显示baseClass::showMsg static 

  

var baseinstance = new baseClass(); 

baseinstance.showMsg.call(instance);//显示baseClass::showMsg 
   

</script>
分享到:
评论

相关推荐

    javascript类库prototype.js

    Prototype.js 是一个强大的JavaScript类库,它为开发者提供了丰富的功能,使得创建具有高度互动性和Web2.0特性的富客户端页面变得更为简单。这个库的设计理念是扩展JavaScript的基础对象,提供一套统一且易于使用的...

    JavaScript_Prototype(源代码+中文手册).rar

    JavaScript Prototype 是一种重要的编程概念,尤其在Web开发中不可或缺。这个压缩包文件“JavaScript_Prototype(源代码+中文手册).rar”包含了关于JavaScript原型的源代码和中文手册,为学习和理解这一主题提供了...

    JavaScript的prototype

    JavaScript中的`prototype`是一个核心概念,它涉及到对象继承和函数原型。在JavaScript中,每创建一个函数,该函数就会自动获得一个名为`prototype`的属性,这个属性是一个对象,用于实现对象间的继承。同时,每个...

    Professional JavaScript Frameworks: Prototype,YUI, ExtJS, Dojo and MooTools

    《Professional JavaScript Frameworks: Prototype,YUI, ExtJS, Dojo and MooTools》是关于JavaScript框架的高级编程资源,包含了各种知名框架的源代码,这些框架包括Prototype、YUI(Yahoo! User Interface Library...

    javascript的prototype继承

    在JavaScript中,每个函数都有一个`prototype`属性,这个属性是一个对象,它的作用是当试图访问一个对象的属性时,如果该对象自身没有这个属性,就会去查找它的原型对象,以此类推,直到找到属性或者到达原型链的...

    JavaScript_prototype_pollution_attack_in_NodeJS.pdf

    **nodejs javascript 前端 prototype 服务端**:这些标签代表了文档涉及的主题范围,即NodeJS(服务器端JavaScript运行时环境)、JavaScript(编程语言)、前端(客户端Web开发)、prototype(原型)和服务端(指...

    JavaScript中prototype的使用

    JavaScript中的`prototype`属性是实现面向对象编程的关键概念之一,尤其在JavaScript中,它用于实现对象的继承。本文将深入探讨`prototype`的含义、作用以及如何使用。 1. **什么是prototype** 在JavaScript中,每...

    Advanced JavaScript (closures,prototype,inheritance)

    JavaScript,作为一种广泛应用于Web开发的脚本语言,其高级特性如闭包(closures)、原型(prototype)和继承(inheritance)是理解其精髓的关键。本文将深入探讨这些概念,帮助开发者更好地掌握JavaScript的核心。 ...

    Javascript-prototype.js 1.4版开发者手册

    prototype.js是一个非常优雅的javascript基础类库,对javascript做了大量的扩展,而且很好的支持Ajax,国外有多个基于此类库实现的效果库,也做得很棒。 prototype.js不仅是一个有很大实用价值的js库,而且有很高...

    Prototype_1.6 JavaScript代码和中文帮助手册

     prototype.js是一个非常优雅的javascript基础类库,对javascript做了大量的扩展,而且很好的支持Ajax,国外有多个基于此类库实现的效果库,也做得很棒。  prototype.js不仅是一个有很大实用价值的js库,而且有很...

    了解JavaScript中的prototype (实例)

    JavaScript中的`prototype`是理解面向对象编程的关键概念之一。它是一种机制,允许对象共享属性和方法,从而实现代码复用。在JavaScript中,每个函数(包括构造函数)都有一个内置的`prototype`属性,这个属性指向一...

    JavaScript使用prototype定义对象类型

    JavaScript 使用 prototype 定义对象类型 在 JavaScript 中,prototype 是一个非常重要的概念,它提供了一套面向对象编程的基础设施,允许开发者定义对象类型和实现继承。下面我们将详细介绍如何使用 prototype ...

    jQuery、Mootools、Prototype三大JavaScript框架中文手册

    然而,原生JavaScript的API庞大且不统一,为了简化开发,社区创造了一系列的框架,其中jQuery、MooTools和Prototype是三个非常著名的JavaScript库。这些框架提供了一致的接口,增强了DOM操作,简化了事件处理,并...

    Prototype

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

    prototype.js javaScript插件

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

    prototype_oop_javascript_ruby_prototype_

    标题 "prototype_oop_javascript_ruby_prototype_" 暗示了我们将探讨的是关于原型(Prototype)面向对象编程(Object-Oriented Programming, OOP)的概念,主要关注JavaScript和Ruby这两种语言之间的相似性和差异性...

    Prototype.js学习从简单开始

    Prototype.js作为一款轻量级的JavaScript框架,以其简洁的API和广泛的适用性,成为了众多开发者的选择。本文旨在通过实际案例,介绍Prototype.js的基础知识和应用技巧,特别是如何利用Prototype.js进行元素定位和DOM...

    JavaScript使用prototype属性实现继承操作示例

    主要介绍了JavaScript使用prototype属性实现继承操作,结合实例形式详细分析了JavaScript使用prototype属性实现继承的相关原理、实现方法与操作注意事项,需要的朋友可以参考下

Global site tag (gtag.js) - Google Analytics