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 相关文章推荐
javascript学习笔记(八) js内置对象
Jun 19 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
Sep 26 Javascript
jQuery中toggleClass()方法用法实例
Jan 05 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 Javascript
jquery特效 点击展示与隐藏全文
Dec 09 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
Aug 03 Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 Javascript
记录vue项目中遇到的一点小问题
May 14 Javascript
了解javascript中变量及函数的提升
May 27 Javascript
Vue搭建后台系统需要注意的问题
Nov 08 Javascript
javaScript实现一个队列的方法
Jul 14 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
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
PHP7 windows支持
2021/03/09 PHP
Js动态创建div
2008/09/25 Javascript
javascript实现的网页局布刷新效果
2008/12/01 Javascript
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
js简单实现删除记录时的提示效果
2013/12/05 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
Vue 配合eiement动态路由,权限验证的方法
2018/09/26 Javascript
JS图片懒加载技术实现过程解析
2020/07/27 Javascript
JS运算符优先级与表达式示例详解
2020/09/04 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
python3实现字符串的全排列的方法(无重复字符)
2018/07/07 Python
python简单操作excle的方法
2018/09/12 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
Python使用Beautiful Soup爬取豆瓣音乐排行榜过程解析
2019/08/15 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
编码实现字符串转整型的函数
2012/06/02 面试题
Java语言程序设计测试题判断题部分
2013/01/06 面试题
集体备课反思
2014/02/12 职场文书
给领导的检讨书
2014/02/16 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
2015年环卫工作总结
2015/04/28 职场文书
九年级数学教学反思
2016/02/17 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书
创业计划书之宠物店
2019/09/19 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
Sql Server之数据类型详解
2022/02/28 SQL Server