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预览图片实现鼠标放上去显示实际大小
Jan 16 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
Oct 31 Javascript
AngularJS基础教程之简单介绍
Sep 27 Javascript
Javascript中神奇的this
Jan 20 Javascript
AngularJs ng-route路由详解及实例代码
Sep 14 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
javaScript嗅探执行神器-sniffer.js
Feb 14 Javascript
JS实现课堂随机点名和顺序点名
Mar 09 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 Javascript
微信小程序对接七牛云存储的方法
Jul 30 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
Oct 25 Javascript
mpvue跳转页面及注意事项
Aug 03 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上传图片、删除图片实现代码
2010/05/12 PHP
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
php上传文件并存储到mysql数据库的方法
2015/03/16 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
js右键菜单效果代码
2007/07/21 Javascript
js对象与打印对象分析比较
2013/04/23 Javascript
javascript判断非数字的简单例子
2013/07/18 Javascript
Jquery实现的tab效果可以指定默认显示第几页
2013/10/16 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
简介JavaScript中Math.cos()余弦方法的使用
2015/06/15 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
Vuex 使用 v-model 配合 state的方法
2018/11/13 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
2021/02/08 Javascript
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
python cv2截取不规则区域图片实例
2019/12/21 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
什么是Web Service?
2012/07/25 面试题
素质拓展感言
2014/01/29 职场文书
大学毕业生求职自荐信
2014/02/20 职场文书
六个一活动实施方案
2014/03/21 职场文书
超强台风观后感
2015/06/09 职场文书
详解CSS故障艺术
2021/05/25 HTML / CSS
总结几个非常实用的Python库
2021/06/26 Python