javaScript面向对象编程-继承（一）

YorkChen 发布于2019-08-23 12:02 / 2219人阅读

摘要：组合继承前面两种模式的特点类式继承通过子类的原型对父类实例化实现的，构造函数式继承是通过在子类的构造函数作用环境中执行一次父类的构造函数来实现的。

类有三部分

构造函数内的，供实例化对象复制用的

构造函数外的，直接通过点语法添加的，供类使用，实例化对象访问不到

类的原型中的，实例化对象可以通过其原型链间接地访问到，也是供所有实例化对象所共用的。

类式继承

类的原型对象的作用就是为类的原型添加共有方法，但类不能访问这些属性和方法，只有通过原型prototype来访问。

//类式继承
//声明父类
function SuperClass() {
    this.superValue = true;
}
//为父类添加共有方法
SuperClass.prototype.getSuperValue = function () {
    return this.superValue;
};
//声明子类
function SubClass() {
    this.subValue = false;
}
//继承父类
SubClass.prototype = new SuperClass();
//为子类添加共有方法
SubClass.prototype.getSubValue = function () {
    return this.subValue;
};
var instance = new SubClass();
console.log(instance.getSuperValue());//true可以这样使用子类
console.log(instance.getSubValue());//false
console.log(instance instanceof SuperClass);//true
console.log(instance instanceof SubClass);//true
console.log(SubClass instanceof SuperClass);//false

类式继承的两个缺点：
一、子类通过其原型prototype对父类实例化，继承了父类。父类的共有属性要是引用类型，就会在子类中被所有实例共用，一个子类的实例更改子类原型从父类构造函数中继承的共有属性就会直接影响其他子类。
二、由于子类实现的继承是靠其原型prototype对父类的实例化实现的，因此在创建父类的时候，无法向父类传递参数，在实例化父类的时候也无法对父类构造函数内的属性进行初始化。

构造函数继承

//构造函数式继承
//声明父类
function SuperClass(id) {
    //引用类型共有属性
    this.books = ["javascript","html","css"];
    //值类型共有属性
    this.id = id;
}
//父类声明原型方法
SuperClass.prototype.showBooks = function () {
    console.log(this.books);
}
//声明子类
function SubClass(id) {
    //继承父类
    SuperClass.call(this,id);//将子类的变量在父类中执行一遍
}
//创建第一个子类实例
var instance1 = new SubClass(10);
var instance2 = new SubClass(11);
instance1.books.push("设计模式");
console.log(instance1.books);//[ "javascript", "html", "css", "设计模式" ]
console.log(instance1.id);//10
console.log(instance2.books);//[ "javascript", "html", "css" ]
console.log(instance2.id);//11
instance1.showBooks();//[ "javascript", "html", "css", "设计模式" ]

由于这种类型的继承没有涉及原型prototype，所有父类的原型方法自然不会被子类继承，而如果想要被子类继承就必须放在构造函数中，这样创建的每个实例都会多带带拥有一份而不能共用，违背了代码复用原则。

组合继承

前面两种模式的特点：类式继承通过子类的原型prototype对父类实例化实现的，构造函数式继承是通过在子类的构造函数作用环境中执行一次父类的构造函数来实现的。组合继承同时做到了这两点。

//组合式继承
//声明父类
function SuperClass(name) {
    //值类型共有属性
    this.name = name;
    //引用类型共有属性
    this.books = ["html","css","javaScript"];
}
//父类原型共有方法
SuperClass.prototype.getName = function () {
    console.log(this.name);
}
//声明子类
function SubClass(name,time) {
    //构造函数式继承父类name属性
    SuperClass.call(this,name);
    //子类中新增共有属性
    this.time = time;
}
//类式继承 子类原型继承父类
SubClass.prototype = new SuperClass();
//子类原型方法
SubClass.prototype.getTime =function () {
    console.log(this.time);
}
var instance1 = new SubClass("js",2018);
instance1.books.push("设计模式");
console.log(instance1.books);//[ "html", "css", "javaScript", "设计模式" ]
instance1.getName();//js
instance1.getTime();//2018
var instance2 = new SubClass("css",2018);
console.log(instance2.books);//[ "html", "css", "javaScript" ]
instance2.getName();//css
instance2.getTime();//2018

缺点：在使用构造函数继承时执行了一遍父类的构造函数，而在实现子类原型的类式继承时又调用一遍父类构造器，因此父类构造器调用了两遍。

云服务器 GPU云服务器 javascript面向对象编程 javascript面向对象编程指南面向对象编程 javascript 面向对象

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

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

SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

李昌杰 2019-08-16 10:40 评论0 收藏0
SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

Lyux 2019-06-28 13:32 评论0 收藏0
SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

AaronYuan 2019-08-20 18:55 评论0 收藏0
JavaScript面向对象编程——面向对象

摘要：面向对象面向对象的概述面向对象是什么面向对象编程的全称是，简称。面向对象编程是用抽象方式创建基于现实世界模型的一种编程。面向对象编程可以看做是使用一系列对象相互协作的软件设计。面向对象编程的山歌主要的特征是封装继承多态。面向对象面向对象的概述面向对象是什么面向对象编程的全称是Object Oriented Programming，简称OOP。面向对象编程是用抽象方式创建基于现实...

SimonMa 2019-08-26 12:10 评论0 收藏0
JS对象(1)重新认识面向对象

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

superw 2019-08-21 11:17 评论0 收藏0
面向对象的 JavaScript

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

novo 2019-08-21 10:49 评论0 收藏0