JS本身是基于面向对象开发的编程语言,面向对象开发中最重要的一个概念就是类。

类具有三大特性:封装、继承、多态

封装:类也是个函数,函数的目的是把一个功能代码进行封装,以此实现“低耦合高内聚”

多态:重载和重写

  重写:子类重写父类上的方法(伴随着继承运行的)

  重载:相同的方法,由于参数或者返回值的不同,具备不同的功能(js中不具备严格意义上的重载,js中的重载,在方法内部进行逻辑判断,根据参数的不同的功能)

继承:子类继承父类的属性和方法。在js中的继承和其他编程语言不太一样

继承的目的:让子类的实例同时也具备父类中私有的属性和公共方法

js中实现继承的方法:原型继承

1、原型继承:让子类的原型等于父类的实例

function parent() {
this.x = 100;
}
parent.prototype.getX = function getX() {
return this.x
} function son() {
this.y = 200;
}
son.prototype = new Parent(); // 实现继承关键
son.prototype.getY = function getY() {
return this.y
} let c1 = new son();
console.log(c1);

原型继承的特点:

父类中私有的和公有的方法,最后都变为子类公有的

原型链继承不会把父类的属性和方法拷贝给子类,而是让子类实例基于__proto__原型链找到自己定义的属性和方法

c1.__proto__.xxx = xxx,修改子类原型(原有父类的一个实例)中的内容,对子类的其他实例有影响,但是对父类的实例不会有影响

son.prototype.__proto__ === parent.prototype

2、call继承

function parent() {
this.x = 100;
}
parent.prototype.getX = function getX() {
return this.x
} function son() {
this.y = 200;
parent.call(this); // 关键点
}
son.prototype.getY = function getY() {
return this.y
} let c1 = new son();
console.log(c1);

call继承特点:

改变this,让父类中的this变成子类的一个实例,这样父类中的私有属性变成了子类实例的私有属性

只能继承父类中的私有的,不能继承父类中公共的

我们需要的是父类私有的变为子类私有的,父类公有的变为子类公有的

3、组合式继承(call继承 + )

function parent() {
this.x = 100;
}
parent.prototype.getX = function getX() {
return this.x
} function son() {
this.y = 200;
parent.call(this); // 关键点
}
son.prototype.__proto__ = parent.prototype // 关键点
// 不支持__proto__的浏览器中使用Object.create(对象)
// Object.create()创建一个空对象,让其原型(__proto__)指向这个对象
// 上述代码就变成
son.prototype = Object.create(parent.prototype);

son.prototype.constructor = son;
son.prototype.getY = function getY() {
return this.y
} let c1 = new son();
console.log(c1);

核心思想:原型继承的另外一个写法,用的不是父类的实例,而是修改子类的原型,指向父类的prototype

es6中的继承extends类似于寄生组合继承

class parent {
constructor() {
// 私有属性
this.x = 100;
}
// parent.prototype.getX = fuunction ...
// 往原型上写方法
getX() {}
} class son extends parent {
constructor() {
super();
this.y = 200;
}
getY() {
return this.y
}
}

super()执行,类似于parent.prototype.constructor.call(this),如果我们往super中传参数,super(100, 200),类似于把parent中的constructor执行,传递了100和200

