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实现随机返回数组的一个元素
Aug 13 Javascript
javascript html 静态页面传参数
Apr 10 Javascript
超越Jquery_01_isPlainObject分析与重构
Oct 20 Javascript
jQuery实现鼠标划过添加和删除class的方法
Jun 26 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
Vue3.0数据响应式原理详解
Oct 09 Javascript
Vue引入Stylus知识点总结
Jan 16 Javascript
详细分析vue表单数据的绑定
Jul 20 Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 Javascript
关于Vue Router的10条高级技巧总结
May 06 Vue.js
详解vue中v-for的key唯一性
May 15 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
PHP安装攻略:常见问题解答(三)
2006/10/09 PHP
PHP 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
PHP 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装最快的解决办法
2010/08/01 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
javascript 树控件 比较好用
2009/06/11 Javascript
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
JQuery里选择超链接的实现代码
2011/05/22 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
AngularJS 所有版本下载地址
2016/09/14 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
浅谈js中的bind
2019/03/18 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
Python中使用asyncio 封装文件读写
2016/09/11 Python
python实现在IDLE中输入多行的方法
2018/04/19 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
canvas绘制圆角头像的实现方法
2019/01/17 HTML / CSS
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
国际政治个人自荐信范文
2013/11/26 职场文书
部队领导证婚词
2014/01/12 职场文书
学校介绍信范文
2014/01/14 职场文书
可贵的沉默教学反思
2014/02/06 职场文书
法人代表身份证明书及授权委托书
2014/09/16 职场文书
2014年党小组工作总结
2014/12/20 职场文书
党员转正介绍人意见
2015/06/03 职场文书
读书笔记格式
2015/07/02 职场文书
员工担保书范本
2015/09/22 职场文书
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android