面向对象的JavaScript之继承(一) 类式继承

forsigner 发布于2019-08-20 14:21 / 693人阅读

摘要：那你们肯定会问为什么共用，而没有共用呢，下面就给你解释，请看引用类型是共用的值类型是私用的。

引言

面向对象的编程语言都具继承这一机制,而 JavaScript 是基于原型(Prototype)面向对象程序设计,所以它的实现方式也是基于原型(Prototype)实现的.

继承的方式

类式继承

构造函数继承

组合继承

原型式继承

寄生式继承

寄生组合式继承

1.类式继承

//声明父类
function SuperClass(){
    //值类型
    this.superValue = true;
    //引用类型
    this.book = ["c","java","htnl"]
}

//为父类添加方法
SuperClass.prototype.getSuperValue =function(){
    return this.superValue;
}

//声明子类
function SubClass(){
    this.subValue = false;
}
//继承父类
SubClass.prototype = new SuperClass();

//为子类添加方法
SubClass.prototype.getSubValue = function(){
    return this.subValue;
}

//测试
var a = new SubClass(); 
var b = new SubClass(); 
console.log(a.getSubValue()); //false
console.log(a.getSuperValue());  //true

console.log(a.book);//["c", "java", "htnl"]
console.log(b.book);//["c", "java", "htnl"]
a.book.push("css");
console.log(a.book);//["c", "java", "htnl", "css"]
console.log(b.book);//["c", "java", "htnl", "css"]

console.log(a.getSuperValue())//true
console.log(b.getSuperValue())//true
a.superValue = "a";

console.log(a.getSuperValue())//a
console.log(b.getSuperValue())//true

console.log(a.getSubValue())//false
console.log(b.getSubValue())//false
a.subValue = "sub";

console.log(a.getSubValue())//sub
console.log(b.getSubValue())//false

通过测试可以得知类式继承有如下特点:

通过子类原型继承父类的实例实现继承.

子类实例的原型都是父类实例,所以 a b 都是用的是 父类的实例.所以它的属性共用(值类型,引用类型)。那你们肯定会问：为什么book 共用，而 subValue 没有共用呢，下面就给你解释，请看2

引用类型是共用的,值类型是私用的。

其实：值类型按理说应该和值类型一样，都是共用的，但是因为 this 的原因，this.superValue寻值时由近到远，先寻找 a，若 a 没有则寻找 a 的原型`prototype`,一直往上,若没有则返回`"undefined"`,这样你就知道为什么给a.book.push("css"); 之后 b.book 也发生了改变,因为它是寻找到原型上的 book 值,而a.superValue = "a"; 则直接给 a 添加了个 superValue 属性,而没有去 原型`prototype`的superValue赋值,则输出的时候也是就近.

下一节讲解面向对象的JavaScript之继承(二) 构造函数继承

参考

个人博客

JavaScript 设计模式 --- 张容铭著

注

本人对类式继承的一点点理解,若是那里解释的有问题,请多指教,谢谢!

云服务器 GPU云服务器 javascript类的继承 javascript继承 javascript继承方法 Javascript实现继承

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81570.html

面向对象的 JavaScript

摘要：是完全的面向对象语言，它们通过类的形式组织函数和变量，使之不能脱离对象存在。而在基于原型的面向对象方式中，对象则是依靠构造器利用原型构造出来的。 JavaScript 函数式脚本语言特性以及其看似随意的编写风格，导致长期以来人们对这一门语言的误解，即认为 JavaScript 不是一门面向对象的语言，或者只是部分具备一些面向对象的特征。本文将回归面向对象本意，从对语言感悟的角度阐述为什...

novo 2019-08-21 10:49 评论0 收藏0
javaScript面向对象编程-继承（一）

摘要：组合继承前面两种模式的特点类式继承通过子类的原型对父类实例化实现的，构造函数式继承是通过在子类的构造函数作用环境中执行一次父类的构造函数来实现的。类有三部分构造函数内的，供实例化对象复制用的构造函数外的，直接通过点语法添加的，供类使用，实例化对象访问不到类的原型中的，实例化对象可以通过其原型链间接地访问到，也是供所有实例化对象所共用的。类式继承类的原型对象的作用就是为类...

YorkChen 2019-08-23 12:02 评论0 收藏0
JS对象(1)重新认识面向对象

摘要：对象重新认识面向对象面向对象从设计模式上看，对象是计算机抽象现实世界的一种方式。除了字面式声明方式之外，允许通过构造器创建对象。每个构造器实际上是一个函数对象该函数对象含有一个属性用于实现基于原型的继承和共享属性。 title: JS对象(1)重新认识面向对象 date: 2016-10-05 tags: JavaScript 0x00 面向对象从设计模式上看，对象是...

superw 2019-08-21 11:17 评论0 收藏0
JavaScript面向对象编程-继承（三）

摘要：子类不是父类实例的问题是由类式继承引起的。所以寄生式继承和构造函数继承的组合又称为一种新的继承方式。但是这里的寄生式继承处理的不是对象，而是类的原型。看上去略微复杂，还得好好研究。寄生组合式继承（终极继承者）前面学习了类式继承和构造函数继承组合使用，也就是组合继承，但是这种继承方式有个问题，就是子类不是父类的实例，而子类的原型是父类的实例。子类不是父类实例的问题是由类式继承引起的。...

alaege 2019-08-23 12:04 评论0 收藏0
Javascript 设计模式读书笔记(三)——继承

摘要：的继承方式属于原型式继承，非常灵活。当使用关键字执行类的构造函数时，系统首先创建一个新对象，这个对象会继承自构造函数的原型对象新对象的原型就是构造函数的属性。也就是说，构造函数用来对生成的新对象进行一些处理，使这个新对象具有某些特定的属性。继承这个东西在Javascript中尤其复杂，我掌握得也不好，找工作面试的时候在这个问题上栽过跟头。Javascript的继承方式属于原型式继承，...

cangck_X 2019-08-21 12:16 评论0 收藏0