了解下JavaScript中的prototype
JS中的phototype是JS中比较难理解的一个部分。javascript的方法可以分为三类:类方法,对象方法,原型方法。
例子:
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();
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(); 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(); instance = new extendClass();instance.showMsg();//显示extendClass::showMsg
实验证明:函数运行时会先去本体的函数中去找,如果找到则运行,找不到则去prototype中寻找函数。或者可以理解为prototype不会克隆同名函数。
那么又会有一个新的问题:如果我想使用extendClass的一个实例instance调用baseClass的对象方法showMsg怎么办?
答案是可以使用call:
extendClass.prototype = new baseClass(); 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(); instance = new extendClass();instance.showMsg(); //显示extendClass::showMsg instance.baseShowMsg(); //显示baseClass::baseShowMsg instance.showMsg(); //显示extendClass::showMsgbaseClass.showMsg.call(instance);//显示baseClass::showMsg staticvar baseinstance = new baseClass(); baseinstance.showMsg.call(instance);//显示baseClass::showMsg</script>
原文 简明现代魔法 了解下JavaScript中的prototype
了解下JavaScript中的prototype相关推荐
- Javascript中的prototype
Prototype理解 prototype(原型) 在JavaScript中,prototype对象是实现面向对象的一个重要机制. 每个函数就是一个对象(Function),函数对象都有一个子对象pr ...
- 了解JavaScript中的prototype (实例)
JS中的phototype是JS中比较难理解的一个部分.javascript的方法可以分为三类:类方法,对象方法,原型方法. 例子: function People(name) {this.name= ...
- JavaScript中的prototype(Notes)
首先,JavaScript中每个对象都有prototype属性,他是用来返回对象类型原型的引用的.我们使用prototype属性提供对象的类的一组基本功能.并且对象的新实例会"继承" ...
- JavaScript中Object.prototype.toString方法的原理
在JavaScript中,想要判断某个对象值属于哪种内置类型,最靠谱的做法就是通过Object.prototype.toString方法. <一>, ECMAScript 3 1. 在E ...
- javascript中的prototype原型、_proto_属性、原型链
prototype原型 JavaScript是面向对象的语言,那么继承自然是其重要特征之一.与标准面向对象语言不同,JavaScript继承主要通过prototype原型实现.每一个函数都具有prot ...
- JavaScript中es5继承(call、apply)和es6继承(super)
欢迎加入qq群(IT-程序猿-技术交流群):757345416 今天我们来研究下JavaScript中的继承: es5: //构造器函数 function Person(name,age,sex){t ...
- 牢骚与javascript中的this
最近在看关于拖延症的一本书<拖拉一点也无妨>,后面得出结论是自己写博客大部分处于两种状态,心情很好和心情很不好的时候.因为正常状态下感觉写博客吧,是件很麻烦的事情,不如去看看电影看看漫画啥 ...
- javascript里的prototype
在javascript中,prototype是函数的一个固有属性,其他对象,比如字符串什么的,并没有这个属性. 这个属性做什么用呢? 1.用于该函数的所有实例进行共享 比如,共同的属性,共同的方法.类 ...
- JavaScript中的nodeName nodeType nodeValue区别
在JavaScript中,存在有nodeName .nodeType. nodeValue这三个属性,今天我们来了解下JavaScript中的nodeName .nodeType .nodeValue ...
最新文章
- “贝叶斯网络之父”:不透明机器学习的局限性
- 蓝图跑酷游戏教学的项目文件
- WinAPI: midiInReset - 重置输入
- numpy a[...,:2]
- loj#2542 [PKUWC2018]随机游走 (概率期望、组合数学、子集和变换、Min-Max容斥)
- Kuma 1.0 GA发布,70多项新功能和改进
- maximum mean discrepancy
- undefined reference to Mat_VarCreate'
- 学校计算机教室安全预案,小学校园微机室安全事故应急疏散预案
- Sharepoint学习笔记 –架构系列—10 Sharepoint的服务器端对象模型(Server Object Model) 2.内容层次结构
- 奈飞文化手册_《奈飞文化手册》速阅提炼分享4
- python中标点符号大全_Python处理中文标点符号大集合
- 关于WideCharToMultiByte来解码UTF8
- shell 第一次练习
- Java的数据结构和算法
- 2021新版外卖CPS 外卖侠CPS小程序
- Burp Suite 扫描工具
- 北美电影票房Top10-2019年12月27日:《小妇人》表现亮眼
- Trying to access array offset on value of type int
- 周杰伦要出新专辑了?上 Instagram 看看
热门文章
- 位数问题(信息学奥赛一本通-T1313)
- 9 MM配置-主数据-维护物料管理的公司代码
- python纵向数据分析_python数据分析三个重要方法之:numpy和pandas
- python中怎么安装sklearn_如何安装Sklearn for Reinteract?
- MySQL:数据库导入
- OpenVINO 中的BFYX解释
- 机器学习时显卡频率莫明其妙的降低了?
- 不同维度的矩阵相乘的时间复杂度
- python 最小二乘法_最小二乘法及其python实现详解
- emacs python_Emacs 下使用 lsp-mode 对 Python 进行补全