1. 原型链继承 (缺点:子类继承父类的引用类型的属性值会在各个实例中共享,创建子类实例时无法向父类构造函数传递参数)

// 定义父类构造函数
function SuperClass(father, mother){
this.father = father;
this.mother = mother;
this.brothers = ['jack', 'mike'];
}
// 给父类中添加方法
SuperClass.prototype.getFather = function(){
return this.father;
} // 定义子类构造函数
function SubClass(name, age){
this.name = name;
this.age = age;
}
// 继承父类
SubClass.prototype = new SuperClass('perter','nancy'); // 添加新方法
SubClass.prototype.getName = function(){
return this.name;
};
// 重写父类中的方法
SubClass.prototype.getFather = function(){
return null;
} // 实例化子类
var obj = new SubClass('leon', 30);

2. 借用构造函数继承(优点:子类继承的数据不会共享,可以在实例化子类时对父类进行传参;缺点:方法需要在构造函数中定义,以及重写)

// 定义父类构造函数
function SuperClass(father, mother){
this.father = father;
this.mother = mother;
this.brothers = ['jack', 'mike'];
this.getFather = function(){ // 需要子类继承的方法一定得在构造函数中定义
return this.father;
}
} // 定义子类构造函数, 并调用父构造函数实现继承
function SubClass(name, age,father, mother){
SuperClass.call(this, father, mother);
this.name = name;
this.age = age;
    this.getFather = function(){  // 只能在构造函数中重写父类中的方法
return null;
}
}
// 添加新方法
SubClass.prototype.getName = function(){
return this.name;
}; // 实例化子类
var obj = new SubClass('leon', 30, 'peter', 'nancy');

3. 组合继承 (融合原型链继承与借用构造函数继承)

// 定义父类构造函数
function SuperClass(father, mother){
this.father = father;
this.mother = mother;
this.brothers = ['jack', 'mike'];
}
// 添加父类方法
SuperClass.prototype.getFather = function(){
return this.father;
}; // 定义子类构造函数, 并调用父构造函数实现属性继承
function SubClass(name, age,father, mother){
SuperClass.call(this, father, mother);
this.name = name;
this.age = age;
} // 通过实例化父类作为子类原型对象,实现方法继承
SubClass.prototype = new SuperClass();
SubClass.prototype.constructor = SubClass; // 添加新方法
SubClass.prototype.getName = function(){
return this.name;
};
// 重写父类中的方法
SubClass.prototype.getFather = function(){
return null;
}; // 实例化子类
var obj = new SubClass('leon', 30, 'peter', 'nancy');

4. 原型式继承 (基于一个给定的对象,创建一个相似的对象, 相当于es5中的Object.create() 方法)

// 实现继承的函数
function object(o){
function F(){}
F.prototype = o;
return new F();
} // 定义基础对象
var baseObj = {
name: 'john',
age: 20,
getName: function(){
return this.name;
}
} // 创建新对象
var newObj = object( baseObj);
newObj.name = 'leon';
newObj.getName();

5. 寄生式继承 (封装原型式继承,并为新创建对象添加新的属性和方法,缺点:新添加的方法无法共享)

// 实现继承的函数
function object(o){
function F(){}
F.prototype = o;
return new F();
} // 封装继承过程的函数
function createObj(obj){
var newObj = object(obj);
newObj.getAge = function(){
return this.age;
}
return newObj;
} // 定义基础对象
var baseObj = {
name: 'john',
age: 20,
getName: function(){
return this.name;
}
} // 创建新对象
var obj = createObj( baseObj);
obj.name = 'leon';
obj.getName();
obj.getAge();

6. 寄生组合式继承 (改进组合式继承,将原型方法的继承改为利用寄生式继承的方法进行继承,避免了在prototype上产生不必想的属性值,以及多次调用父类构造函数的情况)

// 定义父类构造函数
function SuperClass(father, mother){
this.father = father;
this.mother = mother;
this.brothers = ['jack', 'mike'];
}
// 添加父类方法
SuperClass.prototype.getFather = function(){
return this.father;
}; // 定义子类构造函数, 并调用父构造函数实现属性继承
function SubClass(name, age,father, mother){
SuperClass.call(this, father, mother);
this.name = name;
this.age = age;
} // 继承原型的函数
function inheritPrototype(SubClass, SuperClass){
var prototype = object(SuperClass.prototype);
prototype.constructor = SubClass;
SubClass.prototype = prototype;
} // 通过调用原型继承函数,实现方法继承
inheritPrototype(SubClass, SuperClass); // 添加新方法
SubClass.prototype.getName = function(){
return this.name;
}; // 重写父类中的方法
SubClass.prototype.getFather = function(){
return null;
}; // 实例化子类
var obj = new SubClass('leon', 30, 'peter', 'nancy');

