今天看《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组合继承的一点思考的更多相关文章

  1. javascript组合继承

    javascript继承有几种继承方式,现在来说说其中的组合继承. 组合继承是结合了原型链和借用构造函数这两种技术的继承方式,分别利用它们的长处,避免了短处.那就先说说这两种技术吧. 原型链  原型链 ...

  2. JavaScript ----------- 组合继承

    继承 实现继承:继承实际的方法.ECMAScript 只支持实现继承,而且其实现基础主要是依靠原型链来实现的. 基本思想是:利用原型来实现一个引用类型继承另外一个引用类型的属性和方法. 原型 - 构造 ...

  3. Javascript 组合继承 原型链继承 寄生继承

    Javascript继承通常有三种方式. 第一种:组合式继承: function SuperType(name) { this.name = name; this.colors = ["re ...

  4. 三张图搞懂JavaScript的原型对象与原型链 / js继承，各种继承的优缺点（原型链继承，组合继承，寄生组合继承）

    摘自:https://www.cnblogs.com/shuiyi/p/5305435.html 对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__pro ...

  5. JavaScript各种继承方式（六）：寄生组合继承

    一 原理 用寄生继承来改造组合继承. function Fruit(name){ this.name = name; } Fruit.prototype.eat = function(){ conso ...

  6. JavaScript各种继承方式（三）：组合继承（combination inheritance）

    一 原理 组合继承仅仅是同时使用了原型链继承和构造函数继承. 具体做法是,将父类的实例作为子类的构造函数的原型对象,并在子类的构造函数中调用父类的构造函数. function Fruit(name){ ...

  7. 深入浅出javascript（十二）继承——构造函数继承和组合继承

    #题记: 有一水果类,抽象出属性包括:name(水果品种),price(价格),id(ID号).现有两个子类,分别为苹果,桔子,希望继承水果父类. 一.构造函数继承 构造函数继承相当把父类的属性在子类 ...

  8. javascript学习笔记--经典继承、组合继承、原型式继承、寄生继承以及寄生组合继承

    经典继承 js中实现经典继承的方式是通过构造函数来实现的,即在子类中对父类调用call方法. function Geometric() { this.time = ""; this ...

  9. JS继承之借用构造函数继承和组合继承

    根据少一点套路,多一点真诚这个原则,继续学习. 借用构造函数继承 在解决原型中包含引用类型值所带来问题的过程中,开发人员开始使用一种叫做借用构造函数(constructor stealing)的技术( ...

随机推荐

  1. JavaScript push()函数追加数组数据

    将数据追加到一个数组末尾的最简单的方法是通过 push() 函数. .push() 允许有一个或多个参数,并把它“push”到数组的末尾. var arr = [1,2,3];arr.push(4); ...

  2. 骆驼拼写法（CamelCase)

    在英语中,依靠单词的大小写拼写复合词的做法,叫做"骆驼拼写法"(CamelCase).比如,backColor这个复合词,color的第一个字母采用大写. 这种拼写法在正规的英语中 ...

  3. Java 获取当前时间前一个小时的时间

    /** * 获取当前时间前一个小时的时间 */ public static void beforeOneHourToNowDate() { Calendar c = new Calendar.getI ...

  4. Docker网络实践运用

    Docker 容器网络概述 要构建具有安全的一致行为的 Web 应用程序,可以使用 Docker 网络特性.根据定义,网络为容器实现了完全隔离.因此,控制应用程序所在的网络很重要.Docker 容器网 ...

  5. CassiniDev源码学习 - 可替代IIS的单机Web Form解决方案

    最近一个项目是将web版的程序,改为单机版.话说这个web版号称当年十几个人用了至少3个月的时间开发,后来三年还不断有修改,而现在要在1个月内由一个人完成,这简直是不可能完成的任务!直觉告诉我,重写肯 ...

  6. C Traps：优先级常见错误

    逻辑与关系运算符 if (flags & FLAG != 0) {...} 这类错误以前也犯过,因为!=的优先级比&要高所以实际上是这样的 if (flags & (FLAG ...

  7. CSS垂直翻转/水平翻转提高web页面资源重用性——张鑫旭

    一.CSS下兼容性的元素水平/垂直翻转实现 随着现代浏览器对CSS3的支持愈发完善,对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能.相关的CSS代码如下: /*水平翻转*/ .f ...

  8. BZOJ2663 [Beijing wc2012]灵魂宝石

    Description 平面中有\(n\)个黑点和\(n\)个白点.这些点组成\(n\)对,但是你不知道它们的对应关系.若某队中黑点白点距离\(<R\),则它是好的:\(>R\)则不是好的 ...

  9. phoenix使用vue

    phoenix使用vue mix phoenix.new ass2 Fetch and install dependencies? [Yn] y 修改 package.json { "rep ...

  10. 活字格企业 Web 应用生成器新手上路指南

    活字格是一款企业 Web 应用生成器,使用了类 Excel 的设计界面,通过简单的拖拽操作,就能快速制作出一个 Web 信息管理系统.在整个使用过程中无需专业软件知识,没有任何技术门槛,能轻松实现各行 ...