Java高级工程师特别熟悉的js基础 | 面向对象编程/原型链/继承

news2024/11/17 4:41:02

面向对象编程/原型链/继承

面向对象编程

什么是面向对象编程？

面向对象是⼀种编程思想，经常被拿来和⾯面向过程⽐比较。其实说的简单点，面向过程关注的重点是动词，是分析出解决问题需要的步骤，然后编写函数实现每个步骤，最后依次调⽤用函数。而面向对象关注的重点是主谓，是把构成问题的事物拆解为各个对象，⽽而拆解出对象的目的也不是为了实现某个步骤，而是为了了描述这个事物在当前问题中的各种行为。

面向对象的特点是什么？是

封装：让使用对象的⼈不考虑内部实现，只考虑功能使用 把内部的代码保护起来，只留出一些 api 接口供用户使用
继承：就是为了代码的复用，从父类上继承出一些方法和属性，子类也有自己的一些属性
多态：是不同对象作用于同一操作产生不同的效果。多态的思想实际上是把“想做什么”和“谁去做“分开
比如下棋的过程,
面向过程是这样的：开局->白方下棋->棋盘展示->检查胜负->黑方下棋->棋盘展示->检查胜负->循环
用代码表示可能是一连串函数的调用
init();
whitePlay(); // 里面实现一遍下棋的操作
repaint(); // 棋盘展示
check();
blackPlay(); // 再单独实现一遍下棋的操作
repaint(); // 棋盘展示
check();

面向对象是这样的：棋盘->开局 ->选⼿->下棋-> 棋盘->重新展示-> 棋盘->检查胜负 ->选⼿下棋盘->重新展示棋盘->检查胜负
用代码表示可能是这样的
const checkerBoard = new CheckerBoard(); // CheckerBoard 类内部封账了了棋盘的操作，⽐如初始化棋盘，检查胜负关系等
const whitePlayer = new Player(‘white’); // Player 类内部封装了了各种玩家的操作，比如等待，落棋，悔棋
const blackPlayer = new Player(‘black’);
whitePlayer.start(); // start 方法的结束，内部封装了或者通过事件发布触发
checkerBoard.repaint(), checkerBoard.check()的调用blackPlayer.start();
你只需要调用 new 一个 player, 然后调用 start ⽅方法，也就是说我们只需要关注行为，而不需要知道内部到底做了什么。
而且如果要加一些新功能，比如悔棋，比如再加一个玩家，面向对象都很好扩展。在上面的例例子中，面向对象的特性是怎么表现出来的呢？
封装：Player, CheckerBoard 类，使⽤用的时候并不不需要知道内部实现了了什么，只需要考虑暴露出的 api 的使用
继承：whitePlayer 和 blackPlayer 都继承自 Player，都可以直接使用 Player 的各种⽅方法和属性
多态：whitePlayer.start() 和 blackPlayer.start() 下棋的颜色分别是白色和黑色什么时候适合使用⾯面向对象
可以看出来，在比较复杂的问题面前，或者参与方较多的时候，面向对象的编程思想可以很好的简化问题，并且能够更更好的扩展和维护。
而在⽐比较简单的问题面前，面向对象和面向过程其实差异并不明显，也可以一步一步地按照步骤来调用。

Js 中的⾯面向对象

对象包含什什么

方法
属性

一些内置对象

Object Array Date Function RegExp

创建对象

  1. 普通⽅方式
    每一个新对象都要重新写一遍 color 和 start 的赋值
const Player = new Object();
	Player.color = "white";
	Player.start = function () {
	console.log("white下棋");
};

或者工厂模式，这两种方式都无法识别对象类型，比如 Player 的类型只是 Object

function createObject() {
	const Player = new Object();
	Player.color = "white";
	Player.start = function () {
		console.log("white下棋");
	};
	return Player;
}
  1. 构造函数/实例
    通过 this 添加的属性和方法总是指向当前对象的，所以在实例例化的时候，通过 this 添加的属
    性和方法都会在内存中复制一份，这样就会造成内存的浪费。
    但是这样创建的好处是即使改变了某一个对象的属性或方法，不会影响其他的对象（因为每一
    个对象都是复制的一份）
function Player(color) {
	this.color = color;
	this.start = function () {
		console.log(color + "下棋");
	};
}
const whitePlayer = new Player("white");
const blackPlayer = new Player("black");

Tips. 怎么看函数是不是在内存中创建了次呢？
比如 2. 构造函数中，我们可以看到 whitePlayer.start === blackPlayer.start // 输出 false

  1. 原型
    通过原型继承方法并不是自身的，我们要在原型链上一层一层的查找，这样创建的好处是只在内存中创建一次，实例例化的对象都会指向这个 prototype 对象。
