JS中prototype的用法实例分析

本文实例讲述了JS中prototype的用法。分享给大家供大家参考。具体分析如下：

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>

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • js老生常谈之this,constructor ,prototype全面解析

    前言 javascript中的this,constructor ,prototype,都是老生常谈的问题,深入理解他们的含义至关重要.在这里,我们再来复习一下吧,温故而知新! this this表示当前对象,如果在全局作用范围内使用this,则指代当前页面对象window: 如果在函数中使用this,则this指代什么是根据运行时此函数在什么对象上被调用. 我们还可以使用apply和call两个全局方法来改变函数中this的具体指向. 先看一个在全局作用范围内使用this的例子: console

  • js使用Array.prototype.sort()对数组对象排序的方法

    本文实例讲述了js使用Array.prototype.sort()对数组对象排序的方法.分享给大家供大家参考.具体分析如下: 在讲对数组对象进行排序时,我们先来简单的了解一下Array.prototype.sort().sort方法接受一个参数--Function,function会提供两个参数,分别是两个进行比较的元素,如果元素是String类型则通过Unicode code进行比较,如果是Number类型则比较值的大小.如果比较的函数中返回1则两个元素交换位置,0和-1不交换位置.先看一个例

  • 聊一聊JS中的prototype

    什么是prototype: function定义的对象有一个prototype属性,prototype属性又指向了一个prototype对象,注意prototype属性与prototype对象是两个不同的东西,要注意区别.在prototype对象中又有一个constructor属性,这个constructor属性同样指向一个constructor对象,而这个constructor对象恰恰就是这个function函数本身. //判断是否是数组 function isArray(obj) { ret

  • 浅谈javascript的Array.prototype.slice.call

    写字前面 在js中我们经常会看到Array.prototype.slice.call(arguments,0)的写法,当然,这个方法的作用也许大家都明白,那就是把类数组对象转换成一个真正的数组.关于这个方法,我说说自己的理解. 这里涉及到slice()方法和call()方法,所以先简单说说这两个方法. slice()方法 数组和字符串都有这个slice方法,这个方法的作用是截取一段数据.它接收两个参数,第一个参数是要截取的位置索引,第二参数可选,表示要截取到的结束位置,但是不包括结束位置.在数组

  • js实现prototype扩展的方法(字符串,日期,数组扩展)

    本文实例讲述了js实现prototype扩展的方法.分享给大家供大家参考,具体如下: String.prototype.isEmpty = function () { return !(/.?[^/s ]+/.test(this)); } //检测字符串是否为空 // 替换字符 String.prototype.reserve = function(type) { if (type == 'int') return this.replace(/^/d/g, ''); // 替换字符串中除了数字以

  • Javascript中的Prototype到底是什么

    Javascript中的Prototype到底是什么

    Javascript也是面向对象的语言,但它是一种基于原型Prototype的语言,而不是基于类的语言.在Javascript中,类和对象看起来没有太多的区别. 什么是prototype: function定义的对象有一个prototype属性,prototype属性又指向了一个prototype对象,注意prototype属性与prototype对象是两个不同的东西,要注意区别.在prototype对象中又有一个constructor属性,这个constructor属性同样指向一个constr

  • JavaScript中String.prototype用法实例

    本文实例讲述了JavaScript中String.prototype用法.分享给大家供大家参考.具体如下: // 返回字符的长度,一个中文算2个 String.prototype.ChineseLength=function() { return this.replace(/[^\x00-\xff]/g,"**").length; } // 判断字符串是否以指定的字符串结束 String.prototype.EndsWith = function(str) { return this.

  • JS中prototype的用法实例分析

    本文实例讲述了JS中prototype的用法.分享给大家供大家参考.具体分析如下: JS中的phototype是JS中比较难理解的一个部分   本文基于下面几个知识点:   1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展.我们称B的原型为A.   2 javascript的方法可以分为三类: a 类方法 b 对象方法 c 原型方法 例子如下: function People(name

  • js中this的用法实例分析

    本文实例分析了js中this的用法.分享给大家供大家参考.具体分析如下: 实例1:第一种调用this的方法--以函数形式调用.它代表全局对象window 复制代码 代码如下: <script type="text/javascript"> function t(){  alert(this);//这里this表示window对象. } t(); </script> 实例2:第二种调用this的方法--以对象属性的形式调用.它代表该对象.实例中onclick为p元

  • javaScript中push函数用法实例分析

    本文实例讲述了javaScript中push函数用法.分享给大家供大家参考.具体分析如下: javaScript 中的 push 方法,将新元素添加到一个数组中,并返回数组的新长度值. arrayObj.push([item1   [item2   [.   .   .   [itemN   ]]]]) 参数 arrayObj,必选项.一个   Array   对象. item,   item2,.   .   .   itemN, 可选项.该   Array   的新元素. 说明 push 

  • JSP页面文件中base标记用法实例分析

    本文实例分析了JSP页面文件中base标记用法.分享给大家供大家参考,具体如下: 我们在用IDE工具生成JSP页面时通常都包含下面的两段代码, <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %

  • JS中apply()的应用实例分析

    本文实例讲述了JS中apply()的应用.分享给大家供大家参考,具体如下: 先从Math.max()函数说起,Math.max后面可以接收任意个参数,最后返回所有参数中的最大值. 比如: alert(Math.max(5,8));//8 alert(Math.max(5,7,3,1,9,2));//9 但是在很多情况下,我们需要找出数组中最大的元素. 比如: /* * 找出数组中最大的数 */ var arr = [1,4,9,6]; //alert(Math.max(arr));//NaN,这

  • JavaScript中filter的用法实例分析

    本文实例讲述了JavaScript中filter的用法.分享给大家供大家参考,具体如下: filter filter也是一个常用的操作,它用于把Array的某些元素过滤掉,然后返回剩下的元素. 和map()类似,Array的filter()也接收一个函数.和map()不同的是,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素. 例如,在一个Array中,删掉偶数,只保留奇数,可以这么写: var arr = [1, 2, 4, 5, 6

  • JS数组方法concat()用法实例分析

    JS数组方法concat()用法实例分析

    本文实例讲述了JS数组方法concat()用法.分享给大家供大家参考,具体如下: 数组方法concat() concat()可以基于当前数组中的所有项创建一个新数组.即这个方法会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组. 没有给concat方法传递参数的情况下,它只是复制当前数组并返回副本. 如果传递的是一或多个数组,则该方法会将这些数组中的每一项都添加到结果数组中 如果传递的值是不是数组,这些值会被简单的添加到数组的末尾 注意:该方法不会改变先后的数

  • JS数组方法join()用法实例分析

    JS数组方法join()用法实例分析

    本文实例讲述了JS数组方法join()用法.分享给大家供大家参考,具体如下: join()方法 定义和用法: join() 方法用于把数组中的所有元素放入一个字符串. 元素是通过指定的分隔符进行分隔的. 语法:arrayObject.join(separator) 参数:可选,指定要使用的分隔符. 注:不给join()方法传入任何值,或者给它传入undefined,则使用逗号作为分隔符. IE7及更早版本会错误的使用字符串"undefined"作为分隔符. 数组中的某一项是null或u

  • JS数组方法slice()用法实例分析

    JS数组方法slice()用法实例分析

    本文实例讲述了JS数组方法slice()用法.分享给大家供大家参考,具体如下: slice()方法 slice(),它能基于当前数组中的一个或多个创建一个新数组.可以接受一或两个参数,即要返回的起始和结束位置. 一个参数:slice()方法返回从该参数指定位置开始到当前数组末尾的所有项. 两个参数:该方法返回起始和结束位置之间的项(但不包括结束位置的项). slice不会影响原始数组. 结束位置小于起始位置,返回空数组. 可以接受负数,用数组长度加上该负数来确定相应位置. var arr = [

  • SeaJS中use函数用法实例分析

    本文实例讲述了SeaJS中use函数用法.分享给大家供大家参考,具体如下: 有了 define 等模块定义规范的实现,我们可以开发出很多模块.但光有一堆模块不管用,我们还得让它们能跑起来.在 SeaJS 里,要启动模块系统很简单: <script src="path/to/sea.js"></script> <script> seajs.use('./main'); </script> seajs.use 用来在页面中加载模块.通过 us

随机推荐