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 相关文章推荐
Jquery 常用方法经典总结
Jan 28 Javascript
最短的javascript:地址栏载入脚本代码
Oct 13 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
Apr 02 Javascript
基于jQuery实现收缩展开功能
Mar 18 Javascript
window.open打开窗口被拦截的快速解决方法
Aug 04 Javascript
jQuery+ajax的资源回收处理机制分析
Jan 07 Javascript
JS实现根据密码长度显示安全条功能
Mar 08 Javascript
AngularJS 教程及实例代码
Oct 23 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
May 14 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
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
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
php设计模式 Proxy (代理模式)
2011/06/26 PHP
php递归json类实例
2014/12/02 PHP
CI框架表单验证实例详解
2016/11/21 PHP
php web环境和命令行环境下查找php.ini的位置
2019/07/17 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
JS常见问题整理(持续更新)
2013/08/06 Javascript
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
JS实现复制功能
2017/03/01 Javascript
详细讲解vue2+vuex+axios
2017/05/27 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
vue页面跳转实现页面缓存操作
2020/07/22 Javascript
[01:00:04]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第二局
2016/02/26 DOTA
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
Python获取央视节目单的实现代码
2015/07/25 Python
Python实现批量压缩图片
2018/01/25 Python
Windows 7下Python Web环境搭建图文教程
2018/03/20 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
python SVM 线性分类模型的实现
2019/07/19 Python
Python流程控制 while循环实现解析
2019/09/02 Python
线程安全及Python中的GIL原理分析
2019/10/29 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
ASP.NET中的身份验证有那些
2012/07/13 面试题
医学专业毕业生个人求职信
2013/12/25 职场文书
数学国培研修感言
2014/02/13 职场文书
物理教学随笔感言
2014/02/22 职场文书
《月光启蒙》教学反思
2014/03/01 职场文书
煤矿安全演讲稿
2014/05/09 职场文书
教师个人成长总结
2015/02/11 职场文书