关于JS中prototype的理解


Posted in Javascript onSeptember 07, 2015

每一个构造函数都有一个属性叫做原型(prototype)。这个属性非常有用:为一个特定类声明通用的变量或者函数。

prototype的定义

你不需要显式地声明一个prototype属性,因为在每一个构造函数中都有它的存在

本文基于下面几个知识点:

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>

以上内容是关于JS中prototype的理解,希望大家喜欢。

Javascript 相关文章推荐
向fckeditor编辑器插入指定代码的方法
May 25 Javascript
JavaScript实现多个重叠层点击切换效果的方法
Apr 24 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
Feb 22 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 Javascript
jQuery简单实现MD5加密的方法
Mar 03 Javascript
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
Apr 29 Javascript
vue 递归组件的简单使用示例
Jan 14 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 #Javascript
jquery实现简单的二级导航下拉菜单效果
Sep 07 #Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 #Javascript
js调用百度地图及调用百度地图的搜索功能
Sep 07 #Javascript
js实现可折叠展开的手风琴菜单效果
Sep 07 #Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 #Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 #Javascript
You might like
用PHP的ob_start() 控制您的浏览器cache
2009/08/03 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
php+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
js 禁用浏览器的后退功能的简单方法
2008/12/10 Javascript
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
javascript禁制后退键(Backspace)实例代码
2013/11/15 Javascript
javascript实现base64 md5 sha1 密码加密
2015/09/09 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
JavaScript实现Base64编码转换
2016/04/23 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
Layui数据表格 前后端json数据接收的方法
2019/09/19 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
python处理PHP数组文本文件实例
2014/09/18 Python
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
python实现中文分词FMM算法实例
2015/07/10 Python
在Python的Django框架中编写错误提示页面
2015/07/22 Python
Python如何获取系统iops示例代码
2016/09/06 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
利用python实现逐步回归
2020/02/24 Python
python 星号(*)的多种用途
2020/09/21 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
网游商务专员求职信
2013/10/15 职场文书
建筑公司文秘岗位职责
2013/11/29 职场文书
不打扫卫生检讨书
2014/02/12 职场文书
餐厅总厨求职信
2014/03/04 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
我的中国梦主题班会
2015/08/14 职场文书