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

根据少一点套路,多一点真诚这个原则,继续学习. 借用构造函数继承在解决原型中包含引用类型值所带来问题的过程中,开发人员开始使用一种叫做借用构造函数(constructor stealing)的技术(有时候也叫做伪造对象或经典继承).这种技术的基本思想相当简单,即在子类型构造函数的内部调用超类型构造函数. 基本模式 function SuperType(){ this.colors = ["red", "blue", "green"]; } fu…

js继承之组合继承（结合原型链继承和借用构造函数继承）

在我的前两篇文章中,我们已经介绍了 js 中实现继承的两种模式:原型链继承和借用构造函数继承.这两种模式都存在各自的缺点,所以,我们考虑是否能将这二者结合到一起,从而发挥二者之长.即在继承过程中,既可以保证每个实例都有它自己的属性,又能做到对一些属性和方法的复用.这样就 perfect 了. 一.回顾借用构造函数继承的缺点先看我们之前在借用构造函数继承中最后用到的代码: //父类:人 function Person () { this.head = '脑袋瓜子'; this.emotion =…

js继承之借用构造函数继承

我的上一篇文章介绍了,原型链继承模式.但是单纯的原型链模式并不能很好地实现继承. 一.原型链的缺点 1.1 单纯的原型链继承最大的一个缺点,来自于原型中包含引用类型的值. 本来,我们没有通过原型链实现继承前,子类的所有实例都共享着原型上的所有属性和方法.通过子类实例,可以访问原型上的属性,但是,不能重写原型上的属性. //定义一个学生类 function Student(stuID, schoolName) { this.stuID = stuID; this.schoolName = scho…

javascript实现继承3种方式：原型继承、借用构造函数继承、组合继承，模拟extends方法继承

