资讯专栏INFORMATION COLUMN

细节:js 对象继承的几种模式举例

Backache / 401人阅读

摘要:原型链继承借用构造函数伪造对象,经典继承无参数有参数组合继承伪经典继承无参数有参数寄生组合式继承引用类型最理想的范式或者可以把函数写成下面这样原型式继承用于共享引用类型的值,与寄生式类似传统版先定义函数,再继承版直接用,再继承省略了定义函数

原型链继承
function Person(){};

Person.prototype = {
    constructor: Person,
    name: "Oliver"
};
        
function People(){};

People.prototype = new Person();
People.prototype.constructor = People;
People.prototype.sayName = function(){
    return this.name;
};

var ins = new People();

console.log(ins.sayName());
借用构造函数(伪造对象,经典继承) 无参数
function SuperType(){
    this.color = ["red","yellow","white"];
}
function SubType(){
    SuperType.call(this);
}

var instance1 = new SubType();
var instance2 = new SubType();

instance1.color.pop();
console.log(instance1.color); //["red", "yellow"]
console.log(instance2.color); //["red", "yellow", "white"]
有参数
function SuperType(name){
    this.name = name;
    this.number = [21,32,14,1];
}
function SubType(name,age){
    SuperType.call(this,name);
    this.age = age;
}

var instance1 = new SubType("Oliver",18);
var instance2 = new SubType("Troy",24);

instance2.number.pop();

console.log(instance1.name + instance1.age + instance1.number); //Oliver1821,32,14,1
console.log(instance2.name + instance2.age + instance2.number); //Troy2421,32,14
组合继承(伪经典继承) 无参数
function SuperType(){
    this.color = ["red","yellow","white"];
}
SuperType.prototype.sayColor = function(){
    return this.color;
};

function SubType(){
    SuperType.call(this);
    this.number = 321;
}
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayNumber = function(){
    return this.number;
};

var instance1 = new SubType();
var instance2 = new SubType();

instance2.color.pop();
console.log(instance1.color + instance1.number); //red,yellow,white321
console.log(instance2.color + instance2.number); //red,yellow321
有参数
function SuperType(name){
    this.name = name;
    this.number = [32,1342,11,1];
}
SuperType.prototype.sayName = function(){
    return this.name;
};

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

var instance1 = new SubType("Oliver",18);
var instance2 = new SubType("Troy",24);

