JavaScript首页投稿(暂停使用,暂停投稿)WEB前端程序开发

深入理解javascript中的继承机制 之 12种继承模式总结

2017-03-01  本文已影响136人  六尺帐篷

之前我们介绍了多种javascript中的继承方式,最后我们开始总结概括这些继承方式,先将javascript中的继承分类,根据不同的条件,可以分成不同的类别。
最常用的我们可以分为这两类:

或者我们也可以如下分类:

下面我们就来总结回顾一下javascript中的继承模式

原型链法

示例:

Child.prototype = new Parent();

分类:
使用了原型
基于构造器的继承模式

** 注意 **:

仅从原型继承

实例:

Child.prototype = Parent.prototype;

分类:
基于构造器模式
复制原型对象,没有原型链的关系,因为都共用一个原型对象
** 注意 **:

临时构造器

实例

function extend(Child,Parent) {
var F = function(){};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
Child.uber = Parent.prototype;
}

分类:
基于构造器模式
使用了原型链
** 注意 **:

原型属性拷贝

实例:

function extend2(Child,Parent) {
var p = Parent.prototype;
var c = Child.prototype;
for (var i in p) {
c[i] = p[i];
}
c.uber = p;
}

分类:
基于构造器模式
基于属性拷贝的模式
使用了原型链

** 注意 **:

所有属性拷贝(浅拷贝)

实例:

function extendCopy(p) {
var c = {};
for (var i in p) {
c[i] = p[i];
}
c.uber = p;
return c;
}

分类:
基于对象的模式
属性拷贝

** 注意 **:

深拷贝

实例:

function deepCopy(p, c) {
c = c || {};
for (var i in p) {
if (p.hasOwnProperty(i)) {
if (typeof p[i] === 'object') {
c[i] = Array.isArray(p[i]) ? [] : {};
deepCopy(p[i], c[i]);
} else {
c[i] = p[i];
}
}
}
return c;
}

分类:
基于对象的模式
属性拷贝

** 注意 **:

原型继承法

实例:

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

分类:
基于对象的模式
使用原型链
** 注意 **:

扩展与增强模式

实例:

function objectPlus(o, stuff) {
var n;
function F() {}
F.prototype = o;
n = new F();
n.uber = o;
for (var i in stuff) {
n[i] = stuff[i];
}
return n;
}

分类:
基于对象的工作模式
使用原型链
属性拷贝模式
** 注意 **

多重继承法

function multi() {
var n = {}, stuff,j = 0,
len = arguments.length;
for (j = 0; j<len; j++) {
stuff = arguments[j];
for (var i in stuff) {
n[i] = stuff[i];
}
}
return n;
}

分类:
基于对象的工作模式
属性拷贝模式
** 注意 **

寄生式继承

实例:

function parasite(victim) {
var that = object(victim);
that.more = 1;
return that;
}

分类:
基于对象的工作模式
使用原型链
** 注意 **

借用构造函数:

实例:

function Child() {
Parent.apply(this,
arguments);
}

分类:
基于构造函数的模式

** 注意 **:

构造器于属性拷贝

实例:

function Child() {
Parent.apply(this,arguments);
}
extend2(Child,Parent);

分类:
基于构造器模式
使用原型链
属性拷贝
** 注意 **

上一篇下一篇

猜你喜欢

热点阅读