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 相关文章推荐
通过隐藏option实现select的联动效果
Nov 10 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 Javascript
Bootstrap登陆注册页面开发教程
Jul 12 Javascript
微信小程序 共用变量值的实现
Jul 12 Javascript
详解Node全局变量global模块
Sep 28 Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 Javascript
Vue 仿QQ左滑删除组件功能
Mar 12 Javascript
Layui 解决表格异步调用后台分页的问题
Oct 26 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
Apr 07 Javascript
原生js+canvas实现贪吃蛇效果
Aug 02 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截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
Firefox div高度自适应
2009/04/28 Javascript
js 如何实现对数据库的增删改查
2012/11/23 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
javascript避免数字计算精度误差的方法详解
2014/03/05 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
2015/03/23 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
React倒计时功能实现代码——解耦通用
2020/09/18 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
2021/01/20 Vue.js
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
中国旅游网站:同程旅游
2016/09/11 全球购物
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
优秀的教师个人的中文求职信
2013/09/21 职场文书
《童趣》教学反思
2014/02/19 职场文书
幼儿园毕业典礼主持词
2014/03/21 职场文书
毕业自我鉴定书
2014/03/24 职场文书
营销学习心得体会
2014/09/12 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
党员批评与自我批评
2014/10/15 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书