JavaScript组合继承的一点思考
今天看《JavaScript高级程序设计》一书中关于组合继承模式时。书上有这么一个Demo程序：
<html>
<head>
</head>
<body>
<script>
function SuperType(name){
this.name = name;
}
SuperType.prototype.sayName = function(){
alert(this.name);
};
function SubType(name, age){
SuperType.call(this, name);
this.age = age;
}
SubType.prototype = new SuperType();//SuperType.prototype;
SubType.prototype.sayAge = function(){
alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.sayName();
instance1.sayAge();
//var instance2 = new SuperType("Greg", 27);
//instance2.sayAge();
</script>
</body>
</html>当中的SubType.prototype = new SuperType()让我产生了疑问。这个语句的目的不就是要让子类型的原型指向父类型的原型实例吗？为什么不直接写出SubType.prototype = SuperType.prototype呢?
为何非要new一个出来？
细致考虑之后。我把Demo做了例如以下的改动。弄清楚了这么做的理由何在：
<html>
<head>
</head>
<body>
<script>
function SuperType(name){
this.name = name;
}
SuperType.prototype.sayName = function(){
alert(this.name);
};
function SubType(name, age){
SuperType.call(this, name);
this.age = age;
}
SubType.prototype = SuperType.prototype;
SubType.prototype.sayAge = function(){
alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.sayName();
instance1.sayAge();
var instance2 = new SuperType("Greg", 27);
instance2.sayAge();
</script>
</body>
</html>执行以后会发现instance2.sayAge弹出的提示是undefined，也就是说我们在为子类型的加入一个子类型想要持有的方法sayAge时。不小心也污染了父类型，使得父类型也相同拥有了sayAge方法。而父类型根本不具有age属性。当然就会提示这个属性undefined了，这些奇怪现象出现的原因就是直接使用了SubType.prototype = SuperType.prototype造成的。
假设你把这句换成SubType.prototype = new SuperType()的话再去调用sayAge方法就会执行出错。由于父类型这时候并没有这种方法（没有被子类型污染）。所以说使用new是很科学合理的。
JavaScript组合继承的一点思考的更多相关文章
- javascript组合继承
javascript继承有几种继承方式,现在来说说其中的组合继承. 组合继承是结合了原型链和借用构造函数这两种技术的继承方式,分别利用它们的长处,避免了短处.那就先说说这两种技术吧. 原型链 原型链 ...
- JavaScript ----------- 组合继承
继承 实现继承:继承实际的方法.ECMAScript 只支持实现继承,而且其实现基础主要是依靠原型链来实现的. 基本思想是:利用原型来实现一个引用类型继承另外一个引用类型的属性和方法. 原型 - 构造 ...
- Javascript 组合继承 原型链继承 寄生继承
Javascript继承通常有三种方式. 第一种:组合式继承: function SuperType(name) { this.name = name; this.colors = ["re ...
- 三张图搞懂JavaScript的原型对象与原型链 / js继承，各种继承的优缺点（原型链继承，组合继承，寄生组合继承）
摘自:https://www.cnblogs.com/shuiyi/p/5305435.html 对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__pro ...
- JavaScript各种继承方式（六）：寄生组合继承
一 原理 用寄生继承来改造组合继承. function Fruit(name){ this.name = name; } Fruit.prototype.eat = function(){ conso ...
- JavaScript各种继承方式（三）：组合继承（combination inheritance）
一 原理 组合继承仅仅是同时使用了原型链继承和构造函数继承. 具体做法是,将父类的实例作为子类的构造函数的原型对象,并在子类的构造函数中调用父类的构造函数. function Fruit(name){ ...
- 深入浅出javascript（十二）继承——构造函数继承和组合继承
#题记: 有一水果类,抽象出属性包括:name(水果品种),price(价格),id(ID号).现有两个子类,分别为苹果,桔子,希望继承水果父类. 一.构造函数继承 构造函数继承相当把父类的属性在子类 ...
- javascript学习笔记--经典继承、组合继承、原型式继承、寄生继承以及寄生组合继承
经典继承 js中实现经典继承的方式是通过构造函数来实现的,即在子类中对父类调用call方法. function Geometric() { this.time = ""; this ...
- JS继承之借用构造函数继承和组合继承
根据少一点套路,多一点真诚这个原则,继续学习. 借用构造函数继承 在解决原型中包含引用类型值所带来问题的过程中,开发人员开始使用一种叫做借用构造函数(constructor stealing)的技术( ...
随机推荐
- 008.在C#中，显式接口VS隐式接口
原文http://www.codeproject.com/Articles/1000374/Explicit-Interface-VS-Implicit-Interface-in-Csharp (At ...
- WebApi使用swagger ui自动生成接口文档
之前就写到.最近正在使用webapi.这里介绍一个实用的东西swageer ui现在开发都是前后端分开.我们这里是给前端提供api.有时候对于一个api的描述,并不想专门写一份文档.很浪费时间.swa ...
- java存储图片
import java.io.File; import java.io.FileOutputStream; import java.io.OutputStream; import java.util. ...
- Java基础——JDBC
今天学习的内容是:JDBC 通常jdbc连接分6步: 1)注册驱动: 2)建立连接: 3)创建Statement: 4)执行sql 语句: 5)处理结果集(若sql 语句为查询语句): 6)关闭连接. ...
- 解决：jsp 页面不全，response 内容不完整
前言:今天 jsp 页面输出不完整这个问题困扰了我几个小时,终于发现问题并解决了. 环境: tomcat 8.0.17 x64 jsp springmvc vue 问题: 本来页面正常,但加了几行代码 ...
- MQ之如何做到消息幂等 （转 优秀）
一.缘起 MQ消息必达,架构上有两个核心设计点: (1)消息落地 (2)消息超时.重传.确认 再次回顾消息总线核心架构,它由 发送端.服务端.固化存储.接收端 四大部分组成. 为保证消息的可达性,超时 ...
- 网络编程: 基于UDP协议的socket
udp是无链接的,启动服务之后可以直接接受消息,不需要提前建立链接 UDP协议的通信优势: 允许一个服务器同时和多个客户端通信, TCP不行 服务端 import socket sk = socket ...
- angular基于ui-router实现系统权限控制
前端去实现权限控制听起来有点扯淡(实际也有点扯淡),掩耳盗铃,主要是担心安全问题,但是如果在前后端分离的情况下,需要做一个带有权限控制的后台管理系统,angular基于ui-router应该怎么做呢? ...
- margin相关基本知识
什么是 margin ? CSS 边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界,元素 ...
- 解决ubuntu使用命令sudo apt -get install 安装东西时出现"E: Sub-process /usr/bin/dpkg returned an error code (1) "的错误
问题描述: 今天在使用命令 "sudo apt-get install python3-pip"安装时,总是出现如下图这样的错误,开始以为是以为自己python版本的问题,后来发现 ...