function Player(color) {
	this.color = color;
}
Player.prototype.start = function () {
	console.log(color + "下棋");
};
const whitePlayer = new Player("white");
const blackPlayer = new Player("black");
  1. 静态属性
    是绑定在构造函数上的属性方法，需要通过构造函数访问
    比如我们想看一下一共创建了多少个玩家的实例
function Player(color) {
this.color = color;
if (!Player.total) {
	Player.total = 0;
}
Player.total++;
}
let p1 = new Player("white");
console.log(Player.total); // 1
let p2 = new Player("black");
console.log(Player.total); // 2

原型及原型链

在原型上添加属性或者⽅方法有什么好处？
刚才已经说过了，如果不通过原型的方式，每生成一个新对象，都会在内存中新开辟一块存储空间，当对象变多之后，性能会变得很差。
但是通过

Player.prototype.xx = function () {};
Player.prototype.xx = function () {};
Player.prototype.xx = function () {};

这种方式向原型对象添加属性或者方法的话，又显得非常麻烦。所以我们可以这样写

Player.prototype = {
	start: function () {
	console.log("下棋");
},
revert: function () {
	console.log("悔悔棋");
},
};
怎么找到 Player 的原型对象？
function Player(color) {
	this.color = color;
}
Player.prototype.start = function () {
	console.log(color + "下棋");
};
const whitePlayer = new Player("white");
const blackPlayer = new Player("black");
console.log(blackPlayer.__proto__); // Player {}
console.log(Object.getPrototypeOf(blackPlayer)); // Player {}，可以通过
Object.getPrototypeOf来获取__proto__
console.log(Player.prototype); // Player {}
console.log(Player.__proto__); // [Function]

可以看一下 prototype.png 原型的流程图
在这里插入图片描述
那么 new 关键字到底做了什么？

  1. ⼀一个继承⾃自 Player.prototype 的新对象 whitePlayer 被创建
  2. whitePlayer.proto 指向 Player.prototype，即 whitePlayer.proto = Player.prototype
  3. 将 this 指向新创建的对象 whitePlayer
  4. 返回新对象
    4.1 如果构造函数没有显式返回值，则返回 this
    4.2 如果构造函数有显式返回值，是基本类型，比如 number,string,boolean, 那么还是返回this
    4.3 如果构造函数有显式返回值，是对象类型，比如{ a: 1 }, 则返回这个对象{ a: 1 }

后面看一下怎么手写实现 new 函数

// 1. 用new Object() 的方式新建了一个对象 obj
// 2. 取出第一个参数，就是我们要传入的构造函数。此外因为 shift 会修改原数组，所以arguments 会被去除第一个参数
// 3. 将 obj 的原型指向构造函数，这样 obj 就可以访问到构造函数原型中的属性
// 4. 使⽤用 apply，改变构造函数 this 的指向到新建的对象，这样 obj 就可以访问到构造函数中的属性
// 5. 返回 obj

	function objectFactory() {
		let obj = new Object();
		let Constructor = [].shift.call(arguments);
		obj.__proto__ = Constructor.prototype;
		let ret = Constructor.apply(obj, arguments);
		return typeof ret === "object" ? ret : obj;
}

原型链又是什么呢？

我们都知道当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还
查不到，就去找原型的原型一直找到最顶层为止。
举个例子

function Player() {}
	Player.prototype.name = "Kevin";
	var p1 = new Player();
	p1.name = "Daisy";
	// 查找p1对象中的name属性，因为上⾯面添加了了name，所以会输出“Daisy”
	console.log(p1.name); // Daisy
	delete p1.name;
	// 删除了了p1.name，然后查找p1发现没有name属性，就会从p1的原型p1.__proto__中去找，也就是Player.prototype，然后找到了name，输出"Kevin"
	console.log(p1.name); // Kevin 那如果我们在 Player.prototype 中也找不不到 name 属性呢,那么就会去 Player.prototype.proto中去寻找，也就是{}。
	Object.prototype.name = "root";
	function Player() {}
	Player.prototype.name = "Kevin";
	var p1 = new Player();
	p1.name = "Daisy";
	// 查找p1对象中的name属性，因为上⾯面添加了name，所以会输出“Daisy”
	console.log(p1.name); // Daisy
	delete p1.name;
	// 删除了了p1.name，然后查找p1发现没有name属性，就会从p1的原型p1.__proto__中去找，也就是Player.prototype，然后找到了name，输出"Kevin"
	console.log(p1.name); // Kevin
	delete Player.prototype.name;
	console.log(p1.name);

}

