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相关推荐

  1. Javascript中的prototype

    Prototype理解 prototype(原型) 在JavaScript中,prototype对象是实现面向对象的一个重要机制. 每个函数就是一个对象(Function),函数对象都有一个子对象pr ...

  2. 了解JavaScript中的prototype (实例)

    JS中的phototype是JS中比较难理解的一个部分.javascript的方法可以分为三类:类方法,对象方法,原型方法. 例子: function People(name) {this.name= ...

  3. JavaScript中的prototype(Notes)

    首先,JavaScript中每个对象都有prototype属性,他是用来返回对象类型原型的引用的.我们使用prototype属性提供对象的类的一组基本功能.并且对象的新实例会"继承" ...

  4. JavaScript中Object.prototype.toString方法的原理

    在JavaScript中,想要判断某个对象值属于哪种内置类型,最靠谱的做法就是通过Object.prototype.toString方法. <一>, ECMAScript 3  1. 在E ...

  5. javascript中的prototype原型、_proto_属性、原型链

    prototype原型 JavaScript是面向对象的语言,那么继承自然是其重要特征之一.与标准面向对象语言不同,JavaScript继承主要通过prototype原型实现.每一个函数都具有prot ...

  6. JavaScript中es5继承(call、apply)和es6继承(super)

    欢迎加入qq群(IT-程序猿-技术交流群):757345416 今天我们来研究下JavaScript中的继承: es5: //构造器函数 function Person(name,age,sex){t ...

  7. 牢骚与javascript中的this

    最近在看关于拖延症的一本书<拖拉一点也无妨>,后面得出结论是自己写博客大部分处于两种状态,心情很好和心情很不好的时候.因为正常状态下感觉写博客吧,是件很麻烦的事情,不如去看看电影看看漫画啥 ...

  8. javascript里的prototype

    在javascript中,prototype是函数的一个固有属性,其他对象,比如字符串什么的,并没有这个属性. 这个属性做什么用呢? 1.用于该函数的所有实例进行共享 比如,共同的属性,共同的方法.类 ...

  9. JavaScript中的nodeName nodeType nodeValue区别

    在JavaScript中,存在有nodeName .nodeType. nodeValue这三个属性,今天我们来了解下JavaScript中的nodeName .nodeType .nodeValue ...

最新文章

  1. “贝叶斯网络之父”:不透明机器学习的局限性
  2. 蓝图跑酷游戏教学的项目文件
  3. WinAPI: midiInReset - 重置输入
  4. numpy a[...,:2]
  5. loj#2542 [PKUWC2018]随机游走 (概率期望、组合数学、子集和变换、Min-Max容斥)
  6. Kuma 1.0 GA发布,70多项新功能和改进
  7. maximum mean discrepancy
  8. undefined reference to Mat_VarCreate'
  9. 学校计算机教室安全预案,小学校园微机室安全事故应急疏散预案
  10. Sharepoint学习笔记 –架构系列—10 Sharepoint的服务器端对象模型(Server Object Model) 2.内容层次结构
  11. 奈飞文化手册_《奈飞文化手册》速阅提炼分享4
  12. python中标点符号大全_Python处理中文标点符号大集合
  13. 关于WideCharToMultiByte来解码UTF8
  14. shell 第一次练习
  15. Java的数据结构和算法
  16. 2021新版外卖CPS 外卖侠CPS小程序
  17. Burp Suite 扫描工具
  18. 北美电影票房Top10-2019年12月27日:《小妇人》表现亮眼
  19. Trying to access array offset on value of type int
  20. 周杰伦要出新专辑了?上 Instagram 看看

热门文章

  1. 位数问题(信息学奥赛一本通-T1313)
  2. 9 MM配置-主数据-维护物料管理的公司代码
  3. python纵向数据分析_python数据分析三个重要方法之:numpy和pandas
  4. python中怎么安装sklearn_如何安装Sklearn for Reinteract?
  5. MySQL:数据库导入
  6. OpenVINO 中的BFYX解释
  7. 机器学习时显卡频率莫明其妙的降低了?
  8. 不同维度的矩阵相乘的时间复杂度
  9. python 最小二乘法_最小二乘法及其python实现详解
  10. emacs python_Emacs 下使用 lsp-mode 对 Python 进行补全