文档章节

JS中的prototype

刘文娟
 刘文娟
发布于 2014/12/29 11:38
字数 812
阅读 4
收藏 0

JS中的phototype是JS中比较难理解的一个部分

 

本文基于下面几个知识点:

 

1 原型法设计模式

在.Net中可以使用clone()来实现原型法

原型法的主要思想是,现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展。我们称B的原型为A。

 

2 javascript的方法可以分为三类:

a 类方法

b 对象方法

c 原型方法

例子:

复制代码

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();

复制代码

 

3 obj1.func.call(obj)方法

意思是将obj看成obj1,调用func方法

 

 

好了,下面一个一个问题解决:

 

prototype是什么含义?

 

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

A.prototype = new B();

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

 

先看一个实验的例子:


复制代码

function baseClass()
{
  this.showMsg = function()
  {
     alert(
"baseClass::showMsg");   
  }
}

function extendClass()
{
}

extendClass.prototype 
= new baseClass();
var instance 
= new extendClass();
instance.showMsg(); 
// 显示baseClass::showMsg

复制代码

我们首先定义了baseClass类,然后我们要定义extentClass,但是我们打算以baseClass的一个实例为原型,来克隆的extendClass也同时包含showMsg这个对象方法。

extendClass.prototype = new baseClass()就可以阅读为:extendClass是以baseClass的一个实例为原型克隆创建的。

 

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

下面是扩展实验2:


复制代码

function baseClass()
{
    
this.showMsg = function()
    {
        alert(
"baseClass::showMsg");   
    }
}

function extendClass()
{
    
this.showMsg =function ()
    {
        alert(
"extendClass::showMsg");
    }
}

extendClass.prototype 
= new baseClass();
var instance 
= new extendClass();

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

复制代码

 

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

 

那么又会有一个新的问题:

如果我想使用extendClass的一个实例instance调用baseClass的对象方法showMsg怎么办?

 

答案是可以使用call:


复制代码

extendClass.prototype = new baseClass();
var 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的对象方法

 

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

 


复制代码

<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();
var 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>


本文转载自:http://www.cnblogs.com/yjf512/

刘文娟
粉丝 0
博文 3
码字总数 0
作品 0
苏州
私信 提问
js中的prototype和构造函数

js中没有类的感念,继承也是通过原型链来实现的对象的继承而不是类的继承 Vjeux写的这篇文章应该能帮助我们更好的理解js中原型的工作方式:http://blog.vjeux.com/2011/javascript/how-proto...

leo-H
2013/04/08
622
0
prototype,Mootools,jQuery如何在一个页面里面共存啊?

请教一个页面中同时使用了prototype,Mootools,jQuery三种框架如何解决冲突问题啊? 问题背景描述: 我现在的项目里面有一个页面,早先因为某些原因使用了prototype+QIndex,所以引入了js 后来...

赵开锦
2011/08/16
3.4K
7
js prototype的理解

prototype属性可算是JavaScript与其他面向对象语言的一大不同之处。prototype就是“一个给类的对象添加方法的方法”,使用prototype属性,可以给类动态地添加方法,以便在JavaScript中实现“...

别人说我名字很长
2014/05/15
4.7K
0
了解javascript编程中的Prototype(原型)

日期:2012-5-16 来源:GBin1.com 当你定义javascript方法的时候,会产生一些预定义的属性,其中一个比较让人迷惑的属性就是prototype。在本文中,我们将详细介绍什么是Prototype,并且为什么...

gbin1
2012/05/22
125
0
jQuery命名冲突解决的五种方案

引言: 最近遇到个问题,同时引用了jquery库和另外一个js库。当用$XX去调用js库函数时,发现失效了!于是找资料,原来是jquery命名冲突了。因为许多JavaScript 库使用$作为函数或变量名,jqu...

龙上
2012/03/30
94
0

没有更多内容

加载失败,请刷新页面

加载更多

32位与64位Linux系统下各类型长度对比

64 位的优点:64 位的应用程序可以直接访问 4EB 的内存和文件大小最大达到4 EB(2 的 63 次幂);可以访问大型数据库。本文介绍的是64位下C语言开发程序注意事项。 1. 32 位和 64 位C数据类型...

mskk
20分钟前
6
0
Vue 实现点击空白处隐藏某节点(三种方式:指令、普通、遮罩)

在项目中往往会有这样的需求: 弹出框(或Popover)在 show 后,点击空白处可以将其 hide。 针对此需求,整理了三种实现方式,大家按实际情况选择。 当然,我们做项目肯定会用到 UI 框架,常...

张兴华ZHero
27分钟前
7
0
SpringBoot激活profiles你知道几种方式?

多环境是最常见的配置隔离方式之一,可以根据不同的运行环境提供不同的配置信息来应对不同的业务场景,在SpringBoot内支持了多种配置隔离的方式,可以激活单个或者多个配置文件。 激活Profi...

恒宇少年
28分钟前
7
0
PDF修改文字的方法有哪些?怎么修改PDF文件中的文字

PDF修改文字一直以来都是一个难以解决的问题,很多的办公族在办公的时候会有修改PDF文件中的文字的需要,可是PDF文件一般是不能进行编辑和修改的,难道就没有什么办法解决这个问题了嘛?不要...

趣味办公社
31分钟前
5
0
企业组织中采用服务网格的挑战

作者:Christian Posta 译者:罗广明 原文:https://blog.christianposta.com/challenges-of-adopting-service-mesh-in-enterprise-organizations/ 编者按 本文作者介绍了企业组织采用服务网...

jimmysong
41分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部