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静态的url如何传递
May 03 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
js禁止小键盘输入数字功能代码
Aug 01 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
May 24 Javascript
jquery如何实现锚点链接之间的平滑滚动
Dec 02 Javascript
Javascript 实现复制(Copy)动作方法大全
Jun 20 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
基于jQuery实现滚动切换效果
Dec 02 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
js实现自动图片轮播代码
Mar 22 Javascript
js自定义弹框插件的封装
Aug 24 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 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
PHP实时显示输出
2008/10/02 PHP
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
一个比较不错的PHP日历类分享
2014/11/18 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
2016/01/04 Javascript
Javascript 6里的4个新语法
2016/08/25 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
2017/01/23 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
2018/11/02 Javascript
微信小程序实现简单评论功能
2018/11/28 Javascript
vue实现form表单与table表格的数据关联功能示例
2019/01/29 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
Vue 如何使用props、emit实现自定义双向绑定的实现
2020/06/05 Javascript
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
在Python中使用Neo4j数据库的教程
2015/04/16 Python
Python标准库之collections包的使用教程
2017/04/27 Python
python+matplotlib演示电偶极子实例代码
2018/01/12 Python
Python实现可自定义大小的截屏功能
2018/01/20 Python
python实现二叉查找树实例代码
2018/02/08 Python
Python切片工具pillow用法示例
2018/03/30 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
python list转置和前后反转的例子
2019/08/26 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
英国时尚女装购物网站:Missguided
2018/08/23 全球购物
电大毕业自我鉴定
2014/02/03 职场文书
森林病虫害防治方案
2014/06/02 职场文书
生物工程专业求职信
2014/09/03 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
销售业务员岗位职责
2015/02/13 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript
Ruby处理CSV数据方法详解
2022/04/18 Ruby