JavaScript中的继承(中)


续:JavaScript中的继承(上)

三、组合继承

  组合继承也叫伪经典继承,指的是将原型链和借用构造函数的技术组合使用,发挥二者的长处的一种技术;
  基本思想:使用原型链实现对原型属性和方法的继承,通过借用构造函数实现对实例属性的继承
  举例如下:
    function SuperType(name) {
        this.name = name;
        this.colors = ['red', 'blue'];
    }
    SuperType.prototype.sayName = function () {
        console.log(this.name);
    };
    function SubType(name, age) {
        /*继承name和colors属性,会保存一个副本*/
        SuperType.call(this, name);
        /*添加子类属性*/
        this.age = age;
    }
    /*继承父类原型上的方法*/
    SubType.prototype = new SuperType();
    /*给子类添加方法*/
    SubType.prototype.sayAge = function () {
        console.log(this.age);
    };
    /*测试*/
    var instance1 = new SubType('Bob', 25);
    var instance2 = new SubType('Alice', 34);

    instance1.colors.push('black');
    instance1.sayName();//Bob
    instance1.sayAge();//25
    console.log(instance1.colors);//["red", "blue", "black"]

    instance2.sayName();//Alice
    instance2.sayAge();//34
    console.log(instance2.colors);//["red", "blue"]

  通过以上代码可以看到:通过借用构造函数,使得SubType的两个实例分别拥有自己的属性(name,age,colors),通过原型链又使得他们共享了相同的方法(sayName和sayAge)

  组合继承避免了原型链和借用构造函数的缺点,同时又融合了两者的优点,已经成为JavaScript中最常用的继承模式


四、原型式继承

  基本思想:借助原型,基于已有的对象创建新对象,同时不必因此创建自定义类型
  代码实现如下:
    function object(o) {
        function F() {
        }

        F.prototype = o;
        return new F();
    }
    var person = {
        name: 'Bob',
        friends: ['Alice']
    };
    var p1 = object(person);
    var p2 = object(person);
    p1.friends.push('Jack');
    console.log(p1.name);//Bob
    console.log(p1.friends);//['Alice','Jack']
    console.log(p2.name);//Bob
    console.log(p2.friends);//['Alice','Jack']

  从以上代码可以看到,object函数内部临时创建了一个构造函数,而且将传入的对象作为其原型对象,最后返回这个临时类型的一个新实例
注意: 从以上p1,p2的测试也可以看到,传入对象的属性始终是共享的,这和原型模式的情况一样

  ECMAScript5通过新增Object.create()方法规范了原型式继承:该方法接受两个参数,第一个是用作新对象的原型的对象,第二个是是为新对象定义额外属性的对象(可选)。

示例代码如下:
   var person = {
        name: 'Bob',
        friends: ['Alice']
    };
    var person1 = Object.create(person, {
        name: {value: 'Greg'}
    });
    console.log(person1.name);//Greg
    console.log(person1.friends);//["Alice"]

注意: 第二个参数的格式(如代码中所示)

猜你喜欢

转载自blog.csdn.net/u013910340/article/details/70664923
今日推荐