JavaScript高级程序设计读书分享之8章——8.2创建对象

news2024/11/17 3:26:05

JavaScript高级程序设计(第4版)读书分享笔记记录

适用于刚入门前端的同志

创建Object的实例

let person = new Object(); 
person.name = "Nicholas"; 
person.age = 29; 
person.job = "Software Engineer"; 
person.sayName = function() { 
 console.log(this.name); 
};

对象字面量     

let Person = {
    name:'Tom',
    age:28,
    job:'Teacher',
    sayName(){
        console.log(this.name)
    }
}
Person.sayName() // Tom

    虽然使用 Object 构造函数或对象字面量可以方便地创建对象,但这些方式也有明显不足:创建具有同样接口的多个对象需要重复编写很多代码。

工厂模式

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('Tom',28,'Teacher')
let person2 = createPerson('Jerry',18,'Student')
console.log(person1 ) // {name:'Tom',age:28,job:'Teacher',sayName: ƒ ()}
      问题:  这种工厂模式虽 然可以解决创建多个类似对象的问题,但没有解决对象标识问题(即新创建的对象是什么类型)

构造函数模式

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('Tom',28,'Teacher')
person1.sayName () //Tom

let person2 = new Person('Jerry',18,'Student')
person1.sayName () //Jerry

工厂模式和构造函数模式的区别:

  • 没有显式地创建对象。
  • 属性和方法直接赋值给了 this
  • 没有 return
要创建 Person 的实例,应使用 new 操作符。以这种方式调用构造函数会执行如下操作:
  1. 创建一个新对象;
  2. 将构造函数的作用域赋给新对象(使this指向新对象);
  3. 执行构造函数中的代码(为这个新对象添加属性);
  4. 返回新对象。

问题

        构造函数的主要问题在于,其定义的方法会在每个实例上都创建一遍。因此对前面的例子而言,person1 和 person2 都有名为 sayName() 的方法,但这两个方 法不是同一个 Function 实例。

解决:
要解决这个问题,可以把函数定义转移到构造函数外部
function Person(name, age, job){ 
 this.name = name; 
 this.age = age; 
 this.job = job; 
 this.sayName = sayName; 
} 
function sayName() { 
 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

原型模式

function Person(){}
Person.prototype.name = 'Tom'
Person.prototype.age = 28
Person.prototype.job = 'Teacher'
Person.prototype.sayName = function(){
    console.log(this.name)
}

let person1 = new Person()
person1.sayName() // Tom

let person2 = new Person()
person1.sayName() // Tom

console.log(person1.sayName == person2.sayName); // true

理解原型

        无论何时,只要创建一个函数,就会按照特定的规则为这个函数创建一个 prototype 属性(指向原型对象)。默认情况下,所有原型对象自动获得一个名为 constructor 的属性,指回与之关联的构 造函数。

前面的例子就可以理解为:

Person.prototype.constructor 指向 Person。

console.log(Person.prototype.constructor === Person); // true

         在自定义构造函数时,原型对象默认只会获得 constructor 属性,其他的所有方法都继承自
 Object。每次调用构造函数创建一个新实例,这个实例的内部[[Prototype]](__proto__属性)指针就会被赋值为构造函数的原型对象

console.log(Person.prototype.__proto__ === Object.prototype); // true

 原型层级

        当访问某个实例的属性和方法时,会先在实例上搜索个属性。如果这个属性在实例上存在,所以就不会再搜索原型对象了。而并没有在实例上找到这个属性,所以会继续搜索原型对象并使用定义在原型上的属性。

例子:

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(); 
let person2 = new Person(); 
person1.name = "Greg"; 
console.log(person1.name); // "Greg",来自实例
console.log(person2.name); // "Nicholas",来自原型
        只要给对象实例添加一个属性,这个属性就会遮蔽 shadow)原型对象上的同名属性,也就是虽然 不会修改它,但会屏蔽对它的访问。不过,使用 delete 操作符可以完全删除实例上的这个属性,从而让标识符解析过程能够继续搜索原型对象。

例子:

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(); 
let person2 = new Person(); 
person1.name = "Greg"; 

console.log(person1.name); // "Greg",来自实例
console.log(person2.name); // "Nicholas",来自原型

delete person1.name; 
console.log(person1.name); // "Nicholas",来自原型
hasOwnProperty()方法
        用于确定某个属性是在实例上还是在原型对象上。这个方法是继承自 Object的,会在属性存在于调用它的对象实例上时返回 true,在原型上返回false。
        通过调用 hasOwnProperty() 能够清楚地看到访问的是实例属性还是原型属性。
