开发者社区> 儒清> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

js继承的六种方式

简介: 一、原型继承 function Father() { this.names = ['tom', 'kevin']; } Father.
+关注继续查看

一、原型继承

    function Father() {
        this.names = ['tom', 'kevin'];
    }
    Father.prototype.getName = function () {
        console.log(this.names);
    }

    function Child() {
        
    }
    Child.prototype = new Father();
    
    var child1 = new Child();
    child1.names.push('boaz');  // ['tom', 'kevin','boaz']
    child1.getName();
    
    var child2 = new Child();
    child2.getName(); // ['tom', 'kevin','boaz']

原型继承的缺点:

  1. 父类的引用类型属性会被所有子类实例共享,任何一个子类实例修改了父类的引用类型属性,其他子类实例都会受到影响
  2. 创建子类实例的时候,不能向父类传参

二、借用构造函数继承

function Father(name) {
        this.name = name;
        this.say = function () {
            console.log('hello');
        }
    }

    function Child(name) {
        this.name = name;
        Father.call(this,name);
    }

    var p1 = new Child('Tom');
    console.log('p1', p1);
    p1.say();
    var p2 = new Child('Kevin');
    console.log('p2', p2);
    p2.say();

优点:

  1. 避免了引用类型属性被所有实例共享
  2. 可以向父类传参

缺点:

  1. 方法必须定义在构造函数中
  2. 每创建一个实例都会创建一遍方法

三、组合继承(原型继承和借用构造函数继承的组合)

function Father(name, age) {
    this.name = name;
    this.age = age;
    console.log(this);
}
Father.prototype.say = function() {
    console.log('hello');
}

function Child(name,age) {
    Father.call(this,name,age);
}
Child.prototype = new Father();

var child = new Child('Tom', 22);
console.log(child);  

常用的继承方式唯一的缺点是,父类的构造函数会被调用两次

四、寄生式继承

function createObj(o) {
    var clone = object.create(o);
    clone.sayName = function () {
        console.log('hello');
    }
    return clone;
}

就是创建一个封装的函数来增强原有对象的属性,跟借用构造函数一样,每个实例都会创建一遍方法

五、寄生组合式继承

// 红宝书上面的方式
function object(o) {
    var F = function() {};
    F.prototype = o;
    return new F();
}
function inhert(subType,superType) {
    var prototype = object(superType.prototype);
// 构造器重定向,如果没有通过实例找回构造函数的需求的话,可以不做构造器的重定向。但加上更严谨
    prototype.constructor = subType;
    subType.prototype = prototype;
}

function Super(name) {
    this.name = name;
}
Super.prototype.sayName = function() {
    console.log(this.name);
}

function Sub(name, age) {
    Super.call(this, name);
    this.age = age;
}

inhert(Sub, Super);

var sub = new Sub('Tom', 22);
sub.sayName();

另外一种更容易理解的方式

// 原型+借用构造函数+寄生
function Person() {
    console.log(22);
    this.class = '人类';
}

// 原型继承模式
Person.prototype.say = function() {
    console.log(this.name);
}

/**
 * 寄生 Man.prototype.__proto__ === Person.prototype;
 * Man的父亲的父亲 === Person的父亲
 */
 Man.prototype = Object.create(Person.prototype);
 Man.prototype.constructor = Man;


function Man(name, age) {
    this.name = name;
    this.age = age;
    // 借用构造函数模式
    Person.call(this);
}

var man = new Man('张三丰', 100);
console.log(man);

这是es5最好的继承方式,集合了所有继承方式的优点于一身。

六、es6的继承方式

class Father{
    constructor(name) {
        this.name = name;
    }
    sayName() {
        console.log(this.name);
    }
}

class Child extends Father{
    constructor(name, age) {
        super(name);
        this.age = age;
    }
}

var child = new Child('Tom',22);
child.sayName();

总结:
三种简单的继承方式

  1. 原型式继承
  2. 借用构造函数继承
  3. 寄生式继承

两种复杂的继承方式

  1. 组合式继承: 1+2的组合
  2. 寄生组合式继承: 1+2+3的组合

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JavaScript实现继承的六种方式
JavaScript实现继承的六种方式
22 0
JS中的继承(上)
JS中的继承(上) 学过java或者c#之类语言的同学,应该会对js的继承感到很困惑--不要问我怎么知道的,js的继承主要是基于原型(prototype)的,对js的原型感兴趣的同学,可以了解一下我之前写的JS中的原型对象 相信很多同学也跟我一样,刚开始接触js的面向对象编程的时候,都抱着一种排斥...
766 0
第201天:js---实现继承的5种方式
一、构造函数方式 1 //构造函数 2 function People(){ 3 this.race = '汉族'; 4 } 5 People.prototype={ 6 eat:function(){ 7 console.
949 0
JS原型继承
JS的面向对象写法 function worker(name, age){ this.name = name; this.age = age; this.
657 0
JS原型继承和类式继承
类式继承(构造函数) JS中其实是没有类的概念的,所谓的类也是模拟出来的。特别是当我们是用new 关键字的时候,就使得“类”的概念就越像其他语言中的类了。类式继承是在函数对象内调用父类的构造函数,使得自身获得父类的方法和属性。
879 0
js 继承
1、将继承部分封装成函数 function extend(Child,Parent){ var F = function(){}; F.prototype = Parent.
639 0
+关注
儒清
热衷web前端技术研究、热爱分享、热爱运动、热爱生活。
88
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载