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 设计模式学习 Singleton
Jul 27 Javascript
编写Js代码要注意的几条规则
Sep 10 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
Feb 26 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
Feb 25 Javascript
利用JavaScript判断浏览器类型及版本
Aug 23 Javascript
Jquery表单验证失败后不提交的解决方法
Oct 18 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
Jul 13 Javascript
JS原型继承四步曲及原型继承图一览
Nov 28 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
javascript实现图片轮换动作方法
Aug 07 Javascript
夯基础之手撕javascript继承详解
Nov 09 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 has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
JS、DOM和JQuery之间的关系示例分析
2014/04/09 Javascript
js四舍五入数学函数round使用实例
2014/05/09 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
JS回调函数的应用简单实例
2014/09/17 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
2017/05/14 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
2021/01/27 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
2018/01/11 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
Python 字符串定义
2009/09/25 Python
Python实现读取及写入csv文件的方法示例
2018/01/12 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
python实现简单的单变量线性回归方法
2018/11/08 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
python中线程和进程有何区别
2020/06/17 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
浅谈matplotlib默认字体设置探索
2021/02/03 Python
推荐一些比较有用的css3新属性
2014/11/11 HTML / CSS
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
什么是静态路由?什么是动态路由?各自的特点是什么?
2015/09/16 面试题
有兼职工作经历的简历自我评价
2014/03/07 职场文书
三年级评语大全
2014/04/23 职场文书
优秀党员自我评价范文
2014/09/15 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
python实现批量提取指定文件夹下同类型文件
2021/04/05 Python
JavaScript实现班级抽签小程序
2021/05/19 Javascript