JS实现继承 JavaScript

Winer 发布于2019-08-23 14:48 / 1183人阅读

摘要：实现继承定义一个父类定义一个动物类属性实例方法正在睡觉原型方法正在吃原型链继承核心将父类的实例作为子类的原型特点非常纯粹的继承关系，实例是子类的实例，也是父类的实例父类新增的原型方法属性，子类都能访问到简单，易于实现缺点要想为子类新增属性和

JS实现继承 JavaScript 定义一个父类：

// 定义一个动物类
function Animal (name) {
// 属性
this.name = name || ‘Animal’;
// 实例方法
this.sleep = function(){
console.log(this.name + ‘正在睡觉！’);
}
}
// 原型方法
Animal.prototype.eat = function(food) {
console.log(this.name + ‘正在吃：’ + food);
};

1.原型链继承

核心：将父类的实例作为子类的原型

function Cat(){
}
Cat.prototype = new Animal();
Cat.prototype.name = ‘cat’;

//　Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.eat(‘fish’));
console.log(cat.sleep());
console.log(cat instanceof Animal); //true
console.log(cat instanceof Cat); //true

特点：

非常纯粹的继承关系，实例是子类的实例，也是父类的实例

父类新增的原型方法、属性，子类都能访问到

简单，易于实现

缺点：

要想为子类新增属性和方法，必须要在new Animal()这样的语句之后执行（可以在cat构造函数中，为Cat实例增加实例属性）

无法实现多继承

来自原型对象的引用属性被所有实例共享

创建子类实例时，无法向父类构造函数传参

下面代码解释缺点3（注意是引用属性）：

function Super(){
    this.val = 1;
    this.arr = [1];
}
function Sub(){
    // ...
}
Sub.prototype = new Super();    // 核心
 
var sub1 = new Sub();
var sub2 = new Sub();
sub1.val = 2;
sub1.arr.push(2);
alert(sub1.val);    // 2
alert(sub2.val);    // 1
 
alert(sub1.arr);    // 1, 2
alert(sub2.arr);    // 1, 2

2.构造继承

核心：使用父类的构建函数来增强子类实例，等于复制父类的实例属性给子类（没用到原型），除了call方法，也可以用apply()