instance2.number.pop();
console.log(instance1.sayName() + instance1.sayAge() + instance1.number); //Oliver1832,1342,11,1
console.log(instance2.sayName() + instance2.sayAge() + instance2.number); //Troy2432,1342,11
寄生组合式继承(引用类型最理想的范式)
function inheritPrototype(subType,superType){
    var prototype = Object(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
}

function SuperType(name){
    this.name = name;
    this.number = [321,321,43];
}
SuperType.prototype.sayName = function(){
    return this.name;
};

function SubType(name,age){
    SuperType.call(this,name);
    this.age = age;
}
inheritPrototype(SubType,SuperType);
SubType.prototype.sayAge = function(){
    return this.age;
};

var instance1 = new SubType("Oliver",18);
var instance2 = new SubType("Troy",24);
instance2.number.pop();

console.log(instance1.sayName() + instance1.sayAge() + instance1.number); //Oliver18321,321,43
console.log(instance2.sayName() + instance2.sayAge() + instance2.number); //Troy24321,321

或者可以把inheritPrototype 函数写成下面这样:

function inheritPrototype(SubType,SuperType){
    SubType.prototype = new SuperType();
    SubType.prototype.constructor = SubType;
}
原型式继承(用于共享引用类型的值,与寄生式类似) 传统版(先定义object() 函数,再继承)
function object(o){
    function F(){};
    F.prototype = o;
    return new F();
}

var SuperType = {
    name: "Oliver",
    number: [321,321,4532,1]
};

var SubType1 = object(SuperType);
var SubType2 = object(SuperType);

SubType1.name = "Troy";
SubType1.number.pop();

SubType2.name = "Alice";
SubType2.number.pop();

console.log(SubType1.name + SubType2.name + SubType1.number + SubType2.number + SuperType.name + SuperType.number); //TroyAlice321,321321,321Oliver321,321
ECMAScript 5 版(直接用Object.create(),再继承)
var SuperType = {
    name: "Oliver",
    number: [321,321,4532,1]
};

var SubType1 = Object.create(SuperType); //省略了定义object()函数
var SubType2 = Object.create(SuperType);

SubType1.name = "Troy";
SubType1.number.pop();

SubType2.name = "Alice";
SubType2.number.pop();

console.log(SubType1.name + SubType2.name + SubType1.number + SubType2.number + SuperType.name + SuperType.number); //TroyAlice321,321321,321Oliver321,321
ECMAScript 5 简写版(定义Object.create()的第二个参数,再继承)
var SuperType = {
    name: "Oliver",
    number: [321,321,4532,1]
};

var SubType1 = Object.create(SuperType,{
    name: {
        value : "Troy"
    }
});
var SubType2 = Object.create(SuperType,{
    name: {
        value : "Alice"
    }
});

SubType1.number.pop();
SubType2.number.pop();

console.log(SubType1.name + SubType2.name + SubType1.number + SubType2.number + SuperType.name + SuperType.number); //TroyAlice321,321321,321Oliver321,321
寄生式继承(用于共享引用类型的值,与原型式类似)
function createAnother(original){
    var clone = Object(original);
    clone.sayHi = function(){
        return "Hi";
    };
    return clone;
}

var person = {
    name: "Oliver",
    number: [13,21,31,1]
};

var anotherPerson = createAnother(person);
anotherPerson.number.pop();

console.log(anotherPerson.sayHi() + anotherPerson.number); //Hi13,21,31
console.log(person.number); //13,21,31

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/86262.html

相关文章

  • 细节js 创建对象几种模式举例

    摘要:工厂模式不推荐应该把方法放在函数的外面,避免重复创建该方法定义的不是构建函数,因该使用方法创建实例,而不是方法不要忘记在函数的最后构造函数模式不推荐使用指代,函数无需明确应该把方法放在函数的外面,避免重复创建该方法原型模式不推荐函数中不对属 工厂模式(不推荐) var sayName = function(){ return this.name; }; function cr...

    laznrbfe 评论0 收藏0
  • 复习笔记(新手向) - JS对象声明几种方式

    摘要:二用操作符构造对象属性名属性值属性名属性值属性名属性值属性名属性值方法名方法名首先用创建一个空对象,然后用多条语句给对象添加属性方法。他的写法与三用函数声明的方式构造对象比较像,但是稍有不同。 -- 新手向知识,就不用ES6写法了。 一、字面量声明 var obj = { 属性名1 : 属性值, 属性名2 : 属性值, 属性名3 : 属性...

    davidac 评论0 收藏0
  • JS学习笔记(第6章)(实现继承几种方式)

    摘要:使用最多的继承模式是组合继承,这种模式使用原型链继承共享的属性和方法,而借用构造函数继承实例属性。原型式继承,可以在不必预先定义构造函数的情况下实现继承,其本质是执行给定对象的浅复制。 1、原型链实现继承 function SuperType() { this.property = true; } SuperType.prototype.getSuperValue = func...

    hiyayiji 评论0 收藏0
  • #yyds干货盘点# 前端基础知识面试集锦3

    摘要:当解释器寻找引用值时,会首先检索其在栈中的地址,取得地址后从堆中获得实体如何实现继承构造继承原型继承实例继承拷贝继承原型机制或和方法去实现较简单,建议使用构造函数与原型混合方式。它是基于的一个子集。 JavaScript介绍js的基本数据类型。Undefined、Null、Boolean、Number、Stri...

    番茄西红柿 评论0 收藏2637
  • 细节js 函数闭包内存泄露的解决办法举例

    摘要:这里存在内存泄露问题,油画后的代码如下这里这里这里这里这里这里 原始代码: function Cars(){ this.name = Benz; this.color = [white,black]; } Cars.prototype.sayColor = function(){ var outer = this; return function(){ ...

    Chaz 评论0 收藏0

发表评论

0条评论

Backache

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<