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 类
Nov 07 Javascript
jquery 圆形旋转图片滚动切换效果
Jan 19 Javascript
Javascript 面向对象编程(coolshell)
Mar 18 Javascript
用JavaScript修改CSS属性的代码
May 06 Javascript
使用jquery组件qrcode生成二维码及应用指南
Feb 22 Javascript
JS更改select内option属性的方法
Oct 14 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
Jan 18 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 Javascript
Angular实现的简单定时器功能示例
Dec 28 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 Javascript
如何封装Vue Element的table表格组件
Feb 06 Vue.js
详解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实现下载限制速度示例分享
2014/02/13 PHP
Laravel 5框架学习之Laravel入门和新建项目
2015/04/07 PHP
PHP实现图片自动清理的方法
2015/07/08 PHP
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
PHP 等比例缩放图片详解及实例代码
2016/09/18 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
单独使用CKFinder选择图片的方法
2010/08/21 Javascript
jQuery移动和复制dom节点实用DOM操作案例
2012/12/17 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
2018/05/02 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
[01:02:48]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Liquid
2018/04/03 DOTA
python生成式的send()方法(详解)
2017/05/08 Python
对Python字符串中的换行符和制表符介绍
2018/05/03 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
python判断元素是否存在的实例方法
2020/09/24 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
html5的新增的标签和废除的标签简要概述
2013/02/20 HTML / CSS
高中生的学习总结自我鉴定
2013/10/26 职场文书
会计出纳员的自我评价
2014/01/15 职场文书
大学总结自我鉴定
2014/01/18 职场文书
学校清明节活动总结
2014/07/04 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
八项规定整改方案
2014/10/01 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
工程款申请报告
2015/05/15 职场文书
Django 实现jwt认证的示例
2021/04/30 Python
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫
Python软件包安装的三种常见方法
2022/07/07 Python