了解下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>
分享到:
相关推荐
Prototype.js 是一个强大的JavaScript类库,它为开发者提供了丰富的功能,使得创建具有高度互动性和Web2.0特性的富客户端页面变得更为简单。这个库的设计理念是扩展JavaScript的基础对象,提供一套统一且易于使用的...
JavaScript Prototype 是一种重要的编程概念,尤其在Web开发中不可或缺。这个压缩包文件“JavaScript_Prototype(源代码+中文手册).rar”包含了关于JavaScript原型的源代码和中文手册,为学习和理解这一主题提供了...
JavaScript中的`prototype`是一个核心概念,它涉及到对象继承和函数原型。在JavaScript中,每创建一个函数,该函数就会自动获得一个名为`prototype`的属性,这个属性是一个对象,用于实现对象间的继承。同时,每个...
《Professional JavaScript Frameworks: Prototype,YUI, ExtJS, Dojo and MooTools》是关于JavaScript框架的高级编程资源,包含了各种知名框架的源代码,这些框架包括Prototype、YUI(Yahoo! User Interface Library...
在JavaScript中,每个函数都有一个`prototype`属性,这个属性是一个对象,它的作用是当试图访问一个对象的属性时,如果该对象自身没有这个属性,就会去查找它的原型对象,以此类推,直到找到属性或者到达原型链的...
**nodejs javascript 前端 prototype 服务端**:这些标签代表了文档涉及的主题范围,即NodeJS(服务器端JavaScript运行时环境)、JavaScript(编程语言)、前端(客户端Web开发)、prototype(原型)和服务端(指...
JavaScript中的`prototype`属性是实现面向对象编程的关键概念之一,尤其在JavaScript中,它用于实现对象的继承。本文将深入探讨`prototype`的含义、作用以及如何使用。 1. **什么是prototype** 在JavaScript中,每...
JavaScript,作为一种广泛应用于Web开发的脚本语言,其高级特性如闭包(closures)、原型(prototype)和继承(inheritance)是理解其精髓的关键。本文将深入探讨这些概念,帮助开发者更好地掌握JavaScript的核心。 ...
prototype.js是一个非常优雅的javascript基础类库,对javascript做了大量的扩展,而且很好的支持Ajax,国外有多个基于此类库实现的效果库,也做得很棒。 prototype.js不仅是一个有很大实用价值的js库,而且有很高...
prototype.js是一个非常优雅的javascript基础类库,对javascript做了大量的扩展,而且很好的支持Ajax,国外有多个基于此类库实现的效果库,也做得很棒。 prototype.js不仅是一个有很大实用价值的js库,而且有很...
JavaScript中的`prototype`是理解面向对象编程的关键概念之一。它是一种机制,允许对象共享属性和方法,从而实现代码复用。在JavaScript中,每个函数(包括构造函数)都有一个内置的`prototype`属性,这个属性指向一...
JavaScript 使用 prototype 定义对象类型 在 JavaScript 中,prototype 是一个非常重要的概念,它提供了一套面向对象编程的基础设施,允许开发者定义对象类型和实现继承。下面我们将详细介绍如何使用 prototype ...
然而,原生JavaScript的API庞大且不统一,为了简化开发,社区创造了一系列的框架,其中jQuery、MooTools和Prototype是三个非常著名的JavaScript库。这些框架提供了一致的接口,增强了DOM操作,简化了事件处理,并...
Prototype 是一个广泛使用的JavaScript库,设计目的是为了简化JavaScript的开发,尤其是处理DOM操作、AJAX交互以及事件处理等方面的工作。它通过提供一系列实用的工具函数和面向对象的特性,极大地提高了JavaScript...
**JavaScript原型(Prototype)库详解** JavaScript是一种动态类型的编程语言,其灵活性和强大的对象操作能力使其在Web开发中占据重要地位。"Prototype.js"是一个针对JavaScript的开源库,旨在增强和扩展JavaScript的...
标题 "prototype_oop_javascript_ruby_prototype_" 暗示了我们将探讨的是关于原型(Prototype)面向对象编程(Object-Oriented Programming, OOP)的概念,主要关注JavaScript和Ruby这两种语言之间的相似性和差异性...
Prototype.js作为一款轻量级的JavaScript框架,以其简洁的API和广泛的适用性,成为了众多开发者的选择。本文旨在通过实际案例,介绍Prototype.js的基础知识和应用技巧,特别是如何利用Prototype.js进行元素定位和DOM...
主要介绍了JavaScript使用prototype属性实现继承操作,结合实例形式详细分析了JavaScript使用prototype属性实现继承的相关原理、实现方法与操作注意事项,需要的朋友可以参考下