js继承 es6和es5

2020-04-09  本文已影响0人  事在人为s

es6 class是个语法糖,本质上是原型链

class Person {
    constructor(name) {
        this.name = name
    }
}
class Student extends Person {
    constructor(name, age) {
        super(name);
        this.age = age;
    }
}
let student = new Student('张三', 18);
console.log(student);

es6之前

/**
* 借助构造函数实现继承
*/
function Parent1 () {
  this.name = 'parent1';
}
Parent1.prototype.say = function () {

};
function Child1 () {
  Parent1.call(this);
  this.type = 'child1';
}
console.log(new Child1(), new Child1().say());
/**
* 借助原型链实现继承
*/
function Parent2 () {
  this.name = 'parent2';
  this.play = [1, 2, 3];
}
function Child2 () {
  this.type = 'child2';
}
Child2.prototype = new Parent2();

var s1 = new Child2();
var s2 = new Child2();
console.log(s1.play, s2.play);
s1.play.push(4);
/**
* 组合方式
*/
function Parent3 () {
  this.name = 'parent3';
  this.play = [1, 2, 3];
}
function Child3 () {
  Parent3.call(this);
  this.type = 'child3';
}
Child3.prototype = new Parent3();
var s3 = new Child3();
var s4 = new Child3();
s3.play.push(4);
console.log(s3.play, s4.play);
/**
* 组合继承的优化1
* @type {String}
*/
function Parent4 () {
  this.name = 'parent4';
  this.play = [1, 2, 3];
}
function Child4 () {
  Parent4.call(this);
  this.type = 'child4';
}
Child4.prototype = Parent4.prototype;
var s5 = new Child4();
var s6 = new Child4();
console.log(s5, s6);

console.log(s5 instanceof Child4, s5 instanceof Parent4);
console.log(s5.constructor);
/**
* 组合继承的优化2  Object.create
*/
function Parent5 () {
  this.name = 'parent5';
  this.play = [1, 2, 3];
}
function Child5 () {
  Parent5.call(this);
  this.type = 'child5';
}
Child5.prototype = Object.create(Parent5.prototype);
上一篇下一篇

猜你喜欢

热点阅读