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实现的一个include函数
Jul 21 Javascript
JavaScript 学习笔记(十五)
Jan 28 Javascript
在Ubuntu上安装最新版本的Node.js
Jul 14 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
Vue中的v-cloak使用解读
Mar 27 Javascript
vue中引用阿里字体图标的方法
Feb 10 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 Javascript
在Create React App中启用Sass和Less的方法示例
Jan 16 Javascript
vue通信方式EventBus的实现代码详解
Jun 10 Javascript
原生JS 实现的input输入时表格过滤操作示例
Aug 03 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 Javascript
Vue文本模糊匹配功能如何实现
Jul 30 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新手上路(五)
2006/10/09 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
php通过各种函数判断0和空
2020/07/04 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
同步异步动态引入js文件的几种方法总结
2016/09/23 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
基于angular实现模拟微信小程序swiper组件
2017/06/11 Javascript
vue-cli webpack 引入swiper的操作方法
2018/09/15 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
微信小程序组件传值图示过程详解
2019/07/31 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
跟老齐学Python之模块的加载
2014/10/24 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
Python自动化开发学习之三级菜单制作
2017/07/14 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
Linux常见面试题
2016/10/04 面试题
总裁秘书岗位职责
2013/12/04 职场文书
小学班主任培训方案
2014/06/04 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
2014年外联部工作总结
2014/11/17 职场文书
护士个人总结范文
2015/02/13 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书
解决tk mapper 通用mapper的bug问题
2021/06/16 Java/Android
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers