javascript学习小结之prototype


Posted in Javascript onDecember 03, 2015

JS中的prototype是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方法,本来调用的是obj1的func方法,但是,传入obj后,改变了上下文对象,就通过obj对象来调用ojb1的方法了

好了,下面一个一个问题解决:

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的对象方法

最后,下面这个代码如果理解清晰,那么这篇文章说的就已经理解了:

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

以上就是关于javascript中prototype的深入学习,之后还有相关文章进行更新,希望大家继续关注。

Javascript 相关文章推荐
javascript检测对象中是否存在某个属性判断方法小结
May 19 Javascript
微信WeixinJSBridge API使用实例
May 25 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 Javascript
jQuery Validation PlugIn的使用方法详解
Dec 18 Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 Javascript
jQuery基于扩展实现的倒计时效果
May 14 Javascript
JS仿Base.js实现的继承示例
Apr 07 Javascript
微信小程序 共用变量值的实现
Jul 12 Javascript
详解Vue SPA项目优化小记
Jul 03 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
ES10 特性的完整指南小结
Mar 04 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 Javascript
简单实现JS对dom操作封装
Dec 02 #Javascript
jQuery实现获取绑定自定义事件元素的方法
Dec 02 #Javascript
JS折半插入排序算法实例
Dec 02 #Javascript
如何动态加载外部Javascript文件
Dec 02 #Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 #Javascript
JavaScript如何禁止Backspace键
Dec 02 #Javascript
js文本框输入内容智能提示效果
Dec 02 #Javascript
You might like
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
php将access数据库转换到mysql数据库的方法
2014/12/24 PHP
php中异常处理方法小结
2015/01/09 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
北京奥运官方网站幻灯切换效果flash版打包下载
2008/01/30 Javascript
javascript 操作文件 实现方法小结
2009/07/02 Javascript
这段js代码得节约你多少时间
2011/12/20 Javascript
判断window.onload是否多次使用的方法
2014/09/21 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
开启Javascript中apply、call、bind的用法之旅模式
2015/10/28 Javascript
js实现文字垂直滚动和鼠标悬停效果
2015/12/31 Javascript
JS控制伪元素的方法汇总
2016/04/06 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
2016/12/02 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
JavaScript布尔运算符原理使用解析
2020/05/06 Javascript
python检测是文件还是目录的方法
2015/07/03 Python
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
python cv2截取不规则区域图片实例
2019/12/21 Python
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
Woolworth官网:澳洲第一大超市
2017/06/25 全球购物
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
项目合作意向书模板
2014/07/29 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
2014年学校团委工作总结
2014/12/20 职场文书
2015大学迎新晚会主持词
2015/07/16 职场文书
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android