JavaScript原型链和继承如何实现

本文小编为大家详细介绍“JavaScript原型链和继承如何实现”，内容详细，步骤清晰，细节处理妥当，希望这篇“JavaScript原型链和继承如何实现”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。原型链例子(要点写在注释里,可以把代码复制到浏览器里测试,下同)刚才我们访问x,y和z，分别通过原型链去查找，我们可以知道：当我们访问对象的某属性时，而该对象上没有相应属性时，那么它会通过原型链向上查找，一直找到null还没有话，就会返回undefined。基于原型的继承prototype属性与原型我们再来看看Foo.prototype是什么样的结构,当我们用函数声明去创建一个空函数的时候，那么这个函数就有个prototype属性，并且它默认有两个属性，constructor和__proto__,constructor属性会指向它本身Foo,__proto__是在chrome中暴露的(不是一个标准属性,知道就行)，那么Foo.prototype的原型会指向Object.prototype。因此Object.prototype上的一些方法toString,valueOf才会被每个一般的对象所使用。总结一下：我们这里有个Foo函数，这个函数有个prototype的对象属性，它的作用就是当使用new Foo()去构造实例的时候，这个构造器的prototype属性会用作new出来的这些对象的原型。所以我们要搞清楚，prototype和原型是两回事，prototype是函数对象上的预设属性，原型通常是构造器上的prototype属性。实现一个class继承另外一个class
结合图我们来倒过来分析一下上面代码：我们先通过new Student创建了一个Student的实例yun，yun的原型指向构造器的prototype属性(这里就是Student.prototype), Student.prototype上有hi方法和learn方法，Student.prototype是通过Object.create(Person.prototype)构造的，所以这里的Student.prototype是空对象，并且这个对象的原型指向Person.prototype,接着我们在Person.prototype上也设置了LEGS_NUM,ARMS_NUM属性以及hi,walk方法。然后我们直接定义了一个Person函数，Person.prototype就是一个预置的对象，它本身也会有它的原型，它的原型就是Object.prototype，也正是因为这样，我们随便一个对象才会有hasOwnProperty,valueOf,toString这样些公共的函数，这些函数都是从Object.prototype上来的。这样子就实现了基于原型链的继承。 那我们调用hi，walk,learn方法的时候发生了什么呢？比如我们调用hi方法的时候，我们首先看这个对象yun上有没有hi方法，但是在这个实例中没有所以会向上查找，查找到yun的原型也就是Student.protoype上有这hi方法，所以最终调用的是Student.prototype.hi，调用其他方法也是类似的。改变prototype我们知道JavaScript中的prototype原型不像Java中的class，Java中的class一旦写好就很难动态的去改变了，但是JavaScript中的原型实际上也是普通的对象，那就意味着在程序运行的阶段，我们也可以动态的给prototype添加或删除些属性。在上述代码的基础上，我们已经有yun这个实例了，我们接着来进行实验：所以说当动态修改prototype的时候，是会影响所有已创建或新创建的实例的，但是修改整个prototype赋值为新的对象的话，对已创建的实例是不会影响的，但是会影响后续的实例。实现继承的方式实现继承有多种方式，下面我们还是以Person和Student来分析functionPerson(){}functionStudent(){}Student.prototype=Person.prototype;//我们可不可用这种方式呢？这种方法是错误的:因为子类Student有自己的一些方法//，如果通过这样子赋值，改变Student的同时也改变了Person。Student.prototype=newPerson();//这种方式是可以 香港云主机实现的，但是调用构造函数有时候也是有问题的，比如要传进Person一个name和age//,这里的Student是个类，还没实例化，这时候有些奇怪了，传什么都不是。Student.prototype=Object.create(Person.prototype);//相对来说这中方式是比较理想的，这里我们创建了一个空的对象//，并且对象的原型指向Person.prototype,这样我们既保证了继承了Person.prototype上的方法，并且Student.prototype又有自己空的对象。//但是Object.create是ES5以后才有的
读到这里，这篇“JavaScript原型链和继承如何实现”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注开发云行业资讯频道。

相关推荐: 嵌入地图的多对多流动数据可视化方式Maptrix有什么用

嵌入地图的多对多流动数据可视化方式Maptrix有什么用，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。如何在地理位置中可视化流动信息是一个目前广泛研究的问题，尤其是多对多的流动信息…