javascript 高级编程系列 - 继承的更多相关文章

  1. javascript 高级编程系列 - 函数

    一.函数创建 1. 函数声明 (出现在全局作用域,或局部作用域) function add (a, b) { return a + b; } function add(a, b) { return a ...

  2. javascript 高级编程系列 - 基本数据类型

    javascript中的基本数据类型包括: Undefined, Null, Boolean, Number, String 5种数据类型 1. Undefined 类型 (只有一个值 undefin ...

  3. javascript 高级编程系列 - 创建对象

    1. 工厂模式 function createPerson(name, age) { var obj = {}; obj.name = name; obj.age = age; obj.getName ...

  4. javascript高级编程笔记01(基本概念)

    1.在html中使用JavaScript 1.  <script> 元素 <script>定义了下列6个属性: async:可选,异步下载外部脚本文件. charset:可选, ...

  5. JavaScript高级编程———JSON

    JavaScript高级编程———JSON < script > /*JSON的语法可以表达一下三种类型的值 简单值:使用与javas相同的语法,可以在JSON中表达字符串.数值.布尔值和 ...

  6. JavaScript高级编程———基本包装类型String和单体内置对象Math

    JavaScript高级编程———基本包装类型和单体内置对象 <script> var stringObject = new String("hello world") ...

  7. JavaScript高级编程——Date类型

    JavaScript高级编程——Date类型 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...

  8. JavaScript高级编程——Array数组迭代(every()、filter()、foreach()、map()、some(),归并(reduce() 和reduceRight() ))

    JavaScript高级编程——Array数组迭代(every().filter().foreach().map().some(),归并(reduce() 和reduceRight() )) < ...

  9. JavaScript高级编程——引用类型、Array数组使用、栈方法

    JavaScript高级编程——引用类型.Array数组使用.栈方法 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999 ...

随机推荐

  1. C#技术点

    程序员的基本内功.操作系统,数据结构,网络协议,架构 mysql存储引擎,索引? 分布式技术一致性? 缓存系统/中间件技术/NoSql? 锁与线程切换? 排序,链表,hash_map?

  2. http.server()的理解

    http.server()相当于实例化一个server,等价于http.createServer(). 以下为个人理解 http.server()为创建一个http服务,http.server()可以 ...

  3. 【Luogu】P3311数数(AC自动机上DP)

    题目链接 蒟蒻今天终于学会了AC自动机,感觉很稳 (后一句愚人节快乐) 这题开一个f[i][j][k]表示有没有受到限制,正在枚举第j位,来到了AC自动机的第k个节点 的方案数 随后可以刷表更新 注意 ...

  4. BZOJ 3626 [LNOI2014]LCA ——树链剖分

    思路转化很巧妙. 首先把询问做差分. 然后发现加入一个点就把路径上的点都+1,询问的时候直接询问到根的路径和. 这样和原问题是等价的,然后树链剖分+线段树就可以做了. #include <map ...

  5. 【bzoj2301】[HAOI2011]Problem b 莫比乌斯反演

    Description 对于给出的n个询问,每次求有多少个数对(x,y),满足a≤x≤b,c≤y≤d,且gcd(x,y) = k,gcd(x,y)函数为x和y的最大公约数. Input 第一行一个整数 ...

  6. 用户认证系统 django.contrib.auth模块

    一 导入auth模块 from django.contrib.auth.models import User from django.contrib import auth auth模块的操作针对的就 ...

  7. 移动web端使用rem实现自适应原理

    1.先获取到物理像素和实际像素的像素比 var pixclPatio = 1 / window.devicePixelRatio; 2.viewport视口设置为像素比大小 document.writ ...

  8. 【CF1017A】The Rank(签到)

    题意:给定n个人的4门课成绩,排名按总分,保证总分互不相同,求1号名次 n<=1e3,a[i],b[i],c[i],d[i]<=1e2 思路: #include<cstdio> ...

  9. net5:自定义验证控件服务器端验证与客户端验证的使用

    原文发布时间为:2008-07-29 -- 来源于本人的百度文章 [由搬家工具导入] using System;using System.Data;using System.Configuration ...

  10. float 常见用法与问题--摘抄

    float 属性绝对是众多切图仔用的最多的 CSS 属性之一,它的用法很简单,常用值就 left.right.none 三个,但是它的特性你真的弄懂了吗? 我会在这里介绍我对 float 的认识与使用 ...