javascript中实现继承的三种方式:原型继承.借用构造函数继承.混合继承: /* js当中的继承 js中构造函数原型对象实力对象的关系: 1 构造函数.prototype = 原型对象 2 原型对象.constructor = 构造函数(模板) 3 原型对象.isPrototypeOf(实例对象) 判断实例对象的原型是不是当前对象 4 构造函数实力对象是类和对象的关系 */ /* 1 原型继承给子类构造函数的原型对象赋值为父类构造函数的实例赋值之后产生的关系: 1 子类的原…

javascript中继承(二)-----借用构造函数继承的个人理解

本人目录如下: 零.寒暄&回顾一,借用构造函数二.事件代理三,call和apply的用法四.总结零.寒暄&回顾上次博客跟大家分享了自己对原型链继承的理解,想看的同学欢迎猛击这里,上次说到原型链继承有一些问题,主要是两方面的.我们举个栗子来说明下: Q1:共享的超类属性能被任何实例改写,这个是很危险的!看下面一段代码: function Person(name){ this.name=name; this.countries=["America","…

javascript继承之借用构造函数与原型

javascript继承之借用构造函数与原型在js中,关于继承只有利用构造函数和原型链两种来现实.以前所见到的种种方法与模式,只不过是变种罢了. 借用构造函数 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 // 一个动物类,包含名字和性别属性 function Animal (name, sex) { this.name = name; this.sex = sex; this.getName = fu…

javascript继承之借用构造函数(二)

//简单的函数调用 function Father() { this.nums= [1,2]; } function Son() { Father.call(this);//调用超类型,完成son继承father } var s1 = new Son(); s1.nums.push("yellow"); alert(s1.nums);//red,black,yellow var s2 = new Son(); alert(s2.nums); //red,black 每次实例化son的时…

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

一原理组合继承仅仅是同时使用了原型链继承和构造函数继承. 具体做法是,将父类的实例作为子类的构造函数的原型对象,并在子类的构造函数中调用父类的构造函数. function Fruit(name){ this.name = name; this.nutrition = ['维生素']; } Fruit.prototype.eat = function(){ console.log('eat'); } function Mango(name,level){ Fruit.call(this,nam…

Typescript中的类 Es5中的类和静态方法和继承（原型链继承、对象冒充继承、原型链+对象冒充组合继承）

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <script…

一篇文章理解JS继承——原型链/构造函数/组合/原型式/寄生式/寄生组合/Class extends

说实在话,以前我只需要知道"寄生组合继承"是最好的,有个祖传代码模版用就行.最近因为一些事情,几个星期以来一直心心念念想整理出来.本文以<JavaScript高级程序设计>上的内容为骨架,补充了ES6 Class的相关内容,从我认为更容易理解的角度将继承这件事叙述出来,希望大家能有所收获. 1. 继承分类先来个整体印象.如图所示,JS中继承可以按照是否使用object函数(在下文中会提到),将继承分成两部分(Object.create是ES5新增的方法,用来规范化这个函数…

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

摘自:https://www.cnblogs.com/shuiyi/p/5305435.html 对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__proto__混淆,二来它们之间的各种指向实在有些复杂,其实市面上已经有非常多的文章在尝试说清楚,有一张所谓很经典的图,上面画了各种线条,一会连接这个一会连接那个,说实话我自己看得就非常头晕,更谈不上完全理解了.所以我自己也想尝试一下,看看能不能把原型中的重要知识点拆分出来,用最简单的图表形式说清楚. 我…

JS原型、原型链、构造函数、实例与继承

https://cloud.tencent.com/developer/article/1408283 https://cloud.tencent.com/developer/article/1195938 https://cloud.tencent.com/developer/article/1359936 https://cloud.tencent.com/developer/article/1079079 https://cloud.tencent.com/developer/articl…

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

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

js 原型链、构造函数、原型与实例之间的关系

面向对象编程都会涉及到继承这个概念,JS中实现继承的方式主要是通过原型链的方法. 一.构造函数.原型与实例之间的关系每创建一个函数,该函数就会自动带有一个 prototype 属性.该属性是个指针,指向了一个对象,我们称之为原型对象.什么是指针?指针就好比学生的学号,原型对象则是那个学生.我们通过学号找到唯一的那个学生.假设突然,指针设置 null, 学号重置空了,不要慌,对象还存在,学生也没消失.只是不好找了. 原型对象上默认有一个属性 constructor,该属性也是一个指针,指向其相…

JS学习笔记——JavaScript继承的6种方法(原型链、借用构造函数、组合、原型式、寄生式、寄生组合式)

JavaScript继承的6种方法 1,原型链继承 2,借用构造函数继承 3,组合继承(原型+借用构造) 4,原型式继承 5,寄生式继承 6,寄生组合式继承 1.原型链继承. <script type="text/javascript"> function Person(name,sex) { this.name=name; this.sex=sex; this.friends=['李四']; this.getName=function(){ alert(this.name…

JS高阶---继承模式（借用构造函数继承+组合继承）

(1)借用构造函数继承案例如下: 验证: (2)组合继承案例如下: 验证如下: 结果如右图所示 . .…

JavaScript继承基础讲解，原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承

说好的讲解JavaScript继承,可是迟迟到现在讲解.废话不多说,直接进入正题. 既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考<面向对象JS基础讲解,工厂模式.构造函数模式.原型模式.混合模式.动态原型模式>,接下来讲一般通过那些方法完成JavaScript的继承. 原型链 JavaScript中实现继承最简单的方式就是使用原型链,将子类型的原型指向父类型的实例即可,即“子类型.prototype = new 父类型();”,实现方法如下…

[js高手之路]从原型链开始图解继承到组合继承的产生

基于javascript原型链的层层递进查找规则,以及原型对象(prototype)的共享特性,实现继承是非常简单的事情一.把父类的实例对象赋给子类的原型对象(prototype),可以实现继承 function Person(){ this.userName = 'ghostwu'; } Person.prototype.showUserName = function(){ return this.userName; } function Teacher (){} Teacher.proto…

[js高手之路]设计模式系列课程-组合模式+寄生组合继承实战新闻列表

所谓组合模式,就是把一堆结构分解出来,组成在一起,现实中很多这样的例子,如: 1.肯德基套餐就是一种组合模式, 比如鸡腿堡套餐,一般是是由一个鸡腿堡,一包薯条,一杯可乐等组成的 2.组装的台式机同理,由主板,电源,内存条,显卡, 机箱,显示器,外设等组成的把一个成型的产品组成部件,分成一个个独立的部件,这种方式可以做出很多灵活的产品,这就是组合模式的优势比如:家用台式机电脑,要求配置比较低, 这个时候只需要主板+电源+内存条+机箱+显示器+外设就可以了,不需要配置独立显卡鸡腿堡+鸡翅+紫薯…

js组合继承和寄生组合式继承比较

本文是原创文章,如需转载,请注明文章出处 1.js中实现组合继承(B继承A): function A(name){ this.name = name; this.ary = ["AA","BB","CC"]; } A.prototype.say = function() { console.log(this.name); console.log(this.ary); } function B(name, age){ A.call(this, na…

JS 面向对象之继承---多种组合继承

1. 组合继承:又叫伪经典继承,是指将原型链和借用构造函数技术组合在一块的一种继承方式. 下面来看一个例子: function SuperType(name) { this.name = name; this.colors = ["red", "blue", "green"]; } SuperType.prototype.sayName = function() { alert(this.name); } function SubType(nam…

javascript类式继承模式#2——借用构造函数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…

js组合继承

//组合继承指的是将原型链和借用构造函数(call.apply)的技术组合到一起,从而发挥二者之长的一种继承模式,//其背后的思路就是使用原型链实现对原型属性和方法的继承://而通过借用构造函数来实现对实例属性的继承.这样,既通过在原型上定义方法实现了函数复用,又能保证每个实例都有它自己的属性.//详见<高三>6.3.3章节 2014-12-17 function SuperType(name) { this.superName = name; this.colors = [&q…

js 组合继承详解

目录前言原型链继承构造函数继承组合继承前言首先学习继承之前,要对原型链有一定程度的了解. 不了解可以去先阅读我另一篇文章,里面对原型链有一个较为详细的说明:js 原型链详解. 如果已经了解请继续. 之前写过一篇博文将继承方式全部列出来了,不过我发现一口气看完过于长了,也不利于吸收知识,所以我先将组合继承部分划分出来,后续会把寄生部分补上. 原型链继承父类实例作为子类的原型子类创造的两个实例的隐式原型__proto__指向父类的那个实例而父类的实例的隐式原型__proto__又指…

js继承精益求精之寄生式组合继承

一.混合/组合继承的不足上一篇JS继承终于混合继承,认真思考一下,发现其还是有不足之处的: 空间上的冗余:在使用原型链的方法继承父类的原型属性(Animal.prototype)的同时,也在子类的原型(Person.prototype)中继承多了一份父类属性(Animal.property):具体来说:p与p.prototype中都保存了type,children,而p.prototype这一份是冗余的: 二.寄生式组合继承为了解决上面的问题,所以需要在混合继承的基础上进行改造.那么如何避免…

JavaScript构造函数+原型创建对象，原型链+借用构造函数模式继承父类练习

虽然经常说是做前端开发的,但常常使用的技术反而是JQuery比较多一点.在JavaScript的使用上相对而言少些.尤其是在创建对象使用原型链继承上面,在项目开发中很少用到.所以今天做个demo练习一下,以后忘记了也可以照搬一下. 说明一下: 1. Demo中使用的是构造函数+原型模式创建的对象.构造函数中存储对象实例使用的属性,原型模式增加实例使用的方法. 2. Demo中的继承分为两个方面.一个是属性继承,使用的是借用构造函数模式 call()方法.另一个是方法继承,这个就是使用原型方式继承…

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

#题记: 有一水果类,抽象出属性包括:name(水果品种),price(价格),id(ID号).现有两个子类,分别为苹果,桔子,希望继承水果父类. 一.构造函数继承构造函数继承相当把父类的属性在子类执行一遍(可以理解为复制一遍),代码如下: //父类:水果类 function Fruit(name, price, id) { this.name = name; this.price = price; this.id = id; } //苹果类 function Apple(name, pric…

js中的寄生组合继承

function inheritProperty(subType, superType) { function F(){} F.prototype = superType.prototype; superType.prototype.constructor = subType; subType.prototype = new F();} function SuperType(name) { this.name = name; this.colors = ['red', 'blue', 'gree…

JavaScript各种继承方式（二）：借用构造函数继承（constructor stealing）

一原理在子类的构造函数中,通过call ( ) 或 apply ( ) 的形式,调用父类的构造函数来实现继承. function Fruit(name){ this.name = name; this.eat = function(){ console.log('eat'); }; } Fruit.prototype.desc = function(){ console.log('desc'); }; function Mango(name,level){ Fruit.call(this,n…

重操JS旧业第八弹：面向对象与继承

js里面没有语言语法层面的继承机制,但这并不意味着js就不能实现继承,利用js属性和方法动态性来模拟实现继承,通过总结大概有如下方法实现: 1 原型链继承我们知道原型在对象中扮演着重要的角色,函数本身自带原型对象,通过对象创建便让对象拥有指向原型对象的指针,再次原型属性和方法的搜索覆盖机制,以及原型属性和方法的动态性实现原理:手动将对象的原型对象修改为要继承的对象,如: function Person(name,sex){ this.name=name; Person.prototype.s…

【JS继承之借用构造函数继承和组合继承】的更多相关文章