例子:
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(); 
let person2 = new Person(); 

console.log(person1.hasOwnProperty("name")); // false

person1.name = "Greg"; 
console.log(person1.name); // "Greg",来自实例
console.log(person1.hasOwnProperty("name")); // true
 hasPrototypeProperty()
属性首先只存在于原型上,所以 hasPrototypeProperty() 返回 true。
实例上也有了这个属性,因此 hasPrototypeProperty() 返回 false
例子:
// 原型对象还是接上面的

let person = new Person(); 
console.log(hasPrototypeProperty(person, "name")); // true 

person.name = "Greg"; 
console.log(hasPrototypeProperty(person, "name")); // false

Object.keys()

要获得对象上所有可枚举的实例属性

//原型对象接上面的案例

let keys = Object.keys(Person.prototype); 
console.log(keys); // "name,age,job,sayName" 

let p1 = new Person(); 
p1.name = "Rob"; 
p1.age = 31; 
let p1keys = Object.keys(p1); 
console.log(p1keys); // "[name,age]"

Object.getOwnPropertyNames()

如果想列出所有实例属性,无论是否可以枚举,都可以使用

let keys = Object.getOwnPropertyNames(Person.prototype); 
console.log(keys); // "[constructor,name,age,job,sayName]"
Object.getOwnPropertySymbols()

对象迭代

ECMAScript 2017 新增了两个静态方法,Object.values()Object.entries()接收一个对象

示例:

 const o ={
    foo: 'bar', 
     baz: 1, 
     qux: {} 
}; 

console.log(Object.values(o)); // ["bar", 1, {}]
console.log(Object.entries((o))); // [["foo", "bar"], ["baz", 1], ["qux", {}]]

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

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

相关文章

增长乏力?创造产品和项目需求的6大方法【一杯咖啡谈项目】

