JS中面向对象的多种继承方式
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中面向对象的多种继承方式的更多相关文章
- JS中5种经典继承方式
继承 JS中继承的概念: 通过[某种方式]让一个对象可以访问到另一个对象中的属性和方法,我们把这种方式称之为继承 并不是所谓的xxx extends yyy 为什么要使用继承? 有些对象会有方法(动作 ...
- js中的几种继承方法
JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一. 继承:子承父业:一个原本没有某些方法或属性的对象,统一写方法,拿到了另外一个对象的属性和方法 下面是js中的几种继承方式 1.改变this ...
- 详解js中的寄生组合式继承
寄生组合式继承是js中最理想的继承方式, 最大限度的节省了内存空间. js中的寄生组合式继承要求是: 1.子对象有父对象属性的副本, 且这些不应该保存在子对象的prototype上. 2. ...
- js中的原型、继承的一些想法
最近看到一个别人写的js类库,突然对js中的原型及继承产生了一些想法,之前也看过其中的一些内容,但是总不是很清晰,这几天利用空闲时间,对这块理解了一下,感觉还是有不通之处,思路上没那么条理,仅作为分享 ...
- C++中的三种继承方式
1,被忽略的细节: 1,冒号( :)表示继承关系,Parent 表示被继承的类,public 的意义是什么? class Parent { }; class Child : public Parent ...
- js中面向对象(创建对象的几种方式)
1.面向对象编程(OOP)的特点: 抽象:抓住核心问题 封装:只能通过对象来访问方法 继承:从已有的对象下继承出新的对象 多态:多对象的不同形态 一.创建对象的几种方式 javascript 创建对象 ...
- js中面向对象(创建对象的几种方式)
1.面向对象编程(OOP)的特点: 抽象:抓住核心问题 封装:只能通过对象来访问方法 继承:从已有的对象下继承出新的对象 多态:多对象的不同形态 注:本文引用于 http://www.cnblogs. ...
- 关于js中原生构造函数的继承
前言 在如今快节奏的工作当中,很多基础的东西会渐渐地被丢掉.就如继承这个话题,写React的同学应该都是class xxx extends React.Component,然而这可以理解为es5的一个 ...
- JS中有关对象的继承以及实例化、浅拷贝深拷贝的奥秘
一.属性的归属问题 JS对象中定义的属性和方法如果不是挂在原型链上的方法和属性(直接通过如类似x的方式进行定义)都只是在该对象上,对原型链上的没有影响.对于所有实例共用的方法可直接定义在原型链上这样实 ...
- js中的封装、继承、多态
Javascript是一门解释型的语言,是基于对象的,并不是真正的面向对象的语言,对变量类型的应用也是宽松的,其实它同样可以模拟面向对象的功能: 1 function myfun1(){ 2 ...
随机推荐
- 《Effective C++》继承与面向对象设计
Item 32:确定你的public继承塑膜出is-a的关系 如果你令class D以public继承class B,你便是告诉编译器说,每一个类型为D的对象同时也是一种B对象,反之如果你需要一个D对 ...
- UOJ60.【UR #5】怎样提高智商
简要题意 谜题集中有 \(n\) 个谜题,第 \(i\) 个谜题形如: \(i.\) 编号小于 \(i\) 的题目中你选择了几个 \(h_i\)? A. \(a_i\) B. \(b_i\) C. \ ...
- 刷题笔记——3003.鸡兔同笼问题 & 2767.计算多项式的值
题目1 3003.鸡兔同笼问题 代码 while True: try: x,y=map(int,input().strip().split()) a = int((4*x-y) / 2) b = x ...
- 手把手教你图文并茂windows10安装VMware创建CentOS-7-x86_64运行linux系统
VMware是什么 VMWare (Virtual Machine ware)可以使你的计算机上同时运行几个系统.例如windows.DOS.LINUX等同时存在,可以将这些系统像程序似的随时切换,并 ...
- Vue项目 invalid host header 问题 配置 disableHostCheck:true报错
项目场景: 解决 Vue 项目 invalid host header 问题disableHostCheck:true报错 问题描述 使用内网穿透时出现 invalid host header 找了好 ...
- .NET周报 【2月第1期 2023-02-04】
国内文章 .NET 入门到高级路线 https://www.cnblogs.com/hejiale010426/archive/2023/02/01/17083913.html 笔者介绍了.NET入门 ...
- MySQL软件安装教程(windows系统)
目录 一.访问官网下载安装包 1.访问官网 2.点击DOWNLOADS 3.下拉页面,点击MySQL Community (GPL) Downloads » 4.接着点击MySQL Community ...
- activiti03 SSM使用activity
1.添加依赖 <!--activity依赖--> <dependency> <groupId>org.activiti</groupId> <ar ...
- 【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 [注意] ...
- 【ASP.NET Core】标记帮助器——抽象层
标记帮助器,即 Tag Helpers.这个嘛,就直接翻译了,叫"标记帮助器",虽然不好听,但只能这样了.当然你翻译为"标记增强器"也行. 所谓标记帮助器,就是 ...