资讯专栏INFORMATION COLUMN

JavaScript继承

zone / 802人阅读

摘要:通过方法或方法也可以,实质上是在未来将要新创建的实例的环境下调用构造函数。组合继承指的是将原型链继承和借用构造函数继承的技术组合到一块,从而发挥二者之长的一种继承模式。该模式通过借用构造函数继承属性,通过重新子类型继承方法。

原型链继承

</>复制代码

  1. function SuperType() {
  2. this.property = true;
  3. }
  4. // 在原型链上定义方法。
  5. SuperType.prototype.getSuperValue = function (){
  6. return this.property;
  7. }
  8. function SubType() {
  9. this.subproperty = false;
  10. }
  11. // 替换SubType原型,达到继承效果。
  12. SubType.prototype = new SuperType();
  13. // 开始写SubType的方法,注:SubType的方法必须写在替换SubType原型语句后
  14. SubType.prototype.getSubValue = function (){
  15. return this.subproperty;
  16. }
  17. var instance = new SubType();
  18. alert(instance.getSuperValue());

原型链继承的原理如期名,是利用创建父类(SuperType)的实例,并将该实例赋值给子类(SubType).prototype实现的,实质是重写子类的原型对象。

原型链继承特点:

引用类型值的原型属性会被所有实例共享。

在创建子类型的实例时,没办法再不影响所有对象实例的情况下向超类传递参数。

即实现所有属性方法共享,但无法做到属性、方法独享

借用构造函数继承

</>复制代码

  1. function SuperType() {
  2. this.colors = ["red","blue","green"];
  3. }
  4. function SubType() {
  5. //继承属性
  6. SuperType.call(this);
  7. }
  8. var instance1 = new SubType();
  9. instance1.colors.push("black");
  10. alert(instance1.colors); //red,blue,green,black
  11. var instance2 = new SubType();
  12. alert(instance2.colors); //red,blue,green

借用构造函数继承(constructor stealing),该继承思想很简单,即在子类型构造函数的内部调用超类型构造函数即可。通过call()方法(或apply()方法也可以),实质上是在(未来将要)新创建的SubType实例的环境下调用SuperType构造函数。

借用构造函数继承特点:

可以在子类型构造函数中向超类型构造函数传递参数。

方法都在构造函数中定义,无法实现函数复用。

超类型的原型中定义的方法对子类不可见。

即实现所有属性独享,但无法做到方法继承

组合继承

</>复制代码

  1. function SuperType(name) {
  2. this.name = name;
  3. this.colors = ["red","blue","green"];
  4. }
  5. SuperType.prototype.sayName = function () {
  6. alert(this.name);
  7. }
  8. function SubType(name,age) {
  9. //继承属性
  10. SuperType.call(this,name); //第二次调用SuperType
  11. this.age = age;
  12. }
  13. //继承方法
  14. SubType.prototype = new SuperType(); //第一次调用SuperType
  15. SubType.prototype.constructor = SubType;
  16. SubType.prototype.sayAge = function(){
  17. alert(this.age);
  18. }
  19. var instance1 = new SubType("Y",21);
  20. instance1.colors.push("black");
  21. alert(instance1.colors); //red,blue,green,black
  22. instance1.sayName(); //Y
  23. instance1.sayAge(); //21
  24. var instance2 = new SubType("Z",22);
  25. alert(instance2.colors); //red,blue,green
  26. instance2.sayName(); //Z
  27. instance2.sayAge(); //22

组合继承(combination inheritance)又叫伪经典继承,是JavaScript中最常用的继承模式。组合继承指的是将原型链继承和借用构造函数继承的技术组合到一块,从而发挥二者之长的一种继承模式。该模式通过借用构造函数继承属性,通过重新子类型prototype继承方法。

组合继承特点:

实现了所有方法共享,属性独享

instanceof()和isprototypeOf()能够识别基于组合继承创建的对象。

实现的时候调用了两次超类(父类),产生多余属性。

原型式继承

</>复制代码

  1. // 工具函数,实质是对传入的对象执行一次浅拷贝。
  2. function object(o) {
  3. function F() {}
  4. F.prototype = o;
  5. return new F();
  6. }
  7. var person = {
  8. name:"Y",
  9. friends:["S","C","V"],
  10. say:function () {
  11. alert(this.friends);
  12. }
  13. };
  14. var anotherPerson = object(person);
  15. anotherPerson.name = "G";
  16. anotherPerson.friends.push("R");
  17. var yetAnotherPerson = object(person);
  18. yetAnotherPerson.name = "L";
  19. yetAnotherPerson.friends.push("B");
  20. person.friends.push("my");
  21. anotherPerson.say(); //S,C,V,R,B,my
  22. alert(person.friends); //S,C,V,R,B,my

原型式继承是由道格拉斯·克罗克福德提出的,该模式要求你必须有一个对象可以作为另外一个对象的基础。该模式将一个对象传递给object()函数,然后再根据具体需求对得到的对象加以修改即可。

原型式继承特点:

以传入object的对象为原型,拷贝一个副本并反回。

做不到函数复用,导致效率低。

对象的引用类型所有实例共享(person的引用类型friends不仅属于person所有,而且也会被antherPerson和yetAnotherPerson共享)。

寄生式继承

</>复制代码

  1. function object(o) {
  2. function F() {}
  3. F.prototype = o;
  4. return new F();
  5. }
  6. function createAnother(original) {
  7. var clone = object(original);
  8. clone.sayHi = function (){
  9. alert(this.friends);
  10. };
  11. return clone;
  12. }
  13. var person = {
  14. name:"Y",
  15. friends:["S","C","V"]
  16. };
  17. var anotherPerson = createAnother(person);
  18. anotherPerson.friends.push("test");
  19. anotherPerson.sayHi();
  20. var anotherPerson2 = createAnother(person);
  21. anotherPerson2.sayHi();

寄生式继承(parasitic)同样是由克罗克福德提出并推广而之的。该模式创建一个仅用于封装继承过程的函数,该函数的内部以某种方式增强对象,最后再像真地式它做了所有工作一样返回对象。

寄生式继承特点:

做不到函数复用,导致效率低。

对象的引用类型所有实例共享

寄生组合式继承

</>复制代码

  1. function object(o) {
  2. function F() {}
  3. F.prototype = o;
  4. return new F();
  5. }
  6. // 将超类型的prototype浅拷贝一遍并赋值给子类型的prototype
  7. // (相当于利用超类型prototype重写子类型prototype以达到继承效果)
  8. function inheritPrototype(subType,superType) {
  9. var prototype = object(superType.prototype);
  10. prototype.constructor = subType;
  11. subType.prototype = prototype;
  12. }
  13. function SuperType(name) {
  14. this.name = name;
  15. this.colors = ["red","blue","green"];
  16. }
  17. SuperType.prototype.sayName = function () {
  18. alert(this.name);
  19. }
  20. function SubType(name,age) {
  21. //继承属性
  22. SuperType.call(this,name);
  23. this.age = age;
  24. }
  25. //继承方法
  26. inheritPrototype(SubType,SuperType);
  27. SubType.prototype.sayAge = function(){
  28. alert(this.age);
  29. }
  30. var instance1 = new SubType("Y",21);
  31. instance1.colors.push("black");
  32. alert(instance1.colors); //red,blue,green,black
  33. instance1.sayName(); //Y
  34. instance1.sayAge(); //21
  35. var instance2 = new SubType("Z",22);
  36. alert(instance2.colors); //red,blue,green
  37. instance2.sayName(); //Z
  38. instance2.sayAge(); //22

原理如图:

寄生组合式继承解决了组合继承最大的问题——无论什么情况下,都会调用两次超类型构造函数。该模式思路是:不必为了指定子类型的原型而调用超类型的构造函数,我们所需的无非就是超类型原型的副本而已。本质上,就是使用寄生式继承来继承超类型的原型,然后再将结果指定给子类型的原型。

寄生组合式继承特点:

实现了所有方法共享,属性独享

instanceof()和isprototypeOf()能够识别基于组合继承创建的对象。

参考自《JavaScript高级程序设计》

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/108997.html

相关文章

  • 彻底搞懂JavaScript中的继承

    摘要:这正是我们想要的太棒了毫不意外的,这种继承的方式被称为构造函数继承,在中是一种关键的实现的继承方法,相信你已经很好的掌握了。 你应该知道,JavaScript是一门基于原型链的语言,而我们今天的主题 -- 继承就和原型链这一概念息息相关。甚至可以说,所谓的原型链就是一条继承链。有些困惑了吗?接着看下去吧。 一、构造函数,原型属性与实例对象 要搞清楚如何在JavaScript中实现继承,...

    _ivan 评论0 收藏0
  • 讲清楚之 javascript 对象继承

    摘要:中的继承并不是明确规定的,而是通过模仿实现的。继承中的继承又称模拟类继承。将函数抽离到全局对象中,函数内部直接通过作用域链查找函数。这种范式编程是基于作用域链,与前面讲的继承是基于原型链的本质区别是属性查找方式的不同。 这一节梳理对象的继承。 我们主要使用继承来实现代码的抽象和代码的复用,在应用层实现功能的封装。 javascript 的对象继承方式真的是百花齐放,属性继承、原型继承、...

    Jonathan Shieber 评论0 收藏0
  • javascript继承 --- 多种继承方式解析(ES5)

    摘要:继承前言作为一门轻量级的脚本语言在和的横空出世之后将其推向的新的高度虽然中出现的新的生成对象的类语法格式但依然为的语法糖而我们依然有必要从的原生实现入手来了解它的继承实现方式给出了更加简洁的固定的类声明方式有兴趣的可以查看阮一峰的入门下面给 javascript继承 前言 javascript作为一门轻量级的脚本语言在ES6和node.js的横空出世之后将其推向的新的高度,虽然 ES6...

    yankeys 评论0 收藏0
  • 白话解释 Javascript 原型继承(prototype inheritance)

    摘要:我们有了构造函数之后,第二步开始使用它构造一个函数。来个例子这种方式很简单也很直接,你在构造函数的原型上定义方法,那么用该构造函数实例化出来的对象都可以通过原型继承链访问到定义在构造函数原型上的方法。 来源: 个人博客 白话解释 Javascript 原型继承(prototype inheritance) 什么是继承? 学过面向对象的同学们是否还记得,老师整天挂在嘴边的面向对象三大特...

    kid143 评论0 收藏0
  • javascript继承你了解多少?

    摘要:和构造函数前面提到,是个内置隐藏属性,虽然在可以通过访问,但是其设计本意是不可被读取和修改的,那么我们如何利用原型链来建立继承关系提供了关键字。到这儿,思路就清晰了,怎么让对象和对象的相连实现继承只需把的构造函数的连接到就行了。 什么是继承? 大多数人使用继承不外乎是为了获得这两点好处,代码的抽象和代码的复用。代码的抽象就不用说了,交通工具和汽车这类的例子数不胜数,在传统的OO语言中(...

    baishancloud 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<