JS中prototype的用法实例分析


Posted in Javascript onMarch 19, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
js控制表单不能输入空格的小例子
Nov 20 Javascript
jQuery 获取兄弟元素的几种不错方法
May 23 Javascript
详解AngularJS中的作用域
Jun 17 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 Javascript
JS限制条件补全问题实例分析
Dec 16 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
使用Angular缓存父页面数据的方法
Jan 03 Javascript
js+html5实现手机九宫格密码解锁功能
Jul 30 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
Aug 10 Javascript
iView-admin 动态路由问题的解决方法
Oct 03 Javascript
js中null与空字符串&quot;&quot;的区别讲解
Jan 17 Javascript
vue基础之模板和过滤器用法实例分析
Mar 12 Javascript
JS获取Table中td值的方法
Mar 19 #Javascript
JavaScript使用yield模拟多线程的方法
Mar 19 #Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
Mar 19 #Javascript
JavaScript数组随机排列实现随机洗牌功能
Mar 19 #Javascript
JavaScript生成随机字符串的方法
Mar 19 #Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
Mar 19 #Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 #Javascript
You might like
生成静态页面的php函数,php爱好者站推荐
2007/03/19 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
php中用unset销毁变量并释放内存
2020/05/10 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
JavaScript 调试器简介
2009/02/21 Javascript
extjs两个tbar问题探讨
2013/08/08 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
浅析javascript中的Event事件
2016/12/09 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
关于vue.js组件数据流的问题
2017/07/26 Javascript
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
JS实现可视化音频效果的实例代码
2020/01/16 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
Python3.4学习笔记之列表、数组操作示例
2019/03/01 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
介绍一下OSI七层模型
2012/07/03 面试题
新闻专业应届生求职信
2013/10/31 职场文书
采购主管岗位职责
2014/02/01 职场文书
出纳员岗位职责
2014/03/13 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
品质保证书格式
2015/02/28 职场文书
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL