JavaScript高级程序设计(第四版)--学习记录之对象、类和面向对象编程(中)

news2025/2/27 23:05:03

创建对象方式

工厂模式:用于抽象创建特定对象的过程。可以解决创建多个类似对象的问题,但没有解决对象标识问题。(即新创建的对象是什么类型)

function createPerson(name, age, job) { 
 let o = new Object(); 
 o.name = name; 
 o.age = age; 
 o.job = job; 
 o.sayName = function() { 
 console.log(this.name); 
 }; 
 return o; 
} 
let person1 = createPerson("Nicholas", 29, "Software Engineer"); 
let person2 = createPerson("Greg", 27, "Doctor");

构造函数模式:用于创建特定类型对象。构造函数名称的首字母都是要大写的,用来区分非构造函数。

function Person(name, age, job){ 
 this.name = name; 
 this.age = age; 
 this.job = job; 
 this.sayName = function() { 
 console.log(this.name); 
 }; 
} 
let person1 = new Person("Nicholas", 29, "Software Engineer"); 
let person2 = new Person("Greg", 27, "Doctor"); 
person1.sayName(); // Nicholas 
person2.sayName(); // Greg

原型模式:每个函数都会创建一个prototype属性,这个属性是一个对象,包含应该由特定引用类型的实例共享的属性和方法。使用原型对象的好处是,在它上面定义的属性和方法可以被对象实例共享。

function Person() {} 
Person.prototype.name = "Nicholas"; 
Person.prototype.age = 29; 
Person.prototype.job = "Software Engineer"; 
Person.prototype.sayName = function() { 
 console.log(this.name); 
}; 
let person1 = new Person(); 
person1.sayName(); // "Nicholas" 
let person2 = new Person(); 
person2.sayName(); // "Nicholas" 
console.log(person1.sayName == person2.sayName); // true

继承的方式:接口继承和实现继承。接口继承在 ECMAScript 中是不可能的,因为函数没有签名。实现继承是 ECMAScript 唯一支持的继承方式,而这主要是通过原型链实现的。

原型链 

其基本思想就是通过原型继承多个引用类型的属性和方法。
function SuperType() { 
 this.property = true; 
} 
SuperType.prototype.getSuperValue = function() { 
 return this.property; 
}; 
function SubType() { 
 this.subproperty = false; 
} 
// 继承 SuperType 
SubType.prototype = new SuperType(); 
SubType.prototype.getSubValue = function () {
return this.subproperty; 
}; 
let instance = new SubType(); 
console.log(instance.getSuperValue()); // true

原型链虽然是实现继承的强大工具,但它也有问题。问题一:出现在原型中包含引用值的时候。前面在谈到原型的问题时也提到过,原型中包含的引用值会在所有实例间共享,这也是为什么属性通常会在构造函数中定义而不会定义在原型上的原因。在使用原型实现继承时,原型实际上变成了另一个类型的实例。这意味着原先的实例属性摇身一变成为了原型属性。
问题二:子类型在实例化时不能给父类型的构造函数传参。
function SuperType() { 
 this.colors = ["red", "blue", "green"]; 
} 
function SubType() {} 
// 继承 SuperType 
SubType.prototype = new SuperType(); 
let instance1 = new SubType(); 
instance1.colors.push("black"); 
console.log(instance1.colors); // "red,blue,green,black" 
let instance2 = new SubType(); 
console.log(instance2.colors); // "red,blue,green,black"

解决原型包含引用值导致的继承问题

盗用构造函数:在子类构造函数中调用父类构造函数。优点可以在子类构造函数中向父类构造函数传参。缺点:必须在构造函数中定义方法,因此函数不能重用。

function SuperType(name){ 
 this.name = name; 
} 
function SubType() { 
 // 继承 SuperType 并传参
 SuperType.call(this, "Nicholas"); 
 // 实例属性
 this.age = 29; 
} 
let instance = new SubType(); 
console.log(instance.name); // "Nicholas"; 
console.log(instance.age); // 29

 组合继承:综合了原型链和盗用构造函数,使用原型链继承原型上的属性和方法,通过盗用构造函数继承实例属性。

function SuperType(name){ 
 this.name = name; 
 this.colors = ["red", "blue", "green"]; 
} 
SuperType.prototype.sayName = function() { 
 console.log(this.name); 
}; 
function SubType(name, age){ 
 // 继承属性
 SuperType.call(this, name); 
 this.age = age; 
} 
// 继承方法
SubType.prototype = new SuperType(); 
SubType.prototype.sayAge = function() { 
 console.log(this.age); 
}; 
let instance1 = new SubType("Nicholas", 29); 
instance1.colors.push("black"); 
console.log(instance1.colors); // "red,blue,green,black" 
instance1.sayName(); // "Nicholas"; 
instance1.sayAge(); // 29 
let instance2 = new SubType("Greg", 27); 
console.log(instance2.colors); // "red,blue,green" 
instance2.sayName(); // "Greg"; 
instance2.sayAge(); // 27

原型式继承

ES5通过增加 Object.create()方法将原型式继承的概念规范化了,这个方法接收两个

参数:作为新对象原型的对象,以及给新对象定义额外属性的对象(第二个可选)。
原型式继承非常适合不需要单独创建构造函数,但仍然需要在对象间共享信息的场合。
let person = { 
 name: "Nicholas", 
 friends: ["Shelby", "Court", "Van"] 
}; 
let anotherPerson = Object.create(person); 
anotherPerson.name = "Greg"; 
anotherPerson.friends.push("Rob"); 
let yetAnotherPerson = Object.create(person); 
yetAnotherPerson.name = "Linda"; 
yetAnotherPerson.friends.push("Barbie"); 
console.log(person.friends); // "Shelby,Court,Van,Rob,Barbie"

寄生式继承

function createAnother(original){ 
 let clone = object(original); // 通过调用函数创建一个新对象
 clone.sayHi = function() { // 以某种方式增强这个对象
 console.log("hi"); 
 }; 
 return clone; // 返回这个对象
}

寄生式组合继承

function SuperType(name) { 
 this.name = name; 
 this.colors = ["red", "blue", "green"]; 
} 
SuperType.prototype.sayName = function() { 
 console.log(this.name); 
}; 
function SubType(name, age){ 
 SuperType.call(this, name); // 第二次调用 SuperType() 
 this.age = age; 
} 
SubType.prototype = new SuperType(); // 第一次调用 SuperType() 
SubType.prototype.constructor = SubType; 
SubType.prototype.sayAge = function() { 
 console.log(this.age); 
};

寄生式组合继承算是引用类型继承的最佳模式!

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

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

相关文章

DSSAT作物模建模实践方法

随着数字农业和智慧农业的发展,基于过程的作物生长模型(Process-based Crop Growth Simulation Model)在模拟作物对气候变化的响应与适应、农田管理优化、作物品种和株型筛选、农业碳中和、农田固碳减排等领域扮演着越来越重要的作用。Decisi…

msvcp140_ATOMIC_WAIT.dll丢失的多种解决方法分享,实测有效

在日常使用电脑的过程中,我们可能会遇到一些错误提示,其中之一就是“msvcp140_ATOMIC_WAIT.dll丢失”。那么,msvcp140_ATOMIC_WAIT.dll丢失是怎么回事呢?本文将从msvcp140_ATOMIC_WAIT.dll丢失的原因分析、对电脑的影响以及解决方…

linux 环境报错:Peer reports incompatible or unsupported protocol version

出现问题的原因: curl 不兼容或不支持的协议版本。 解决方案: yum update -y nss curl libcurl如此继续之前的操作即可。

【瞎折腾日常】服务器的cpu飙高到1000%了怎么破

一、故障起因 起因是用户反馈系统很卡,我登录普罗米修斯一看,发现docker部署得集群下的一个java应用服务器cpu爆了,直接冲到了1000%以上了,接着就是各种接口超时报警等,赶紧打开对应的服务器查看进程情况,这会使用jstack和top命令定位哪个线程占用的cpu比较大,定位代码问…

Python+Pytest+Allure+Yaml+Pymysql+Jenkins+GitLab接口自动化测试框架详解

PythonPytestAllureYaml接口自动化测试框架详解 编撰人:CesareCheung 更新时间:2024.06.20 一、技术栈 PythonPytestAllureYamlJenkinsGitLab 版本要求:Python3.7.0,Pytest7.4.4,Allure2.18.1,PyYaml6.0 二、环境配置 安装python3.7&…

BMA530 运动传感器

型号简介 BMA530是博世(bosch-sensortec)的一款运动传感器。时尚简约的可穿戴设备为功能强大的组件提供了很小的空间。具有先进功能集的下一代加速度计是世界上最小的加速度传感器(1.2 x 0.8 x 0.55 mm)。它专为紧凑型设备而设计&…

突发!Runway的Gen-3向所有人开放,媲美Sora!

7月2日凌晨,著名生成式AI平台Runway在官网宣布,其文生视频模型Gen-3 Alpha向所有用户开放使用。 上周日Runway只向部分用户提供了Gen-3的使用权限,「AIGC开放社区」也为大家解读了10个非常有代表性的视频案例。(点击查看&#xf…

UE4_材质_使用彩色半透明阴影

学习笔记,不喜勿喷!侵权立删,祝愿大美临沂生活越来越好! 本教程将介绍如何配置虚幻引擎来投射彩色半透明阴影。 此功能在许多应用中都很有用,常见例子就是透过彩色玻璃窗的彩色光。 一、半透明阴影颜色 阴影在穿过半…

2024.7.2作业

1. 梳理笔记(原创&#xff01;&#xff01;&#xff01;) 2.解析代码&#xff1a;分析每一步变量的取值 #include <stdio.h> int main(int argc, char *argv[]) { int a 10; //a10 int b a--; //b10 int c a b 2; //a9 b10 c21 int d (b--…

Python语言接入关键词搜索商品api疑点解析

接入关键词搜索商品API通常需要以下步骤&#xff1a; 了解API文档&#xff1a;首先&#xff0c;你需要阅读API的文档&#xff0c;了解API的基本功能、请求方式&#xff08;GET、POST等&#xff09;、请求参数、返回数据格式等信息。 安装必要的库&#xff1a;根据API的要求&am…

RS232、RS485与RS422初步学习

目录 电平 传输方式 共模和差模干扰 ps&#xff1a;双绞线 485总线结构 ps&#xff1a;终端电阻 RS232接口&#xff08;DB9&#xff09; 优缺点 RS232优缺点 RS485较RS232的优点 为什么RS232还在使用&#xff1f; 电平 RS232、RS485与RS422的电平 区间逻辑备注RS232…

vue3中获取Excel和csv文件中的内容

1.效果 2.安装 npm install xlsxyarn add xlsx 3.引入使用 <el-upload ref"uploadRef" :on-change"changeFile" :show-file-list"false" class"mr10" accept".csv, .xlsx, .xls"action"#" :auto-upload&quo…

240702_昇思学习打卡-Day14-基于MindNLP+MusicGen生成自己的个性化音乐

240702_昇思学习打卡-Day14-基于MindNLPMusicGen生成自己的个性化音乐 前面一致做的都是图像的&#xff0c;可视化比较强&#xff0c;可以有比较多的图片帮助理解&#xff0c;但今天这个是关于音频的生成&#xff0c;基本只有干巴巴的代码&#xff0c;我尽量描述清楚些。相关研…

NX 二次开发-获取CAM切削层数据

int count 0;tag_t* objects;UF_UI_ONT_ask_selected_nodes(&count, &objects); //获取当前加工导航器选中的对象数量和tagif (count < 0){return 0;}UF_CUT_LEVELS_t* cut_levels_ptr_addr NULL; //读工序的切削层UF_CUT_LEVELS_load(objects[0], &…

c++习题06-ljc的储蓄计划

目录 一&#xff0c;问题 二&#xff0c;思路 1&#xff0c;思路1 2&#xff0c;思路2 三&#xff0c;代码 1&#xff0c;思路1代码 2&#xff0c;思路2代码 四&#xff0c;用例输入输出 一&#xff0c;问题 二&#xff0c;思路 1&#xff0c;思路1 定义变量&#x…

【启明智显技术分享】SSD202D核心板方案双网口SBC2D06开发板开箱与实操全攻略上手指南

一、背景 本指南将详细介绍启明智显基于SSD202D核心板方案下的双网口-SBC2D06的开箱及实操上手应用。无论您是电子爱好者、开发者还是工程师&#xff0c;这份指南都能助您快速上手并充分利用这款双网口开发板的各项功能。 二、硬件介绍 SBC2D06双网口开发板&#xff0c;作为…

分布式链路追踪Micrometer Tracing和ZipKin基础入门与实践

【1】概述 在分布式与微服务场景下&#xff0c;我们需要解决如下问题&#xff1a; 在大规模分布式与微服务集群下&#xff0c;如何实时观测系统的整体调用链路情况。 在大规模分布式与微服务集群下&#xff0c;如何快速发现并定位到问题。 在大规模分布式与微服务集群下&…

SpringBoot 中的参数校验:构建健壮应用的基石

前言 在开发Web应用时&#xff0c;处理用户输入是不可避免的一环。然而&#xff0c;用户输入往往充满不确定性&#xff0c;可能是格式不正确、类型不匹配&#xff0c;甚至包含恶意内容。为了确保应用的稳定性和安全性&#xff0c;对输入参数进行有效校验显得尤为重要。Spring …

Vue3 特点以及优势-源码解剖

Vue3 特点以及优势-Vue3.4源码解剖 Vue3 特点以及优势 1.声明式框架 命令式和声明式区别 早在 JQ 的时代编写的代码都是命令式的&#xff0c;命令式框架重要特点就是关注过程声明式框架更加关注结果。命令式的代码封装到了 Vuejs 中&#xff0c;过程靠 vuejs 来实现 声明式代…

微软与OpenAI/谷歌与三星的AI交易受欧盟重点关注

近日&#xff0c;欧盟委员会主管竞争事务的副主席玛格丽特维斯塔格(Margrethe Vestager)在一次演讲中透露&#xff0c;欧盟反垄断监管机构将就微软与OpenAI的合作&#xff0c;以及谷歌与三星达成的AI协议寻求更多第三方意见。这意味着微软与 OpenAI、谷歌与三星的 AI 交易及合作…