JavaScript_几种继承方式(2017-07-04)
原型链继承
核心: 将父类的实例作为子类的原型
//父类
function SuperType() {
this.property = true;
} SuperType.prototype.getSuperValue = function () {
return this.property
}; //子类
function SubType() {
this.subproperty = false;
} //拿父类实例来充当子类原型对象
SubType.prototype = new SuperType(); SubType.prototype.getSubValue = function () {
return this.subproperty
}; var instance = new SubType();
console.log(instance.getSuperValue()); //true
特点:
- 非常纯粹的继承关系,实例是子类的实例,也是父类的实例
- 父类新增原型方法/原型属性,子类都能访问到
- 简单,易于实现
缺点:
- 要想为子类新增属性和方法,必须要在
new
语句之后执行,不能放到构造器中 - 无法实现多继承
- 来自原型对象的引用属性是所有实例共享的
- 创建子类实例时,无法向父类构造函数传参
借用构造继承
核心:使用父类的构造函数来增强子类实例,等于是复制父类的实例属性给子类(没用到原型)
//父类
function SuperType() {
this.colors = ["red", "blue"]
}
//子类
function SubType() {
SuperType.call(this);//通过apply()和call()方法在新创建的对象上执行构造函数
} var instance1 = new SubType();
instance1.colors.push("black");
console.log(instance1.colors); //["red", "blue", "black"] var instance2 = new SubType();
console.log(instance2.colors); //["red", "blue"]
传递参数
//父类
function SuperType(name) {
this.name = name;
}
//子类
function SubType() {
SuperType.call(this, "mnixu");//通过apply()和call()方法在新创建的对象上执行构造函数
this.age = 20;
} var instance1 = new SubType();
console.log(instance1.name); //"mnixu"
console.log(instance1.age); //20
特点:
- 解决了原型链继承中,子类实例共享父类引用属性的问题
- 创建子类实例时,可以向父类传递参数
- 可以实现多继承(call多个父类对象)
缺点:
- 实例并不是父类的实例,只是子类的实例
- 只能继承父类的实例属性和方法,不能继承原型属性/方法
- 无法实现函数复用,每个子类都有父类实例函数的副本,影响性能
组合继承(最常用的继承模式)
核心:通过调用父类构造,继承父类的属性并保留传参的优点,然后通过将父类实例作为子类原型,实现函数复用
//通过借用构造函数实现继承父类构造函数的属性(构造函数通常用this.属性,对实例对象来说私有)。
//使用原型链实现继承父类原型的属性和方法(原型的属性和方法,对实例对象来说共享)。
//父类
function SuperType(name) {
this.name = name;
this.colors = ["red", "blue"];
} SuperType.prototype.sayName = function() {
console.log(this.name);
}
//子类
function SubType(name, age) {
SuperType.call(this, name);//通过apply()和call()方法在新创建的对象上执行构造函数
this.age = age;
} SubType.prototype = new SuperType();//拿父类实例来充当子类原型对象
SubType.prototype.constructor = SubType;//重新生成constructor属性指向子类,模型原型对象
SubType.prototype.sayAge = function() {
console.log(this.age);
}; var instance1 = new SubType("mnixu", 20);
instance1.colors.push("black");
console.log(instance1.colors); //["red", "blue", "black"]
instance1.sayAge(); //
instance1.sayName(); // "mnixu" var instance2 = new SubType("zwj", 28);
console.log(instance2.colors); //["red", "blue"]
instance2.sayAge(); //
instance2.sayName(); //"zwj"
特点:
- 弥补了借用构造函数继承方式的缺陷,可以继承实例属性/方法,也可以继承原型属性/方法
- 既是子类的实例,也是父类的实例
- 不存在引用属性共享问题
- 可传参
- 函数可复用
缺点:
- 调用了两次父类构造函数,生成了两份实例(子类实例将子类原型上的那份屏蔽了)
4.原型式继承
借助原型并基于已有的对象创建新对象,同时还不用创建自定义类型
//生成对象的函数
function object(o) { //部分浏览器支持Object.create()方法
function F() {};
F.prototype = o;
return new F();
} //父类
var Person = {
name: "mnixu",
color: ["blue", "black"]
}
//子对象1
var anotherPerson = object(Person);
anotherPerson.name = "Greg";
anotherPerson.color.push("red")
//子对象2
var yetAnotherPerson = object(Person);
yetAnotherPerson.name = "zwj";
yetAnotherPerson.color.push("white") console.log(anotherPerson.color); //["blue", "black", "red", "white"]
console.log(yetAnotherPerson.color); //["blue", "black", "red", "white"]
原型式继承首先在obj()
函数内部创建一个临时性的构造函数 ,然后将传入的对象作为这个构造函数的原型,最后返回这个临时类型的一个新实例。
5.寄生式继承
这种继承方式是把原型式+工厂模式结合起来,目的是为了封装创建的过程。
//生成对象的函数
function object(o) { //部分浏览器支持Object.create()方法
function F() {};
F.prototype = o;
return new F();
} //生成并增强对象的函数
function createAnother(original){
var clone = object(original); //通过调用函数创建一个新对象
clone.sayHi = function(){ //增强这个对象
console.log("hi")
};
return clone; //返回这个对象
}
//父类
var Person = {
name: "mnixu",
color: ["blue", "black"]
}
//子对象
var anotherPerson = createAnother(Person);
anotherPerson.sayHi();
略
6.寄生组合式继承
核心:通过寄生方式,砍掉父类的实例属性,这样,在调用两次父类的构造的时候,就不会初始化两次实例方法/属性,避免的组合继承的缺点
//生成对象的函数
function object(o) {//部分浏览器支持Object.create()方法
function F() {};
F.prototype = o;
return new F();
} //继承原型函数
function inheritPrototype(subType, superType) {
var prototype = object(superType.prototype); //创建对象
prototype.constructor = subType; //增强对象
subType.prototype = prototype; //指定对象
}
//父类
function SuperType(name) {
this.name = name;
this.colors = ["red", "blue"];
} SuperType.prototype.sayName = function() {
console.log(this.name);
}
//子类
function SubType(name, age) {
SuperType.call(this, name);
this.age = age;
} inheritPrototype(SubType, SuperType); SubType.prototype.sayAge = function() {
console.log(this.age);
};
特点:
- 这个例子的高效率体现在只调用了一次SuperType构造函数,避免了在SubType.prototype上面创建不必要的属性,并且,原型链还能保持不变。堪称完美
缺点:
- 实现较为复杂
copy:
重新理解JS的6种继承方式js高级程序设计笔记 -- 理解继承
JavaScript_几种继承方式(2017-07-04)的更多相关文章
- js的三种继承方式及其优缺点
[转] 第一种,prototype的方式: //父类 function person(){ this.hair = 'black'; this.eye = 'black'; this.skin = ' ...
- 重新理解JS的6种继承方式
写在前面 一直不喜欢JS的OOP,在学习阶段好像也用不到,总觉得JS的OOP不伦不类的,可能是因为先接触了Java,所以对JS的OO部分有些抵触. 偏见归偏见,既然面试官问到了JS的OOP,那么说明这 ...
- C++的三种继承方式简述
C++对父类(也称基类)的继承有三种方式,分别为:public继承.protected继承.private继承.三种继承方式的不同在于继承之后子类的成员函数的"可继承性质". 在说 ...
- Javascript的四种继承方式
在Javascript中,所有开发者定义的类都可以作为基类,但出于安全性考虑,本地类和宿主类不能作为基类,这样可以防止公用访问编译过的浏览器级的代码,因为这些代码可以被用于恶意攻击. 选定基类后,就可 ...
- JavaScript之四种继承方式讲解
在Javascript中,所有开发者定义的类都可以作为基类,但出于安全性考虑,本地类和宿主类不能作为基类,这样可以防止公用访问编译过的浏览器级的代码,因为这些代码可以被用于恶意攻击. 选定基类后,就可 ...
- C++中的类继承(1) 三种继承方式
继承是使代码可以复用的重要手段,也是面向对象程序设计的核心思想之一.简单的说,继承是指一个对象直接使用另一对象的属性和方法.继承呈现了 面向对象程序设 计的层次结构, 体现了 由简单到复杂的认知过程. ...
- C++继承(一) 三种继承方式
继承定义 继承是使代码可以复用的重要手段,也是面向对象程序设计的核心思想之一. 继承就是不修改原有的类,直接利用原来的类的属性和方法并进行扩展.原来的类称为基类,继承的类称为派生类,他们的关系就像父子 ...
- c++三种继承方式public,protect,private
C++中的三种继承public,protected,private 三种访问权限 public:可以被任意实体访问 protected:只允许子类及本类的成员函数访问 private:只允许本类的成员 ...
- JavaScript的3种继承方式
JavaScript的继承方式有多种,这里列举3种,分别是原型继承.类继承以及混合继承. 1.原型继承 优点:既继承了父类的模板,又继承了父类的原型对象: 缺点:不是子类实例传参,而是需要通过父类实例 ...
随机推荐
- 用python查看windows事件日志的方法(待后续研究)
#coding=utf8 import copy import ctypes from ctypes import byref, POINTER, cast, c_uint64, c_ulong, c ...
- mq命令帮助文档
https://www.ibm.com/support/knowledgecenter/zh/SSFKSJ_7.5.0/com.ibm.mq.ref.adm.doc/q083180_.htm
- js导出excel表格中较长数字串会变成科学计数法问题
在做项目中,遇到导出excel表格时,银行账户号数字过长,导出的数字串变为计数法形式,如下图: 网上搜到解决方法,粘贴到这以供学习.不断更新. 原博地址:http://www.cnblogs.com/ ...
- Android判断网络是否打开,并打开设置网络界面
由于Android的SDK版本不同所以里面的API和设置方式也是有少量变化的,尤其是在Android 3.0 及后面的版本,UI和显示方式也发生了变化,现在就以打开网络设置为例,同大家分享一下: 1. ...
- Android 自定义View二(深入了解自定义属性attrs.xml)
1.为什么要自定义属性 要使用属性,首先这个属性应该存在,所以如果我们要使用自己的属性,必须要先把他定义出来才能使用.但我们平时在写布局文件的时候好像没有自己定义属性,但我们照样可以用很多属性,这是为 ...
- javascript this详解(转)
在面向对象编程语言中,对于this关键字我们是非常熟悉的.比如C++.C#和Java等都提供了这个关键字,虽然在开始学习的时候觉得比较难,但只要理解了,用起来是非常方便和意义确定的.JavaScrip ...
- Mac下brew安装与配置mysql
一.打开mac控制台 $ brew install mysql 二.启动mysql服务 $ mysql.server start 三.初始化mysql配置 1 rainMacBook-Pro:~ co ...
- Redis Windows上下载安装
其它的默认就可. public class RedisTest { public static void main(String[] args) { Jedis jedis = RedisPool.g ...
- IntelliJ IDEA快捷键:Ctrl+Shift+空格
The smart type code completion may be used after the new keyword,to instantiate an object of the exp ...
- python爬取百度贴吧帖子
最近偶尔学下爬虫,放上第二个demo吧 #-*- coding: utf-8 -*- import urllib import urllib2 import re #处理页面标签类 class Too ...