JS中的phototype详解


Posted in Javascript onFebruary 04, 2017

1 原型法设计模式

在.Net中可以使用clone()来实现原型法

原型法的主要思想是,现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展。我们称B的原型为A。

2 javascript的方法可以分为三类:

a 类方法

b 对象方法

c 原型方法

例子:

functionPeople(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=newPeople("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 相关文章推荐
JScript中的&quot;this&quot;关键字使用方式补充材料
Mar 08 Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
jQuery中:reset选择器用法实例
Jan 04 Javascript
js简单抽奖代码
Jan 16 Javascript
JS实现状态栏跑马灯文字效果代码
Oct 24 Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
Mar 27 Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 Javascript
原生javascript AJAX 三级联动的实现代码
May 04 Javascript
在JavaScript中实现链式调用的实现
Dec 24 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 Javascript
详解JavaScript RegExp对象
Feb 04 #Javascript
JS查找字符串中出现最多的字符及个数统计
Feb 04 #Javascript
JavaScript获取中英文混合字符串长度的方法示例
Feb 04 #Javascript
纯js模仿windows系统日历
Feb 04 #Javascript
canvas的神奇用法
Feb 03 #Javascript
Jquery实现跨域异步上传文件总结
Feb 03 #Javascript
js 递归和定时器的实例解析
Feb 03 #Javascript
You might like
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
实用函数7
2007/11/08 PHP
php将会员数据导入到ucenter的代码
2010/07/18 PHP
PHP导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
一个PHP并发访问实例代码
2012/09/06 PHP
PHP合并静态文件详解
2014/11/14 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
在JavaScript中处理数组之reverse()方法的使用
2015/06/09 Javascript
多种jQuery绑定事件的实现方式
2016/06/13 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
jQuery在header中设置请求信息的方法
2017/03/06 Javascript
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
通过jquery的ajax请求本地的json文件方法
2018/08/08 jQuery
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
vue+php实现的微博留言功能示例
2019/03/16 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
nuxt.js写项目时增加错误提示页面操作
2020/11/05 Javascript
Python中的yield浅析
2014/06/16 Python
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
购买美国制造的相框和画框架:Picture Frames
2018/08/14 全球购物
英国女性时尚品牌:Apricot
2018/12/04 全球购物
行政主管职责范本
2014/03/07 职场文书
项目投资建议书
2014/05/16 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
师德师风剖析材料
2014/09/30 职场文书
2019广播稿怎么写
2019/04/17 职场文书
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis