源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

[JavaScript] JS 面向对象之继承---多种组合继承详解

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2018-12-25 04:41:27 | 显示全部楼层 |阅读模式
下面小编就为大家带来一篇JS 面向对象之继承---多种组合继承详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

这一次要讲 组合、原型式、寄生式、寄生组合式继承方式。

1. 组合继承:又叫伪经典继承,是指将原型链和借用构造函数技术组合在一块的一种继承方式。

下面来看一个例子:

function SuperType(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
  }
  SuperType.prototype.sayName = function() {
    alert(this.name);
  }
  function SubType(name, age) {
    SuperType.call(this, name);
    this.age = age;
  }

  //继承方法
  SubType.prototype = new SuperType();
  SubType.prototype.sayAge = function() {
    alert(this.age);
  }

  var instance1 = new SubType("Nicholas", 29);
  instance1.colors.push("black");
  alert(instance1.colors); //red,blue,green,black
  instance1.sayName(); //Nicholas
  instance1.sayAge(); //29

  var instance2 = new SubType("Greg", 27);
  alert(instance2.colors); //red,blue,green
  instance2.sayName(); //Greg
  instance2.sayAge(); //27

组合继承避免了原型链和借用构造函数的缺陷,融合它们的优点。

2. 原型式继承

可以在不必预先定义构造函数的情况下实现继承,其本质是执行对给定对象的浅复制。而复制得到的副本还可以得到进一步的改造。

function object(o) {
    function F(){};
    F.prototype = o;
    return new F;
  }

  var person = {
   name: "Nicholas",
   friends: ["Shelby", "Court", "Van"]
  };

  var antherPerson = object(person);
  antherPerson.name = "Greg";
  antherPerson.friends.push("Rob");

  var antherPerson = object(person);
  antherPerson.name = "Linda";
  antherPerson.friends.push("Barbie");

  alert(person.friends); //Shelby,Court,Van,Rob,Barbie

3. 寄生式继承

与原型式继承非常相似,也是基于某个对象或某些信息创建一个对象,然后增强对象,最后返回对象。为了解决组合继承模式由于多次调用超类型构造函数而导致的低效率问题,可以将这个模式与组合继承一起使用。

function object(o) {
    function F(){};
    F.prototype = o;
    return new F;
  }
  function createAnother(original) {
    var clone = object(original);
    clone.sayHi = function() {
      alert("Hi");
    };
    return clone;
  }

  var person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
  };

  var anotherPerson = createAnother(person);
  anotherPerson.sayHi();

4. 寄生组合式继承

集寄生式继承和组合继承的优点与一身,是实现基本类型继承的最有效方式。

//继承原型
  function extend(subType, superType) {
    function F(){};
    F.prototype = superType.prototype;

    var prototype = new F;
    prototype.constructor = subType;
    subType.prototype = prototype;
  }

  //超类方法
  function SuperType(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
  }
  SuperType.prototype.sayName = function() {
    return this.name;
  }

  //子类方法
  function SubType(name, age) {
    SuperType.call(this, name);
    this.age = age;
  }

  //继承超类的原型
  extend(SubType, SuperType);

  //子类方法
  SubType.prototype.sayAge = function() {
    return this.age;
  }

  var instance1 = new SubType("Shelby");
  var instance2 = new SubType("Court", 28);

  instance1.colors.push('black');

  alert(instance1.colors); //red,blue,green,black
  alert(instance2.colors); //red,blue,green

  alert(instance1 instanceof SubType); //true
  alert(instance1 instanceof SuperType); //true

这段例子的高效率体现在它只调用了一次SuperType构造函数,并且因此避免了在SubType.prototype上面创建不必要的多余的属性。与此同时,原型链还能保持不变。因此,还能正常使用instanceof 和 isPrototypeOf()。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。

以上这篇JS 面向对象之继承---多种组合继承详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

回复

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-9-5 01:23:00 | 显示全部楼层
还可以不错
回复 支持 反对

使用道具 举报

15

主题

2万

回帖

122

积分

注册会员

Rank: 2

积分
122
发表于 2022-10-13 18:51:54 | 显示全部楼层
hi哦回复iOS就看见
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-11-15 20:50:26 | 显示全部楼层
还不错啊
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

186

积分

注册会员

Rank: 2

积分
186
发表于 2023-2-21 22:35:53 | 显示全部楼层
很不错的玩意
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

67

积分

注册会员

Rank: 2

积分
67
发表于 2023-2-24 01:01:55 | 显示全部楼层
vcxvcxv
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

66

积分

注册会员

Rank: 2

积分
66
发表于 2023-6-23 23:53:10 | 显示全部楼层
有什么好的服务器
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-6-24 04:00:07 | 显示全部楼层
来看看!!!
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-8-20 09:03:21 | 显示全部楼层
女生看了弄丢了卡萨诺的卡洛斯
回复 支持 反对

使用道具 举报

3

主题

2万

回帖

156

积分

注册会员

Rank: 2

积分
156
发表于 2023-8-23 12:03:04 | 显示全部楼层
啦啦啦啦啦啦啦啦!
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-25 17:59 , Processed in 0.123248 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表