js面向对象的程序设计 --- 下篇 继承启蒙
继承是oo语言中一个最为人津津乐道的概念。ECMAScript支持实现继承,而且实现继承只要是靠原型链来实现的 ·原型链
其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。
简单回顾一个构造函数,原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的
内部指针。那么,假设我们让原型对象等于另一个类型的实例,结果会怎样呢?
// 生物的构造函数
function Bio(){
this.life = true
}
Bio.prototype.getLife = function () {
return this.life;
}
// 动物的构造函数
function Animal(){
this.eat = true;
}
Animal.prototype = new Bio();
// 狗的构造函数
function Dog(master){
this.master = master;
}
Dog.prototype = new Animal(); var dog1 = new Dog("cl");
console.log(dog1.life); // true
console.log(dog1.constructor);
/*
输出:
ƒ Bio(){
this.life = true
}
为什么会这样,因为 Dog 和 Animal 的constructor 被重写了的缘故
*/
上述代码中。我们没有使用Dog默认提供的原型,而是给它换了一个新原型。这个新原型就是Animal的实例。于是新原型不仅具有作为一个Animal
实例拥有的全部属性和方法,而且其内部还有一个指针,指向了Animal的原型...
通过实现原型链,本质上拓展了本章前面介绍的原型搜索机制。
默认的原型:
事实上,前面例子中展示的原型链少了一环。我们知道,所有的应用类型默认都继承了Object,而这个继承也是通过原型链实现的。大家记住,所有引用类型
默认原型都是Object的实例,因此默认原型都会包含一个内部指针,指向Object.prototype。这正是所有自定义类型都会继承toString() ,valueOf()等
默认方法的原因。
确认原型和实例的关系:
可以通过两种方式来确定原型和实例之间的关系。
// 第一种方法:使用instanceof 操作符,只要用这个操作符检测实例与原型链出现过的构造函数,结果就会返回true。
console.log(dog1 instanceof Dog);
console.log(dog1 instanceof Animal);
console.log(dog1 instanceof Bio);
console.log(dog1 instanceof Object); // 全部为true
// 由于原型链的关系,我们可以说dog1 是上述四个任何一个类型的实例
// 第二种方法:使用isPrototypeOf() 方法。同样,只要原型链出现过的原型,都可以说是该原型链所派生的实例的原型
console.log(Object.prototype.isPrototypeOf(dog1));
console.log(Animal.prototype.isPrototypeOf(dog1));
console.log(Bio.prototype.isPrototypeOf(dog1));
console.log(Dog.prototype.isPrototypeOf(dog1)); // 全部为true
谨慎的定义方法
两点问题:
1: 不管怎么样,给原型添加方法的代码一定放在替换原型的语句之后
2:通过原型链实现继承时,不能使用对象字面量创建原型方法。因为这样做就会重写原型链
原型链的问题:
code..
function Super () {
this.color = ["red","blue","green"];
}
function Sub () { }
Sub.prototype = new Super();
var ins1 = new Sub();
ins1.color.push("black");
console.log(ins1.color); // ["red", "blue", "green", "black"] var ins2 = new Sub();
console.log(ins2.color); // ["red", "blue", "green", "black"] // 那么问题来了,由于Sub的所有实例都会共享这一个color属性,那么我们对ins1.color的修改能够通过ins2.color反映出来
// 问题:在创建子类型的实例时,不能向超类型的构造函数传递参数。实际上,应该说是没有办法在不影响所有对象实例的情况下,给超类型的
// 构造函数传递参数。有鉴于此,实践中很少会单独使用原型链
·借用构造函数
在解决原型中包括引用类型值所带来问题的过程中,开发人员使用一种借用构造函数的技术。这种技术的基本思想相当简单,即在子类型构造函数的
内部调用超类型构造函数
function Animal(name){
this.name = name;
} function Dog(){
// 通过使用call()方法(或apply()方法也可以),我们实际上在新创建的Dog实例的环境调用了Animal构造函数。这样一来
// 也会在心得Dog对象上执行Animal()函数中定义的所有对象初始化代码
Animal.call(this,"Nic");
this.age = 29;
}
var ins = new Dog();
console.log(ins.name); // Nic
console.log(ins.age); //
借用构造函数的问题:
如果仅仅是借用构造函数,那么将无法避免构造函数模式存在的问题---方法都在构造函数中定义,那么函数复用就无从谈起。而且超类型的原型定义的
方法,对子类型而言也是不可见的,结果所有类型都只能用构造函数模式。考虑到这些问题,借用构造函数的模式也很少使用
·组合继承
组合继承也叫伪经典继承,指的是将原型链和构造函数的技术组合到一块,从而发挥二者之长的一种继承模式。其背后的思路是使用原型链实现对原型属性
和方法的继承,而使用构造函数来实现对实例属性的继承。这样,既通过在原型上定义方法实现了函数的复用,又能够保证每个实例都有它自己的属性。
上面的代码可以这样改写:
function Animal(name){
this.name = name;
}
Animal.prototype.home = 'north';
function Dog(){
// 通过使用call()方法(或apply()方法也可以),我们实际上在新创建的Dog实例的环境调用了Animal构造函数。这样一来
// 也会在心得Dog对象上执行Animal()函数中定义的所有对象初始化代码
Animal.call(this,"Nic");
this.age = 29;
}
Dog.prototype = new Animal();
Dog.prototype.constructor = Dog; // 修正构造函数
var ins = new Dog();
console.log(ins.name); // Nic
console.log(ins.age); //
console.log(ins.home); // north
组合继承避免了原型链和借用构造函数的缺陷,融合了它们的优点,成为javascript中最常用的继承模式。而且,instanceof和isPrototypeOf()也
能够用于识别基于组合继承创建的对象。
·原型式继承
这种方法没有严格意义上的构造函数。他的想法是借助原型基于已有的对象创建新对象,同时还不必因此创建自定义类型:
function object(o){
function F(){};
F.prototype = o;
return new F();
}
//在object() 函数内部,先创建了一个临时性的构造函数,然后将传入的对象作为这个构造函数的原型,最后返回这个临时类型的一个新实例。
// 从本质上来讲,object()对传入的对象执行了一次浅复制 var person = {
name : "Ni",
friends : ['She','Co'],
}
var anotherPerson = Object(person);
anotherPerson.friends.push('tom');
var yetAnotherPerson = Object(person);
console.log(yetAnotherPerson.friends); // ["She", "Co", "tom"] // ECMAScript5通过新增Object.create() 方法规范了原型式继承。这个方法接收两个参数:一个用作新对象原型的对象和(可选的)一个为新对象定义
// 额外属性的对象。在传入一个参数的情况下,Object.create() 与 object()方法的行为相同
var myPerson = Object.create(person,{demo:{value:"G"}});
console.log(myPerson.demo); //G
// 在没有兴师动众的插件构造函数,而只想让一个对象与另一个对象保持类似的情况下,原型式继承式完全可以胜任的。不过别忘了,包含引用类型的值
// 的属性始终都会共享相应的值,就像适应原型模式一样
·寄生式继承
寄生式继承是与原型式继承紧密相关的一种思路,并且同样也是由上面的作者推而广之的。寄生式继承的思路与继承构造函数和工厂模式类似,即
创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后再像真的是它做了所有工作一样返回对象
function object(o){
function F(){};
F.prototype = o;
return new F();
}
function createAnother(orginal){
var close =object(orginal); // 通过调用函数创建一个新对象
close.sayHi = function () { // 以某种方式增强这个对象
console.log('hi');
}
return close; // 返回这个对象
}
var person = {
'name' : "Ni",
friends : ["She","Co"],
}
var anPer = createAnother(person);
anPer.sayHi(); // hi //在考虑到对象不是自定有类型和构造函数的情况下,寄生式继承也是一种游泳的模式,前面示范继承模式时使用的object()函数不是必需的;任何能返回新
// 对象的函数都适用于此模式
// 使用寄生式继承来为对象添加函数,会由于不能做到函数复用而降低效率;这一点与构造函数模式类似
·寄生组合式继承
前面说过,组合继承时js最常用的继承模式;不过它也有自己的不足。组合继承最大的问题是无论什么情况下,都会调用两次超类型构造函数。一次在
创建子类原型的时候,另一次是在子类构造函数内部。没错,,子类型最终会包含超类型对象的全部实例属性,但我们不得不在调用子类型构造函数
时重写这些属性。再看下组合继承的例子:
function Super(name){
this.name = name;
this.color = ['red','blue'];
}
Super.prototype.sayName = function () {
console.log(this.name);
} function Sub(name,age){
Super.call(this,name); // 第二次调用Super();
this.age = age;
}
Sub.prototype = new Super(); // 第一次调用Super();
Sub.prototype.constructor = Sub;
Sub.prototype.sayAge = function () {
console.log(this.age);
} var demo = new Sub('cl','25');
demo.sayAge(); //
// 不知道你有没有发现。第一次调用Super构造函数时,Sub.prototype会得到两个属性:name 和 color是,它们都时Super的实例属性,只不过
// 位于Sub的原型中。当调用Super构造函数时,又一次在新对象上创建了name 和 color 。于是,这两个属性就屏蔽了原型中的两个同名属性
// 好在我们已经找到解决这个问题方法 --- 寄生组合式继承
// 所谓继承组合式继承,即姐哟个构造函数来继承属性,通过原型链的混成形式继承方法。其背后的基本思路是:不必为了指定子类型的原型而
// 调用超类型的构造函数,我们所需要的无非是超类型原型的一个副本而已。本质上,就是使用寄生式继承来继承超类型的原型,然后再将
// 结果制定给子类型的原型。寄生组合式继承的基本模式如下:
function inheritPrototype(subType,superType) {
var prototype = Object.create(superType.prototype); // 创建对象
prototype.constructor = subType; // 增强对象
subType.prototype = prototype; // 指定对象
} /*
这个示例中的 inheritPrototype() 函数实现了寄生组合式继承的最简单形式。这个函数接收两个参数:子类型构造函数和超类型构造函数。
在函数内部,第一步是创建超类型原型的一个副本。第二步为创建的副本添加constructor属性,弥补因重写原型而失去的默认的constructor属性。
最后一步,将创建的对象(即副本)赋值给子类型的原型。这样我们就可以调用inheritPrototype()函数的语句,去替换前面例子中为子类原型赋值的语句了: */
function SuperType(name){
this.name = name;
this.color = ['red','blue','green'];
}
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);
}
var xx = new SubType('cl',14);
console.log(xx);
// 这个例子高效率体现在它之调用了一次SuperType构造的函数,并且因此避免了在SubType.prototype上创建不必要,多余的属性。与此同时,
// 还能够正常使用instanceof 和 isPrototypeOf() 。开发人员普遍认为寄生组合式继承是最理想的继承范式。
js面向对象的程序设计 --- 下篇 继承启蒙的更多相关文章
- js面向对象设计之class继承
EcmaScript 2015 (又称ES6)通过一些新的关键字,使类成为了JS中一个新的一等公民.但是目前为止,这些关于类的新关键字仅仅是建立在旧的原型系统上的语法糖,所以它们并没有带来任何的新特性 ...
- JS面向对象(封装,继承)
在六月份找工作中,被问的最多的问题就是: js面向对象,继承,封装,原型链这些,你了解多少? 额,,,我怎么回答呢, 只能说,了解一些,不多不少,哈哈哈哈,当然,这是玩笑话. 不过之前学过java,来 ...
- js面向对象(构造函数与继承)
深入解读JavaScript面向对象编程实践 Mar 9, 2016 面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式,主要包括模块化.多态.和封装几种技术. 对JavaScript而言,其 ...
- JS面向对象的程序设计
面向对象的语言有一个标志,即拥有类的概念,抽象实例对象的公共属性与方法,基于类可以创建任意多个实例对象,一般具有封装.继承.多态的特性!但JS中对象与纯面向对象语言中的对象是不同的,ECMA标准定义J ...
- JS面向对象,创建,继承
很开心,最近收获了很多知识,而且发现很多东西,以前理解的都是错的,或者是肤浅的,还以为自己真的就get到了精髓,也很抱歉会影响一些人往错误的道路上走,不过这也告诉了我们,看任何一篇文章都不能盲目的去相 ...
- Js 面向对象之封装,继承,原型,原型链
封装 ,继承 ,原型, 原型链 封装 ? 面向对象有三大特性,封装.继承和多态.对于ES5来说,没有class(类)的概念,并且由于JS的函数级作用域(函数内部的变量在函数外访问不到),所以我们就可以 ...
- 重学JavaScript之面向对象的程序设计(继承)
1. 继承 ES 中只支持实现继承,而且其实现继承主要依靠原型链来实现的. 2. 原型链 ES中 描述了 原型链的概念,并将原型链作为实现继承的主要方法.其基本思想是利用原型让一个引用类型继承另一个引 ...
- JS面向对象(二)---继承
一.面向对象的继承 1.解析:在原有对象的基础上,略作修改,得到一个新的对象,并且不影响原有对象的功能 2.如何添加继承---拷贝继承 属性:call 方法: for in /* 继承:子类不影响父类 ...
- JS面向对象,原型,继承
ECMAScript有两种开发模式:1.函数式(过程化),2.面向对象(OOP).面向对象的语言有一个标志,那就是类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是,ECMAScript ...
随机推荐
- 电脑和手机上常用apk或Pc软件的重要目录或文件或文件夹路径
常用apk或Pc软件的重要目录或文件或文件夹路径 01.hosts文件位置在哪里 C:\Windows\System32\drivers\etc 02.Windows7的锁屏壁纸目录在哪 C:\Win ...
- springboot web - 建立路由
一. 测试代码 @RestController @RequestMapping("/book") public class BookController { @PostMappin ...
- Postman使用技巧
Postman是什么 Postman是chrome的一款插件,用于做接口请求测试,无论是前端,后台还是测试人员,都可以用postman来测试接口,用起来非常方便. Postman安装 官网下载(翻墙) ...
- 【33】卷积步长讲解(Strided convolutions)
卷积步长(Strided convolutions) 卷积中的步幅是另一个构建卷积神经网络的基本操作,让我向你展示一个例子. 如果你想用3×3的过滤器卷积这个7×7的图像,和之前不同的是,我们把步幅设 ...
- 如何实现 List 集合的线程安全
在实际项目开发中,List 集合较为常用,相比于数组,其提供了更多的方法,便于遍历.搜索.添加与移除.常见的有 ArrayList.Vector等. 关于ArrayList 中所周知,ArrayL ...
- 03-SV过程语句和子程序
1.过程语句 for语句.do-while语句.while语句 initial begin string cmd; int file,c; $display("=========== con ...
- sublime text 3安装html-css-js prettify后使用时报错An unhandled OS error was encountered
我在安装代码格式整理插件 html-css-js prettify 后,在使用时弹出报错提示如下图 意思大概是node.js什么路径没配置对,对于开始下载sublime text 3使用到各种插件的安 ...
- jQuery---淘宝精品案例
淘宝精品案例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...
- Mac 多版本 JDK 管理
Mac 多版本 JDK 管理 1. 准备 ZSH Homebrew Oracle JDK 1.8 安装包(Homebrew 官方源和第三方源不再提供老版本的 Oracle JDK) 2. 安装 JDK ...
- Java 中多态的实现(上)
Java 中语法上实现多态的方式分为两种:1. 重载.2. 重写,重载又称之为编译时的多态,重写则是运行时的多态. 那么底层究竟时如何实现多态的呢,通过阅读『深入理解 Java 虚拟机』这本书(后文所 ...