我这里所说的创造需求,类似于PMI在《需求管理实践指南》中所写的专业术语“需要评估”(needs assessment),这个需要评估,没有写进PMI的《项目管理知识体系指南(PMBOK指南)》(以下称为…

fork()出来一个进程,这个进程的父进程是从哪来的?

基本概念fork() creates a new process by duplicating the calling process. The new process is referred to as the child process. The calling process is referred to as the parent process.fork()是一个系统调用,不是一个函数。详细信息可以,man…

day(22) Echarts和nacos

day(22) Echarts和nacos一、Echarts和nacos1.1 数据展示1.2 查询日期之间的数据二、配置中心2.1 配置中心spring cloud config2.1.1 缺点2.1.2 其他配置中心2.2 nacos2.2.1 pom2.2.2 配置文件2.2.3 Data id是微服务名称2.2.4 优先级2.2.5 动态刷新2.2.6 namespace2.2.7 多配置文…

Symbiosis Nest 共生巢token跨链兑换协议

参考文献: Getting Started with Symbiosis - Symbiosis Documentation Relayers Network | Symbiosis - Symbiosis Documentation Symbiosis V1 vs. V2 - Symbiosis Documentation Symbiosis protocal 基于稳定币的跨链兑换协议. Symbiosis protocol 组成结构…

pyechart绘制多图(三图及以上)的overlap叠加

pyechart github页面:https://github.com/pyecharts/pyecharts 首先要明确多图叠加到一个图的规则,即多个图只能有一个公共的轴: 比如,横坐标含义相同(如时间维度)或者,纵坐标取值含义相同 文…

Web3中文|把Web3装进口袋,Solana手机Saga有何魔力?

2月23日,Solana Web3手机Saga发布新的消息,将推出NFT铸造应用程序Minty Fresh。在Minty Fresh,用户仅需轻点并完成拍摄,就可以直接在手机中进行NFT铸造,并在几秒钟内将其转换为链上NFT,NFT还可以发布在 Ins…

STM32学习笔记-SPI

文章目录硬件连接协议层STM32-SPISTM32 SPI框架图SPI初始化结构体SPI 协议是由摩托罗拉公司提出的通讯协议 (Serial Peripheral Interface),即串行外围设备接口,是一种高速全双工的通信总线。它被广泛地使用在 ADC、LCD 等设备与 MCU 间,要求…

NCRE计算机等级考试Python真题(十一)

第十一套试题1、以下选项对于import保留字描述错误的是:A.import可以用于导入函数库或者库中的函数B.可以使用from jieba import lcut 引入 jieba库C.使用import jieba as jb,引入函数库jieba,取别名jbD.使用import jieba 引入jieba库正确答案…

明明硬件比软件难,但为什么硬件工程师待遇还不如软件?

前言 大家好,最近在知乎上看到一个很有意思的问题: 硬件明明比软件更难,国内的硬件技术也不如软件,为什么硬件工程师待遇还不如软件? 下面分享几位网友的回答,有一定的参考价值,欢迎大家留言讨论…

Dell服务器组Raid + 重装Ubuntu20.0.4

文章目录1. 组建Raid2. 从U盘启动3. 系统安装4. 硬盘分区查看5.后续步骤:1. 组建Raid 1.1. 开机后按CtrlR进入Raid管理界面; 1.2. 选中现有群组后按F2弹出菜单,选择删除现有群组; 1.3. 删除后会列出所有磁盘,仍选…

DSP_TMS320F28377D_ePWM学习笔记

前言 本人需要使用ePWM来控制一个永磁同步电机(PMSM), 本文记录了对于TMS320F28377D ePWM模块的学习笔记。主要内容是FOC PMSM控制的ePWM配置,同时包含ADC触发源的配置,关于ADC的学习笔记,请参考DSP_TMS320F28377D_AD…

靶机漏洞那些事儿,这场直播算是讲明白了

CSDN直播间: 小白如何从靶场过渡到实战 ——「业务安全大讲堂第第二季第2期」https://live.csdn.net/room/dingxiangtech/xldogSXD 一名合格的网安工程师,不仅要懂得防漏洞,更要学会找漏洞。 上期直播我们为大家讲解了红队打点与情报收集策…

[busybox] busybox生成一个最精简rootfs(上)

这篇文章是承接着[rootfs]用busybox做一个rootfs(根文件系统)来的,再回看这篇我很久之前写的文章的时候,有一个问题出现在我的脑海中,创建了这个文件那个文件,但确实是每个文件都是必需的吗? 这篇文章我们就来讨论下这…

Graph Neural Network(GNN)图神经网络

Graph Neural Network(GNN)图神经网络,是一种旨在对图结构数据就行操作的深度学习算法。它可以很自然地表示现实世界中的很多问题,包括社交网络,分子结构和交通网络等。GNN旨在处理此类图结构数据,并对图中的节点和边进行预测或执…

PLECS中DLL模块的使用

之前发布了一篇文章,介绍如何使用PSIM中的DLL模块。而本篇文章的内容与之类似,不过主角换成了PLECS。 PLECS和PSIM类似,也属于电力电子仿真软件,使用方便,仿真速度快,和Matlab也有一定的联系,有…

关于Java多线程你了解多少

🏡个人主页 : 守夜人st 🚀系列专栏:Java …持续更新中敬请关注… 🙉博主简介:软件工程专业,在校学生,写博客是为了总结回顾一些所学知识点 目录多线程多线程的创建继承Thread类实现R…

主板EC程序烧写异常致无法点亮修复经验

主板型号:Gigabyte AB350M-Gaming3 官网上明确写着支持R5 5500,但按照如下步骤实践下来实际是不支持的 升级biosF31到F40版本的注意事项: 步骤: 1 使用Q-Flash先将bios升级到f31版本;2 然后下载提示中的ECFW Update To…

常见排序算法——冒泡排序和选择排序

常用算法 一、排序算法 1.1、冒泡排序 冒泡排序(Bubble Sorting)的基本思想是:通过对待排序序列从前向后(从下标较小的元素开始),依次比较相邻元素的值,若发现逆序则交换,使值较大的元素逐渐从前移向后部…

Fiddler 模拟弱网环境测试

为什么要进行弱网环境测试? 由于用户自身的网络环境波动,或者是本身网络环境就较为恶劣,导致会出现一些意想不到的非功能性bug,影响用户体检。比如 利用Fiddler,Charles等具有代理服务器功能的网络流量分析软件来实现…

操作留痕功能实现与探讨

操作留痕功能实现与探讨 背景 接手了一个单体应用项目,看系统介绍,说实现了【高性能的操作日志留痕】功能,就有点好奇它是怎么设计的,是阻塞队列还是怎样的线程池。结果我打开代码一看,真的是笑洗个人了。它是做了一…