这样一条通过proto和 prototype 去连接的对象的链条，就是原型链

继承

原型链继承
实现

function Parent() {
	this.name = "parentName";
}
Parent.prototype.getName = function () {
	console.log(this.name);
};
function Child() {}
// Parent的实例同时包含实例属性方法和原型属性方法，所以把new Parent()赋值给Child.prototype。
// 如果仅仅Child.prototype = Parent.prototype，那么Child只能调用getName，无法调用.name
// 当Child.prototype = new Parent()后， 如果new Child()得到一个实例例对象child，那么
// child.__proto__ === Child.prototype;
// Child.prototype.__proto__ === Parent.prototype
// 也就意味着在访问child对象的属性时，如果在child上找不到，就会去Child.prototype去找，如
果还找不到，就会去Parent.prototype中去找，从而实现了了继承。Child.prototype = new Parent();
// 因为constructor属性是包含在prototype⾥里里的，上⾯面重新赋值了prototype，所以会导致Child的
constructor指向[Function: Parent]，有的时候使⽤用child1.constructor判断类型的时候就会出问题
// 为了了保证类型正确，我们需要将Child.prototype.constructor 指向他原本的构造函数Child
Child.prototype.constructor = Child;
var child1 = new Child();
child1.getName(); // parentName

隐含的问题

  1. 如果有属性是引⽤用类型的，⼀一旦某个实例例修改了了这个属性，所有实例例都会受到影响
function Parent() {
	this.actions = ["eat", "run"];
}
function Child() {}
Child.prototype = new Parent();
Child.prototype.constructor = Child;
const child1 = new Child();
const child2 = new Child();
child1.actions.pop();
console.log(child1.actions); // ['eat']
console.log(child2.actions); // ['eat']
  1. 创建 Child 实例例的时候，不能传参构造函数继承
    看到上面的问题 1，我们想一下该怎么解决呢？
    能不能想办法把 Parent 上的属性方法，添加到 Child 上呢？⽽而不是都存在原型对象上，防止
    被所有实例例共享。
    实现
    针对问题 1. 我们可以使⽤用 call 来复制⼀一遍 Parent 上的操作
function Parent() {
	this.actions = ["eat", "run"];
	this.name = "parentName";
}
function Child() {
	Parent.call(this);
}
const child1 = new Child();
const child2 = new Child();
child1.actions.pop();
console.log(child1.actions); // ['eat']
console.log(child1.actions); // ['eat', 'run']
针对问题 2. 我们应该怎么传参呢？
function Parent(name, actions) {
	this.actions = actions;
	this.name = name;
}
function Child(id, name, actions) {
	Parent.call(this, name); // 如果想直接传多个参数, 可以Parent.apply(this,
	Array.from(arguments).slice(1));
	this.id = id;
}
const child1 = new Child(1, "c1", ["eat"]);
const child2 = new Child(2, "c2", ["sing", "jump", "rap"]);
console.log(child1.name); // { actions: [ 'eat' ], name: 'c1', id: 1 }
console.log(child2.name); // { actions: [ 'sing', 'jump', 'rap' ], name: 'c2',id: 2 }

隐含的问题
属性或者方法想被继承的话，只能在构造函数中定义。⽽而如果方法在构造函数内定义了了，那么
每次创建实例都会创建一遍方法，多占一块内存。

function Parent(name, actions) {
	this.actions = actions;
	this.name = name;
	this.eat = function () {
	console.log(`${name} - eat`);
	};
}
function Child(id) {
	Parent.apply(this, Array.prototype.slice.call(arguments, 1));
	this.id = id;
}
const child1 = new Child(1, "c1", ["eat"]);
const child2 = new Child(2, "c2", ["sing", "jump", "rap"]);
console.log(child1.eat === child2.eat); // false

组合继承
通过原型链继承我们实现了基本的继承，方法存在 prototype 上，子类可以直接调用。但是引用类型的属性会被所有实例共享，并且不能传参。通过构造函数继承，我们解决了上面的两个问题：使用 call 在子构造函数内重复一遍属性和方法创建的操作，并且可以传参了。
但是构造函数同样带来了一个问题，就是构造函数内重复创建方法，导致内存占用过多。是不是突然发现原型链继承是可以解决方法重复创建的问题？ 所以我们将这两种方式结合起来，这就叫做组合继承
实现

