JS中prototype的用法实例分析


Posted in Javascript onMarch 19, 2015

本文实例讲述了JS中prototype的用法。分享给大家供大家参考。具体分析如下:

JS中的phototype是JS中比较难理解的一个部分
 
本文基于下面几个知识点:
 
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>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jQuery Selector选择器小结
May 06 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 Javascript
实用jquery操作表单元素的简单代码
Jul 04 Javascript
Vue.js父与子组件之间传参示例
Feb 28 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
记一次webapck4 配置文件无效的解决历程
Sep 19 Javascript
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
Mar 13 Javascript
JS实现4位随机验证码
Oct 19 Javascript
vue 图片裁剪上传组件的实现
Nov 12 Javascript
JS获取Table中td值的方法
Mar 19 #Javascript
JavaScript使用yield模拟多线程的方法
Mar 19 #Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
Mar 19 #Javascript
JavaScript数组随机排列实现随机洗牌功能
Mar 19 #Javascript
JavaScript生成随机字符串的方法
Mar 19 #Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
Mar 19 #Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 #Javascript
You might like
php is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
php四种基础算法代码实例
2013/10/29 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
php防止网站被攻击的应急代码
2015/10/21 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
js 获取Listbox选择的值的代码
2010/04/15 Javascript
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
Jquery中getJSON在asp.net中的使用说明
2011/03/10 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
详解如何理解vue的key属性
2019/04/14 Javascript
微信小程序实现卡片层叠滑动效果
2019/06/21 Javascript
vue 翻页组件vue-flip-page效果
2020/02/05 Javascript
利用H5api实现时钟的绘制(javascript)
2020/09/13 Javascript
python连接数据库的方法
2017/10/19 Python
PyQt5响应回车事件的方法
2019/06/25 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
Python Pandas 对列/行进行选择,增加,删除操作
2020/05/17 Python
Python新手学习装饰器
2020/06/04 Python
编写python代码实现简单抽奖器
2020/10/20 Python
python Cartopy的基础使用详解
2020/11/01 Python
解释i节点在文件系统中的作用
2013/11/26 面试题
偷看我的初中毕业鉴定
2014/01/29 职场文书
人事专员的职责
2014/02/26 职场文书
新品发布会主持词
2014/04/02 职场文书
应急管理培训方案
2014/06/12 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
拾金不昧表扬信怎么写
2015/05/04 职场文书
2015年暑期见闻
2015/07/14 职场文书
python spilt()分隔字符串的实现示例
2021/05/21 Python