什么是prototype

prototype属性是函数对象的子对象。函数是一个对象，它们对应的类就是function，每个函数对象都具有一个子对象prototype。

prototype包含特定类型的所有实例共享的属性和方法。对普通函数来说这个属性没什么用，只有在构造函数创建实例的时候该属性有用。当通过new来生成一个类的对象时，prototype对象的属性就会成为实例化对象的属性。

总之，Javascript中对象的prototype属性的解释是：返回对象类型原型的引用。

注意：

A.prototype = new B();

理解prototype不应把它和继承混淆。A的prototype为B的一个实例，可以理解A将B中的方法和属性全部克隆了一遍。A能使用B的方法和属性。这里强调的是克隆而不是继承。可以出现这种情况：A的prototype是B的实例，同时B的prototype也是A的实例。

prototype的作用

1.当用new创建一个对象时，prototype对象的属性将自动赋给所创建的对象

<script>//定义一个只有一个属性的类function HelloClass(){this.name="javakc";}//使用函数的prototype属性给类定义新属性HelloClass.prototype.show=function(){alert(this.name);}var obj=new HelloClass(); //创建类HelloClass的一个实例//调用通过prototype原型对象定义的showName方法obj.show();</script>

创建一个类，如果把show这个方法绑定到this上，那么每次创建实例的时候都会新建一个show方法出来，这是没有必要的，所以我们把该类实例共享的这类属性给放在prototype对象中，所有实例是共用一个原型的。这样既保证了每个实例都有show这个方法，又不必每次创建实例的时候都新建这个方法。

2、利用prototype实现伪继承

<script language="javascript">function HelloClass(){//构造方法}function HelloSubClass(){//构造方法}HelloSubClass.prototype=HelloClass.prototype;HelloSubClass.prototype.Propertys="name";HelloSubClass.prototype.subMethods=function(){//方法实现代码alert("in Methods");}var obj=new HelloSubClass();obj.subMethods();</script>

在以上的代码中，首先是HelloSubClass具有了和HelloClass一样的prototype，如果不考虑构造方法，则两个类是等价的。随后，又通过prototype给HelloSubClass赋予了额外的属性和方法。

所以HelloSubClass是在HelloClass的基础上增加了新的属性和方法，从而实现了类的伪继承。（此处注意我们前面所说的不要将继承和克隆混淆的概念）

如果extendClass中本身包含有一个与baseClass的方法同名的方法会怎么样？

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怎么办？

extendClass.prototype = new baseClass();var instance = new extendClass();var baseinstance = new baseClass();//用baseinstance代替instance调用showMsg方法。显示baseClass::showMsg
baseinstance.showMsg.call(instance);

详解prototype相关推荐

详解prototype、__proto__和constructor
之前对prototype.__proto__和constructor理解的不够透彻,今天就好好梳理和总结一下. 本文大纲: 1.prototype prototype的英文意思:原型:样本:标准,模范 ...
prototype详解
Function的prototype 原型链 static详解此前我有看过网上很多的关于该知识点的详解,很多文章都非常难懂,且篇幅较长,可能是以学习研究为目的.这篇文章结合了理论与实践,希望各位大佬 ...
Vue中 Vue.prototype 详解及使用——作用：避免和已被定义的数据、方法、计算属性产生冲突
Vue中 Vue.prototype 详解及使用--作用:避免和已被定义的数据.方法.计算属性产生冲突 **应用场景:**在很多组件里用到数据/实用工具,但是不想污染全局作用域.这种情况下,可以通过在 ...
getinstance方法详解_二、设计模式总览及工厂模式详解
二.架构师内功心法之设计模式 2.架构师内功心法之设计模式 2.1.课程目标 1.通过对本章内容的学习,了解设计模式的由来. 2.介绍设计模式能帮我们解决哪些问题. 3.剖析工厂模式的历史由来及应用场 ...
JavaScript继承详解（四）
文章截图 - 更好的排版在本章中,我们将分析Douglas Crockford关于JavaScript继承的一个实现 - Classical Inheritance in JavaScript. C ...
ES5和ES6数组遍历方法详解
ES5和ES6数组遍历方法详解在ES5中常用的10种数组遍历方法: 1.原始的for循环语句 2.Array.prototype.forEach数组对象内置方法 3.Array.prototype. ...
（转）面向对象的 JavaScript 编程：dojo.declare 详解
>>>>>http://www.ibm.com/developerworks/cn/<<<<< JavaScript 早在发明初期时,仅用来 ...
c2064 项不会计算为接受0个参数的函数_【JS必知必会】高阶函数详解与实战
本文涵盖前言高级函数概念函数作为参数的高阶函数 map filter reduce sort详解与实战函数作为返回值的高阶函数 isType函数与add求和函数如何自己创建高阶函数前言一 ...
php中继承中的概念,JavaScript_JavaScript中的继承方式详解，js继承的概念 js里常用的如下 - phpStudy...
JavaScript中的继承方式详解 js继承的概念 js里常用的如下两种继承方式: 原型链继承(对象间的继承) 类式继承(构造函数间的继承) 由于js不像java那样是真正面向对象的语言,js是基于 ...

详解prototype