JS中面向对象的多种继承方式的更多相关文章

  1. JS中5种经典继承方式

    继承 JS中继承的概念: 通过[某种方式]让一个对象可以访问到另一个对象中的属性和方法,我们把这种方式称之为继承 并不是所谓的xxx extends yyy 为什么要使用继承? 有些对象会有方法(动作 ...

  2. js中的几种继承方法

    JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一. 继承:子承父业:一个原本没有某些方法或属性的对象,统一写方法,拿到了另外一个对象的属性和方法 下面是js中的几种继承方式 1.改变this ...

  3. 详解js中的寄生组合式继承

    寄生组合式继承是js中最理想的继承方式, 最大限度的节省了内存空间. js中的寄生组合式继承要求是: 1.子对象有父对象属性的副本, 且这些不应该保存在子对象的prototype上.       2. ...

  4. js中的原型、继承的一些想法

    最近看到一个别人写的js类库,突然对js中的原型及继承产生了一些想法,之前也看过其中的一些内容,但是总不是很清晰,这几天利用空闲时间,对这块理解了一下,感觉还是有不通之处,思路上没那么条理,仅作为分享 ...

  5. C++中的三种继承方式

    1,被忽略的细节: 1,冒号( :)表示继承关系,Parent 表示被继承的类,public 的意义是什么? class Parent { }; class Child : public Parent ...

  6. js中面向对象(创建对象的几种方式)

    1.面向对象编程(OOP)的特点: 抽象:抓住核心问题 封装:只能通过对象来访问方法 继承:从已有的对象下继承出新的对象 多态:多对象的不同形态 一.创建对象的几种方式 javascript 创建对象 ...

  7. js中面向对象(创建对象的几种方式)

    1.面向对象编程(OOP)的特点: 抽象:抓住核心问题 封装:只能通过对象来访问方法 继承:从已有的对象下继承出新的对象 多态:多对象的不同形态 注:本文引用于 http://www.cnblogs. ...

  8. 关于js中原生构造函数的继承

    前言 在如今快节奏的工作当中,很多基础的东西会渐渐地被丢掉.就如继承这个话题,写React的同学应该都是class xxx extends React.Component,然而这可以理解为es5的一个 ...

  9. JS中有关对象的继承以及实例化、浅拷贝深拷贝的奥秘

    一.属性的归属问题 JS对象中定义的属性和方法如果不是挂在原型链上的方法和属性(直接通过如类似x的方式进行定义)都只是在该对象上,对原型链上的没有影响.对于所有实例共用的方法可直接定义在原型链上这样实 ...

  10. js中的封装、继承、多态

    Javascript是一门解释型的语言,是基于对象的,并不是真正的面向对象的语言,对变量类型的应用也是宽松的,其实它同样可以模拟面向对象的功能:  1 function myfun1(){  2    ...

随机推荐

  1. 《Effective C++》继承与面向对象设计

    Item 32:确定你的public继承塑膜出is-a的关系 如果你令class D以public继承class B,你便是告诉编译器说,每一个类型为D的对象同时也是一种B对象,反之如果你需要一个D对 ...

  2. UOJ60.【UR #5】怎样提高智商

    简要题意 谜题集中有 \(n\) 个谜题,第 \(i\) 个谜题形如: \(i.\) 编号小于 \(i\) 的题目中你选择了几个 \(h_i\)? A. \(a_i\) B. \(b_i\) C. \ ...

  3. 刷题笔记——3003.鸡兔同笼问题 & 2767.计算多项式的值

    题目1 3003.鸡兔同笼问题 代码 while True: try: x,y=map(int,input().strip().split()) a = int((4*x-y) / 2) b = x ...

  4. 手把手教你图文并茂windows10安装VMware创建CentOS-7-x86_64运行linux系统

    VMware是什么 VMWare (Virtual Machine ware)可以使你的计算机上同时运行几个系统.例如windows.DOS.LINUX等同时存在,可以将这些系统像程序似的随时切换,并 ...

  5. Vue项目 invalid host header 问题 配置 disableHostCheck:true报错

    项目场景: 解决 Vue 项目 invalid host header 问题disableHostCheck:true报错 问题描述 使用内网穿透时出现 invalid host header 找了好 ...

  6. .NET周报 【2月第1期 2023-02-04】

    国内文章 .NET 入门到高级路线 https://www.cnblogs.com/hejiale010426/archive/2023/02/01/17083913.html 笔者介绍了.NET入门 ...

  7. MySQL软件安装教程(windows系统)

    目录 一.访问官网下载安装包 1.访问官网 2.点击DOWNLOADS 3.下拉页面,点击MySQL Community (GPL) Downloads » 4.接着点击MySQL Community ...

  8. activiti03 SSM使用activity

    1.添加依赖 <!--activity依赖--> <dependency> <groupId>org.activiti</groupId> <ar ...

  9. 【CodeSmith】The System.Data.SQLite library is not installed on this computer,不能使用SQLite解决办法

    1.出现问题原因 1)System.Data.SQLite 尚未安装在您的计算机上 2)System.Data.SQLite 尚未正确配置 2.下载并安装System.Data.Sqlite [注意] ...

  10. 【ASP.NET Core】标记帮助器——抽象层

    标记帮助器,即 Tag Helpers.这个嘛,就直接翻译了,叫"标记帮助器",虽然不好听,但只能这样了.当然你翻译为"标记增强器"也行. 所谓标记帮助器,就是 ...