function Parent(name, actions) {
	this.name = name;
	this.actions = actions;
}
Parent.prototype.eat = function () {
	console.log(`${this.name} - eat`);
};
function Child(id) {
	Parent.apply(this, Array.from(arguments).slice(1));
	this.id = id;
}
Child.prototype = new Parent();
Child.prototype.constructor = Child;
const child1 = new Child(1, "c1", ["hahahahahhah"]);
const child2 = new Child(2, "c2", ["xixixixixixx"]);
child1.eat(); // c1 - eat
child2.eat(); // c2 - eat
console.log(child1.eat === child2.eat); // true

隐含的问题
调⽤用了两次构造函数，做了了重复的操作

  1. Parent.apply(this, Array.from(arguments).slice(1));
  2. Child.prototype = new Parent();
    寄生组合式继承
    上面重复调用了 2 次构造函数，想一下，我们可以精简掉哪一步？
    我们可以考虑让 Child.prototype 间接访问到 Parent.prototype
    实现
function Parent(name, actions) {
	this.name = name;
	this.actions = actions;
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/398943.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

WIFI标签操作步骤

WIFI标签操作步骤

1. 打开并设置手机WIFI热点，设置SSID为ESL，密码为123456789（如下图） ​ 2. 运行APP，设置要接入的WIFI名称密码等信息（如下图） ​ 3. 长按背面按键（长按2-3秒）&#xff0c…
阅读更多...
TypeScript 深度剖析:TypeScript 的理解？与 JavaScript 的区别？

TypeScript 深度剖析:TypeScript 的理解？与 JavaScript 的区别？

一、是什么 TypeScript 是 JavaScript 的类型的超集，支持ES6语法，支持面向对象编程的概念，如类、接口、继承、泛型等 超集，不得不说另外一个概念，子集，怎么理解这两个呢，举个例子，如…
阅读更多...
MYSQL 最大连接数

MYSQL 最大连接数

MYSQL 最大连接数？ 最大连接数也就是mysql服务最大支持多少客户端连接服务 查看服务支持最大连接数： show variables like %max_connections%;如下: 如何查看 MYSQL 服务被多少个客户端连接了？ show processlist;如下： 其中 …
阅读更多...
数位dp--Windy数

数位dp--Windy数

题目 思路 大体思路其实也跟第一篇博客类似，用前缀和的思想处理区间的方案数，然后求方案数则是通过把每一位数都拆分来，然后根据两种选择0-an-1和选an两种情况进行判断，但是因为前导零会对结果产生不一样的结果（比如0…
阅读更多...
企业的ICP域名注册，你知道吗？

企业的ICP域名注册，你知道吗？

ICP域名备案查询的api接口，是企业在短时间内获得中沃公司最新数据的API接口。还可以帮助用户快速了解公司信息。基于域名的注册信息实时查询，适合对注册信息变更及时性要求较高的用户。通过ICP信息可以确认企业在互联网中的更多活动轨迹。企业的ICP域名注…
阅读更多...
漏洞分析丨cve20110104

漏洞分析丨cve20110104

作者丨黑蛋目标程序调试工具16进制编辑器XP SP3office 2003ollydbg010Editor三、漏洞验证首先我们配置环境，并下载poc：使用ollydbg附加office excel 2003：打开poc可以看到发生了访问违规异常，像地址0x51453844中写入时发生异常&am…
阅读更多...
【专项训练】分治、回溯

【专项训练】分治、回溯

分治、回溯其实就是递归，只是是递归的一个细分，是一种特殊的递归 碰到一个题目，你就找他的重复性 最近重复性：根据重复性怎么构造以及如何分解，包括：分治、回溯 最优重复性：动态规划 本质：找重复性、分解问题、组合子问题的结果 回溯：试错！ 50. Pow(x, n) https:…
阅读更多...
sivalco使用测试pin正向导通

sivalco使用测试pin正向导通

在学完功率半导体器件后，为了能够更好的了解功率半导体器件内部的相关性质，于是利用sivalco软件进行仿真，对于器件工作时相关数据进行分析，对于相关语句进行学习。 在功率半导体中以N或者P半导体进行掺杂获得我们所需要的器件&…
阅读更多...
linux重置root用户密码

linux重置root用户密码

重置root密码 法一：rd.break 第 1 步：重启系统编辑内核参数 第 2 步：找到 linux 这行，在此行末尾空格后输入rd.break （End键也可直接进入行尾） 成功后显示页面为： 第 3 步：查看。…
阅读更多...
华为HCIE学习之Openstack Cinder组件（cinder对接glusterfs）

华为HCIE学习之Openstack Cinder组件（cinder对接glusterfs）

文章目录一、MQ的作用二、cinder架构图三、各组件的作用四、cinder对接glusterfs一、MQ的作用 服务内各组件交互通过MQ进行 二、cinder架构图 IET，Linux用软件做存储，CNA识别过去就是IETTGT，物理存储，CNA识别过去就是TGT 三、…
阅读更多...
十、FilterListenerAjax案例

十、FilterListenerAjax案例

1，Filter 1.1 Filter概述 Filter 表示过滤器，是 JavaWeb 三大组件(Servlet、Filter、Listener)之一。Servlet 我们之前都已经学习过了，Filter和Listener 我们今天都会进行学习。 过滤器可以把对资源的请求拦截下来，从而实现一些…
阅读更多...
公司的代理怎么用

公司的代理怎么用

前一阵子用公司的服务器玩docker的时候，发现拉取不了远程镜像。咨询了一下网络管理员，说是非常时期，外网权限全部关闭。这严重阻碍了我的求知欲望。于是想到了使用代理。这里简单解释一下，很多大型公司为了确保网络安全&#xff0…
阅读更多...
2-6 SpringCloud快速开发入门: Eureka 服务注册中心发现与消费服务

2-6 SpringCloud快速开发入门: Eureka 服务注册中心发现与消费服务

接上一章节向Eureka 服务注册中心注册服务，这里讲讲Eureka 服务注册中心发现与消费服务 Eureka 服务注册中心发现与消费服务 我们已经搭建一个服务注册中心，同时也向这个服务注册中心注册了服务，接下来我们就可以发现和消费服务了&#xff0…
阅读更多...
图像分割（Unet算法学习笔记）

图像分割（Unet算法学习笔记）

知识提要 数据集使用VOC2012 CNN 卷积神经网络Convolutional Neural Network GPU图像处理单元Graphic Processing Unit)图形处理器 convolution 卷积 ReLU全名Rectified Linear Unit，意思是修正线性单元 bn全称Batch Normalization批标准化 FC全连接神经网络是一种…
阅读更多...
打怪升级之CFile类

