js 继承

作者: ci0n | 来源:发表于2017-07-23 16:38 被阅读9次

4种继承方式

  1. 原型式继承
    1. 给原型对象添加属性
    2. 原型替换
    3. 子类的原型对象替换为父类的原型对象
  2. 原型链继承
  3. 借用构造函数继承(经典式继承)
  4. 组合继承

1 原型式继承

给原型对象添加属性

  • 只会继承原型对象中的属性
  • 严格意义上不算是继承
function Person (name){
    this.name = name;
}
Person.prototype.eat = function(){
    console.log('eat');
}
var p1 = new Person('p1');
p1.eat();   // eat

原型替换

  • 会丢失原来的原型对象上所有的成员
  • 记得修正constructor的指向
function Person(name) {
    this.name = name;
}
Person.prototype = {
    constructor: Person,    // 别忘记这个了!
    eat: function(){
        console.log('eat');
    }
};
var p1 = new Person('p1');
p1.eat();   // eat

子类的原型对象替换为父类的原型对象

  • 会丢失超类的实例属性
  • 注意constructor的指向
function Animal () {
    this.name = 'Animal';
}
Animal.prototype.info = 'des Animal';

function Person () {
    this. name = 'Person';
}
Person.prototype = Animal.prototype;
Person.prototype.constructor = Person;

2 原型链继承

子类的原型方法替换为父类的实例

  • 继承了父类的实例成员和原型对象成员
  • 父类的实例成员会出现内存共享问题,因为是子类的原型对象,是公有成员
  • 创建子类的实例时不能向父类传递参数
function Animal(){
    this.name = 'Animal';
}
Animal.prototype.info = 'des Animal';

function Person(age){
    this.age = age;
}
Person.prototype = new Animal();
Person.prototype.constructor = Person;

var p1 = new Person(18);
console.log(p1.name);   // Animal
console.log(p1.info);   // des Animal
console.log(p1.age);    // 18

原型链继承缺陷示例代码:

function Animal(name){
    this.name = name;
    this.friends = ['zs', 'ls'];
}
Animal.prototype.info = 'des Animal';

function Person(age){
    this.age = age;
}
Person.prototype = new Animal();    // 无法传递参数
Person.prototype.constructor = Person;

var p1 = new Person(18);
p1.friends.push('xm');
p1.__proto__.name = 'ww';

var p2 = new Person(22);
console.log(p2.friends);    // zs ls xm
console.log(p2.name);   // ww

3 借用构造函数继承(经典式继承)

借用apply和call方法实现继承

  • 无法使用父类的原型
  • 实例方法不可以重用
// 父类
function Animal (name) {
    this.name = name;
    this.logName = function () {
        console.log(this.name);
    }
}

// 子类
function Person (name){
    Animal.call(this, name);
}

var p1 = new Person('p1');
console.log(p1);    // Person {name: "p1", logName: function}

4 组合式继承

借用构造函数继承 + 原型式继承

  • 借用构造函数继承解决实例成员的继承
  • 原型式继承解决原型成员继承
// 父类
function Animal (name) {
    this.name = name;
    this.logName = function () {
        console.log(this.name);
    }
}
Animal.prototype = {
    constructor: Animal,
    logDes: function () {
        console.log('des');
    }
};

// 子类
function Person (name){
    Animal.call(this, name);
}

Person.prototype = Animal.prototype;
Person.prototype.constructor = Person;

var p1 = new Person('p1');
console.log(p1);

相关文章

  • Js的继承

    js的继承 @(js)[继承, js, 前端] 组合继承是原性链继承和构造函数继承的合体,它汲取了二者各自的有点,...

  • JS继承

    JS中的继承 许多OO语言都支持两种继承方式:接口继承和实现继承; 因为JS中没有类和接口的概念 , 所以JS不支...

  • #js继承

    js继承的概念 js里常用的如下两种继承方式: 原型链继承(对象间的继承)类式继承(构造函数间的继承) 类式继承是...

  • js继承遇到的小问题

    这两天在看js继承方面,它不像OC那种传统的类继承。js继承方式还是挺多的。比如:原型继承、原型冒充、复制继承 原...

  • JS中继承的实现

    JS中继承的实现 #prototype (js原型(prototype)实现继承) 全局的Function对象没有...

  • js继承

    js继承js 继承-简书 原型链实现集继承 上面的代码实现原型链继承最重要的son.prototype=new f...

  • JavaScript 10

    js继承的概念 1.通过原型链方式实现继承(对象间的继承) 2.类式继承(构造函数间的继承) 由于js不像Java...

  • JS继承的实现的几种方式

    前言 JS作为面向对象的弱类型语言,继承也是非常强大的特性之一,那么如何在JS实现继承呢? JS继承的实现方式 既...

  • 2019-03-25 继承

    js中通过原型来实现继承 组合继承:原型继承+借用构造函数继承

  • 继承方式(6种)1.7

    JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一。那么如何在JS中实现继承呢?让我们拭目以待。 JS继承...

网友评论

      本文标题:js 继承

      本文链接:https://www.haomeiwen.com/subject/cfemkxtx.html