javascript 高级编程系列 - 继承
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 高级编程系列 - 继承的更多相关文章
- javascript 高级编程系列 - 函数
一.函数创建 1. 函数声明 (出现在全局作用域,或局部作用域) function add (a, b) { return a + b; } function add(a, b) { return a ...
- javascript 高级编程系列 - 基本数据类型
javascript中的基本数据类型包括: Undefined, Null, Boolean, Number, String 5种数据类型 1. Undefined 类型 (只有一个值 undefin ...
- javascript 高级编程系列 - 创建对象
1. 工厂模式 function createPerson(name, age) { var obj = {}; obj.name = name; obj.age = age; obj.getName ...
- javascript高级编程笔记01(基本概念)
1.在html中使用JavaScript 1. <script> 元素 <script>定义了下列6个属性: async:可选,异步下载外部脚本文件. charset:可选, ...
- JavaScript高级编程———JSON
JavaScript高级编程———JSON < script > /*JSON的语法可以表达一下三种类型的值 简单值:使用与javas相同的语法,可以在JSON中表达字符串.数值.布尔值和 ...
- JavaScript高级编程———基本包装类型String和单体内置对象Math
JavaScript高级编程———基本包装类型和单体内置对象 <script> var stringObject = new String("hello world") ...
- JavaScript高级编程——Date类型
JavaScript高级编程——Date类型 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...
- JavaScript高级编程——Array数组迭代(every()、filter()、foreach()、map()、some(),归并(reduce() 和reduceRight() ))
JavaScript高级编程——Array数组迭代(every().filter().foreach().map().some(),归并(reduce() 和reduceRight() )) < ...
- JavaScript高级编程——引用类型、Array数组使用、栈方法
JavaScript高级编程——引用类型.Array数组使用.栈方法 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999 ...
随机推荐
- sysctl内核参数解析
sysctl内核参数解析 kernel.参数 kernel.shmall = 2097152 ## 1> 表示所有内存大小.可以分配的所有共享内存段的总和最大值.(以页为单位) ## 2& ...
- 微信小程序页面跳转传参
1.传递参数方法 使用navigatior组件 <navigator url="/pages/pull/pull?title=lalla&name=cc" hov ...
- android 脱壳 之 dvmDexFileOpenPartial断点脱壳原理分析
android 脱壳 之 dvmDexFileOpenPartial断点脱壳原理分析 导语: 笔者主要研究方向是网络通信协议的加密解密, 对应用程序加固脱壳技术很少研究, 脱壳壳经历更是经历少之甚少. ...
- javaweb学习总结(九)—— 通过Servlet生成验证码图片(转)
(每天都会更新至少一篇以上,有兴趣的可以关注)转载自孤傲苍狼 一.BufferedImage类介绍 生成验证码图片主要用到了一个BufferedImage类,如下:
- Codeforces663E. Binary Table
$n \leq 20,m \leq 100000$的01矩阵,可整行整列01翻转,问最少剩几个1. 一个暴力的做法是枚举$2^n$种行翻转然后$m$列扫一遍.但其实在行翻转情况确定的情况下我们只关心两 ...
- javascript 函数重载另一种实现办法
最近在读javascript忍者 感受下jquery作者 john Resig对于js的独到见解. 先上代码: function addMethod(object,name,fn){ var old ...
- HDU 6218 (线段树+set)
HDU 6218 Bridge Problem : 给一个2×n的矩阵,一开始矩阵所有相邻点之间有一条边.有其.个询问,每次给出两个相邻的点的坐标,将其中的边删除或者添加,问如此操作之后整张图的割边数 ...
- poj 1066 Treasure Hunt 线段相交
题目链接 题目描述 一个正方形房间被分成若干个小室,宝藏在其中某一点.现可炸开任意一堵墙壁的中点位置.问至少要炸开多少堵墙才能从外面到达宝藏所在地. 思路 (很巧妙,没想到) 直接枚举墙壁与正方形外壁 ...
- WebRTC 介绍 (转)
google开源了WebRTC项目,网址是:http://code.google.com/p/webrtc/. WebRTC实现了基于网页的视频会议,标准是WHATWG 协议,目的是通过浏览器提供简单 ...
- 诡异的malloc函数和%S的输出
今天测试代码过程中无意间发现,代码如下: #include <stdio.h> #include <string.h> #include <stdlib.h> #d ...