06月03, 2018

前端学习笔记(03) - 关于JS继承

JS只支持实现继承,而且其实现继承主要是依靠原型链来实现的。

1. 借用构造函数

function SuperType(name)
{
    this.name = name;
}
function SubType()
{
    SuperType.call(this, 'john');
    this.age = 18;
}
var instance = new SubType();

缺点:方法都在函数中定义,无法做到函数复用

2. 组合继承

function SuperType(name)
{
    this.name = name;
}
SuperType.prototype.sayName = function ()
{
    alert(this.name);
}
function SubType(name, age)
{
    SuperType.call(this, name);
    this.age = age;
}
SubType.portotype = new SuperType();
SubType.portotype.constructor = SubType;
SubType.portotype.sayAge = function ()
{
    alert(this.sayAge);
}

这种方式结合了原型链和构造函数的优点,这种方式比较常用,但是这种方式会调用两次超类型构造函数,不太完美。

3. 原型式继承

function object(o)
{
    function F = (){}
    F.prototype = o;
    return new F();
}

ES5新增了Object.create(),规范化了原型式继承。这个方法接收两个参数:一 个用作新对象原型的对象和(可选的)一个为新对象定义额外属性的对象。 缺点就是如果包含引用类型的值,是会共享的。

4. 寄生式继承

function object(o)
{
    function F = (){}
    F.prototype = o;
    return new F();
}
function createAnother(original)
{ 
    var clone = object(original); 
    clone.sayHi = function()
    { 
        alert("hi"); 

    }; 
    return clone; 
}

使用寄生式继承来为对象添加函数,会由于不能做到函数复用而降低效率;这一 点与构造函数模式类似。

5. 寄生组合式继承

function object(o)
{
    function F = (){}
    F.prototype = o;
    return new F();
}
function inheritPrototype(subType, superType)
{ 
    var prototype = object(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype; 
}

开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。

本文链接:http://www.laijianlou.top/post/front-03.html

-- EOF --

Comments