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 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
JavaScript 异步方法队列链实现代码分析
Jun 05 Javascript
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
jquery 倒计时效果实现秒杀思路
Sep 11 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
详解JavaScript中this的指向问题
Jan 20 Javascript
关于ES6的六个小特性(二)
Feb 20 Javascript
webpack写jquery插件的环境配置
Dec 21 jQuery
Vue动态生成表格的行和列
Jul 18 Javascript
浅谈小程序globalData的那些事儿
Nov 01 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 26 Javascript
EXTJS7实现点击拖拉选择文本
Dec 17 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
Cakephp 执行主要流程
2010/03/24 PHP
PHP aes (ecb)解密后乱码问题
2015/06/22 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
javascript delete 使用示例代码
2010/03/29 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
js实现简单的左右两边固定广告效果实例
2015/04/10 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
Javascript 对cookie操作详解及实例
2016/12/29 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
vue项目添加多页面配置的步骤详解
2019/05/22 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
vue实现购物车的小练习
2020/12/21 Vue.js
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
Python处理字符串之isspace()方法的使用
2015/05/19 Python
Python存取XML的常见方法实例分析
2017/03/21 Python
python 读取.csv文件数据到数组(矩阵)的实例讲解
2018/06/14 Python
对pandas将dataframe中某列按照条件赋值的实例讲解
2018/11/29 Python
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
简单了解Django ORM常用字段类型及参数配置
2020/01/07 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
体育课课后反思
2014/04/24 职场文书
快餐公司创业计划书
2014/04/29 职场文书
中学生运动会口号
2014/06/07 职场文书
村安全生产责任书
2014/08/25 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
新闻稿怎么写
2015/07/18 职场文书