es5创建对象与继承

创建对象7种方法

 

继承的六种实现方式

1.原型链继承：可以让子类共享父类的方法，其关键实现就是让一个原型对象指向另一个类型的实例

        function Parent(){
            this.colors = ['blue','green'];
        }
        Parent.prototype.addColor = function(c){
            this.colors.push(c);
        }
        function Child(){
        }
        Child.prototype = new Parent();

        const c = new Child();
        c.addColor('gray');

        const other = new Child();
        console.log(other.colors); //['blue', 'green', 'gray']

问题：父类中如果有引用类型的成员，所有子类都共享这些成员。(上面代码第15行)

 

2. 借用构造函数：在子类构造函数中调用父类的构造函数，并把父类函数的上下文指定为子类本身，以此解决引用类型成员共享问题。

        function Parent(){
            this.colors = ['blue','green'];
            this.addColor = function(c){
                this.colors.push(c);
            }
        }
        function Child(){
            Parent.call(this);
        }
        const c = new Child();
        c.addColor('gray');

        const other = new Child();
        console.log(other.colors); //['blue', 'green']

问题：同一个逻辑的方法（例如上面第3行的addColor），会在内存中被创建多次，浪费内存空间。

 

3.组合继承（原型链继承+构造函数继承），可解决两种继承的缺点，是es5时代最常用的继承实现方法，思路就是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承

        function Parent(){
            this.colors = ['blue','green'];
        }
        Parent.prototype.addColor = function(c){
            this.colors.push(c);
        }
        function Child(){
            Parent.call(this);
        }
        // 继承方法
        Child.prototype = new Parent()
        //上面整个原型对象都被覆盖了，而new Parent的实例是没有构造函数成员的
        Child.prototype.constructor = Parent
        const c = new Child();
        c.addColor('gray');

        const other = new Child();
        console.log(other.colors); //['blue', 'green']

 缺点： 需要调用两次构造函数

 

4. 原型式继承：借助原型可以基于已有的对象字面量创建新对象，同时还不必因此创建自定义类型。

        function obj(o){
            function F(){};
            F.prototype = o;
            return new F();
        }
        const person = {
            name: 'Jiang',
            friends: ['Shelby', 'Bob']
        }
        const zhangsan = obj(person); 

在es6中，直接使用Object.create()方法代替上面的obj函数。

缺点： 子类型会共享父类型的引用成员 

 

5. 寄生式继承: 在原型式继承的基础上，给新创建的对象增加了成员（属性或方法）

        function obj(o){
            const newO = Object.create(o);
            newO.say = function(){
                console.log(`my name is ${this.name}`);
            }
            return newO;
        }
        const person = {
            name: 'Jiang',
            friends: ['Shelby', 'Bob']
        }
        const zhangsan = obj(person); 
        zhangsan.say(); // my name is Jiang

缺点： 子类型会共享父类型的引用成员

 

6. 寄生组合式继承：不必为了指定子类型的原型而调用父类的构造函数，需要的无非就是父类原型的一个副本，在实现上使用寄生式继承来继承父类的原型，再将结果指定给子类型的原型

function Parent(name) {
  this.name = name
  this.colors = [‘red’, ‘blue’, ‘green’]
}
Parent.prototype.sayName = function () {
  console.log(this.name)
}
function Child(name, job) {
  // 继承属性
  Parent.call(this, name)
  this.job = job
}
// 继承
Child.prototype = Object.create(Parent.prototype)
// 修复constructor
Child.prototype.constructor = Child
var instance = new Child(‘Jiang’, ‘student’)
instance.sayName()

ES6新增了一个Object.setPrototypeOf，可以直接创建关联，而且不用手动添加constructor属性，使用该方法时，第15步-17步可简写为Object.setPrototypeOf(Child.prototype, Parent.prototype)