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 相关文章推荐
JQuery 学习笔记 选择器之三
Jul 23 Javascript
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
Nov 26 Javascript
XENON基于JSON变种
Jul 27 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
Nov 17 Javascript
js中eval详解
Mar 30 Javascript
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
js简单实现竖向tab选项卡的方法
May 04 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
Mar 06 Javascript
浅谈vuex之mutation和action的基本使用
Aug 29 Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 Javascript
解决Mac安装thrift因bison报错的问题
May 17 Javascript
js实现的在本地预览图片功能示例
Nov 09 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
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
php计算十二星座的函数代码
2012/08/21 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
php处理带有中文URL的方法
2016/07/11 PHP
PHP+Ajax 检测网络是否正常实例详解
2016/12/16 PHP
php获取linux命令结果的实例
2017/03/13 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
一款Jquery 分页插件的改造方法(服务器端分页)
2011/07/11 Javascript
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
浅谈angularJS中的事件
2016/07/12 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
2016/10/30 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
javascript计算对象长度的方法
2017/10/25 Javascript
Node.js中环境变量process.env的一些事详解
2017/10/26 Javascript
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
2018/09/30 Javascript
详解微信小程序中组件通讯
2018/10/30 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
[02:10]探秘浦东源深体育馆 DOTA2 Supermajor不见不散
2018/05/17 DOTA
python 堆和优先队列的使用详解
2019/03/05 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
python实现扫雷小游戏
2020/04/24 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
班级道德讲堂实施方案
2014/02/24 职场文书
大学教师师德师风演讲稿
2014/08/22 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
年度考核表个人总结
2015/03/06 职场文书
如何写观后感
2015/06/19 职场文书