打怪升级之CFile类

CFile类 信息源自官方文档：https://learn.microsoft.com/zh-cn/cpp/mfc/reference/cfile-class?viewmsvc-170。 CFile是Microsoft 基础类文件类的基类。它直接提供非缓冲的二进制磁盘输入/输出设备，并直接地通过派生类支持文本文件和内存文件。CFile与…
阅读更多...
第二天作业docker安装

第二天作业docker安装

目录 一Docker的简介、下载 二Docker的安装： 2.1 上传安装包：通过xftp直接将包拖拽到Linux里面即可 2.2 安装： 2.3 启动docker 2.4 配置Docker的镜像加速器： 2.5 刷新守护进程: 2.6 重启docker： 2.7 效验配置是否成功 …
阅读更多...
三板斧解决leetcode的链表题

三板斧解决leetcode的链表题

在《波奇学单链表》中我们提到单链表的两个特点单向性。头节点尾节点的特殊性导致分类讨论的情况。如何看单链表？让我们简化成下图cur表示当前节点，下图表示cur移动，圆圈表示值用哨兵卫节点(新的头节点)和把尾节点看成NULL来把头尾节点一般化…
阅读更多...
spring的beanfactory与applicationContext的区别以及继承关系

spring的beanfactory与applicationContext的区别以及继承关系

applicationContext继承关系 首先可以看一张图 ListableBeanFactory 可列举的bean工厂 hierarchical 分层bean工厂 messageSource 国际化信息 //国际化（internationalization）是设计和…
阅读更多...
1.2 绝对误差、相对误差与有效数字

1.2 绝对误差、相对误差与有效数字

1.2.1 绝对误差和绝对误差限若x*为准确值x的一个近似值，则称 x-x*为近似值x*的绝对误差，简称误差，并用e*(x)表示，即e*(x)x-x*绝对误差虽然能清楚地表明近似值,与准确值,之间的差异，但是在实际问题中,往往无法知道准确值…
阅读更多...
2023年3月全国数据治理工程师认证DAMA-CDGA/CDGP考试怎么通过？

2023年3月全国数据治理工程师认证DAMA-CDGA/CDGP考试怎么通过？

弘博创新是DAMA中国授权的数据治理人才培养基地，贴合市场需求定制教学体系，采用行业资深名师授课，理论与实践案例相结合，快速全面提升个人/企业数据治理专业知识与实践经验，通过考试还能获得数据专业领域证书。 DAMA认…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023