function Cat(name){
Animal.call(this);
this.name = name || ‘Tom’;
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true

特点：

解决了1中，子类实例共享父类引用属性的问题

创建子类实例时，可以向父类传递参数

可以实现多继承（call多个父类对象）

缺点：

实例并不是父类的实例，只是子类的实例

只能继承父类的实例属性和方法，不能继承原型属性和方法

无法实现函数复用，每个子类都有父类的实例函数的副本，影响性能

3.实例继承

核心：为父类实例添加新特性，作为子类实例返回

function Cat(name){
var instance = new Animal();
instance.name = name || ‘Tom’;
return instance;
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // false

特点：

不限制调用方式，不管是new 子类()还是子类()，返回的对象都具有相同的效果

缺点：

实例是父类的实例，不是子类的实例

不支持多继承

4. 拷贝继承

核心：使用for...in将父类实例中的方法赋给子类实例

function Cat(name){
var animal = new Animal();
for(var p in animal){
Cat.prototype[p] = animal[p];
}
Cat.prototype.name = name || ‘Tom’;
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true

特点：

支持多继承

缺点：

效率较低，内存占用高（因为要拷贝父类的属性）

无法获取父类不可枚举的方法（for in无法访问不可枚举的方法）

5.组合继承

核心：通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用

function Cat(name){
Animal.call(this);
this.name = name || ‘Tom’;
}
Cat.prototype = new Animal();

//组合继承需要修复构造函数的指向
Cat.prototype.constructor=Cat;
// Test Code 

var cat = new Cat(); 
console.log(cat.name); 
console.log(cat.sleep()); 
console.log(cat instanceof Animal); // true 
console.log(cat instanceof Cat); // true

特点：

弥补了方式2的缺陷，可以继承实例属性、方法，也可以继承原型属性、方法

既是子类的实例，也是父类的实例

不存在引用属性的共享问题

可传参

函数可复用

缺点：

调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）

6.寄生组合继承

核心：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点

function Cat(name){
Animal.call(this);
this.name = name || ‘Tom’;
}
(function(){
// 创建一个没有实例方法的类
var Super = function(){};
Super.prototype = Animal.prototype;
//将实例作为子类的原型
Cat.prototype = new Super();
//寄生组合继承需要修复构造函数的指向
Cat.prototype.constructor=Cat;
})(); 

// Test Code 

var cat = new Cat(); 
console.log(cat.name); 
console.log(cat.sleep()); 
console.log(cat instanceof Animal); // true 
console.log(cat instanceof Cat); //true

特点：

堪称完美

缺点:

实现较为复杂

补充：es6的class实现继承

class Animal {
    //构造函数
    constructor(props) {
      this.name = props.name || "未知";
    }

    eat() {
      alert(this.name + "在吃东西...");
    }
  }

  //class继承
  class Bird extends Animal {
    //构造函数
    constructor(props) {
      //调用实现父类的构造函数
      super(props);
      this.name = props.name || "未知";
    }

    fly() {
      alert(this.name + "在飞...");
    }
  }
  var myBird = new Bird({
    name: "鹦鹉"
  })
  myBird.eat()  // 鹦鹉在吃东西...
  myBird.fly()  // 鹦鹉在飞...

超融合服务器私有云 Javascript实现继承 javascript如何实现继承 javascript继承 python实现继承

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

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

面向对象的 JavaScript

摘要：是完全的面向对象语言，它们通过类的形式组织函数和变量，使之不能脱离对象存在。而在基于原型的面向对象方式中，对象则是依靠构造器利用原型构造出来的。 JavaScript 函数式脚本语言特性以及其看似随意的编写风格，导致长期以来人们对这一门语言的误解，即认为 JavaScript 不是一门面向对象的语言，或者只是部分具备一些面向对象的特征。本文将回归面向对象本意，从对语言感悟的角度阐述为什...

novo 2019-08-21 10:49 评论0 收藏0
JavaScript继承方式详解

摘要：可以通过构造函数和原型的方式模拟实现类的功能。原型式继承与类式继承类式继承是在子类型构造函数的内部调用超类型的构造函数。寄生式继承这种继承方式是把原型式工厂模式结合起来，目的是为了封装创建的过程。 js继承的概念 js里常用的如下两种继承方式：原型链继承（对象间的继承）类式继承（构造函数间的继承）由于js不像java那样是真正面向对象的语言，js是基于对象的，它没有类的概念。...

Yangyang 2019-08-21 10:23 评论0 收藏0
JavaScript面向对象编程-继承（四）

摘要：一些面向对象语言中支持多继承，在也能实现多继承，但是有一些局限，因为在中继承是依赖原型链实现的，只有一条原型链，所以理论上是不能继承多个父类的。从第一个参数起为被继承的对象获取参数长度缓存参数对象缓存当前对象遍历被继承对象中的属性一些面向对象语言中支持多继承，在JavaScript也能实现多继承，但是有一些局限，因为在JavaScript中继承是依赖原型prototype链实现的，只...

MartinHan 2019-08-26 12:20 评论0 收藏0
Javascript 设计模式读书笔记(三)——继承

摘要：的继承方式属于原型式继承，非常灵活。当使用关键字执行类的构造函数时，系统首先创建一个新对象，这个对象会继承自构造函数的原型对象新对象的原型就是构造函数的属性。也就是说，构造函数用来对生成的新对象进行一些处理，使这个新对象具有某些特定的属性。继承这个东西在Javascript中尤其复杂，我掌握得也不好，找工作面试的时候在这个问题上栽过跟头。Javascript的继承方式属于原型式继承，...

cangck_X 2019-08-21 12:16 评论0 收藏0
面向对象的JavaScript（如何一步步成为js高手）

摘要：虽然，也是面向疾苦的语言，但是，它和静态类型语言的面向接口编程不一而足。对象对他自己的行为负责，其他对象不关心它的内部实现。 ‘工欲善其事，必先利其器’，在深入学习JavaScript之前，我认为我们很有必要了解以下，JavaScript这门面向对象的动态语言到底是一门什么样的语言。 JavaScript vs 其他面向对象语言它没有使用像Java等传统的面向对象语言的类式继承，而...

peixn 2019-08-21 18:35 评论0 收藏0
JS专题之继承

摘要：构造函数所以，就有了畸形的继承方式原型链继承三原型链继承改变构造函数的原型对象继承了属性以上例子中，暴露出原型链继承的两个问题包含引用类型数据的原型属性，会被所有实例共享，基本数据类型则不会。前言众所周知，JavaScript 中，没有 JAVA 等主流语言类的概念，更没有父子类继承的概念，而是通过原型对象和原型链的方式实现继承。于是，我们这一篇讲一讲 JS 中的继承（委托）。 ...

rollback 2019-08-23 15:09 评论0 收藏0