关于JavaScript 对象的理解

海军 等级 560 2 0
标签: Javascript

关于JavaScript 对象的理解

对象

理解对象

ECMA-262把对象定义为:“无序属性的集合,其属性可以包含基本值、对象或者函数。”严格来讲,这就相当于说对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字,而每个名字都映射到一个值。

我们可以把ECMAScript的对象想象成散列表:无非就是一组名值对,其中的值可以是数据或函数。

每个对象都是基于一个引用类型创建的,即创建自定义对象的最简单方式就是创建一个Object的实例,然后再为它添加属性和方法

合并对象

它 是值 把源对象所有属性 复制到目标对象属性当中。

ES6 中提供了 Object.assign() 来合并对象。

这个方法接受一个目标对象和一个或多个源对象作为参数,然后将源对象的所有属性和自有属性 复制到目标对象当中。

合并对象除了使用Object.assign, 还可以使用 ... 对象扩展符 来简化合并对象

s

注意:

  • Object.assign() 是浅复制,如果多个源对象之间合并出现,重复属性时,会取最后一个属性的值。
// ...

var a = {
    title:'初级前端工程师'
}

var b = {
    address: '北京中关村'
}

var c = { ...a, ...b}
console.log(c) 
// { title: '初级前端工程师', address: '北京中关村' }





//Object.assign()
var job = {
    title:'高级前端工程师'
}

var salary = {
    wage: '22w'
}

var HaiJun = {}

console.log(Object.assign(HaiJun,a,job,salary)) 
//{ title: '高级前端工程师', wage: '22w' }

对象标识类型及相等判断

ES6 中提供 了 Object.is() 方法,它接受两个参数。

console.log(Object.is(1,"1")) //false

console.log(Object.is({},{})) //false

console.log(Object.is(+0, 0))   //true

var objA = {
    id:2
}

var objB = {
    id:2
}

console.log(Object.is(objA.id,objB.id)) //true

对象的属性

ECMA-262第5版在定义了只有内部才用的特性时,描述了属性的各种特征,这些特征是为了实现JavaScript引擎用的,因此在JavaScript中不能直接访问它们。

JavaScript 中,对象的属性类型 为: 数据属性访问器属性.

数据属性

定义: 数据属性包含一个数据值的位置,这个位置可以读取和写入值,可通过对象直接定义的属性。数据属性有四个描述其行为的特性。

它有 4 个特定行为来约束属性行为

按时

注意:

  • 在调用 Object.defineProperty() 时,如果不指定 属性的默认行为的话,它的 3 个行为 都 为 false .

实际开发中,修改属性默认行为场景很少,但学习属性的行为 有助于 理解对象。

属性
[[Configurable]] 表示是否可以通过 delete 删除对象属性,默认为 true
[[ Enumberable ]] 表示 对象属性是否 可以 通过 for-in 来循环。默认为true
[[ Writable]] 表示 对象属性的值是否可以修改,默认为true
[[Value ]] 表示 对象属性的实际值。
如何修改对象属性默认行为

通过 Object.defineProperty() 来修改属性默认行为

参数为:

  • 目标对象
  • 要修改的对象属性
  • 一个描述符对象 (这个对象是用来管理属性默认行为的)

该方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。

let obj = {
    code: 200,
    title: '前端自学社区',
}

Object.defineProperty(obj,"code",{
    writable: false  //禁止修改对象属性 code
})

obj.code = 201


console.log(obj)  // 返回{ code: 200, title: '前端自学社区' }

访问器属性

它 包含 一个 setter 函数 和 getter 函数,用来返回属性值和修改属性的值.

当属性被修改时,获取调用setter 函数。

当属性要获取值时,会调用getter 函数。

实际开发中,这个两个属性不是必须的,看自己业务需求

如果一个属性的值变化,影响到另一个属性的值的时候,就可以使用 settter getter 来实现。

let obj = {
    code: 200,
    title: '前端自学社区',
}

Object.defineProperty(obj,"mounth",{
    set(newValue){
        if(newValue >3) {
            this.code = 400
        }
    },
    get(){
        return this.code
    }
})
obj.mounth = 4
console.log(obj)  //{ code: 400, title: '前端自学社区' }

读取属性的行为

要读取属性的特性,必须使用ECMAScript5的:Object.getOwnPropertyDescriptor() 来获取对象属性的行为。

该函数接受两个参数:

  • 目标对象
  • 要获取的属性

该方法返回指定对象上一个自有属性对应的属性描述符。

let obj = {
    code: 200,
    title: '前端自学社区',
}

const des = Object.getOwnPropertyDescriptor(obj,'code')
console.log(des) 
//{ value: 200, writable: true, enumerable: true, configurable: true }
console.log(des.writable) //true

结语

❤️关注+点赞+收藏+评论+转发❤️,原创不易,鼓励笔者创作更好的文章

关注公众号 “前端自学社区”,即可获取更多前端高质量文章!

关注后回复关键词“加群”, 即可加入 “前端自学交流群”,共同学习进步。

关注后添加我微信拉你进技术交流群

欢迎关注公众号,更多精彩文章只在公众号推送

收藏
评论区

相关推荐

JS排序算法
引子 有句话怎么说来着: 雷锋推倒雷峰塔,Java implements JavaScript. 当年,想凭借抱Java大腿火一把而不惜把自己名字给改了的JavaScript(原名LiveScript),如今早已光芒万丈。node JS的出现更是让JavaScript可以前后端通吃。虽然Java依然制霸企业级软件开发领域(C/C 的大神们不要打
What the f*ck JavaScript?
What the fck JavaScript? 一个有趣和棘手的 JavaScript 示例列表。 JavaScript 是一种很好的语言。
JavaScript中的类型
JavaScript中的类型 一、关于类型 什么叫做类型?简单地说,类型就是把内存中的一个二进制序列赋予某种意义。比如,二进制序列0100 0000 0111 0000 0001 0101 0100 1011 1100 0110 1010 0111 1110 1111 1001 1110如果看作是64位无符号整数类型就是4
JavaScript基础加ES6语法
JavaScript 一、什么是JavaScript 当下最流行的脚本语言,在世界上的所有浏览器中都有js的身影,是一门脚本语言,可以用于我们与web站点和web应用程序的交互,还可以用于后台服务器的编写,例如node.js 二、语法特点 基于对象和事件驱动的松散型,解释型语言 单线程异步 三、JavaScript作用 页面的交
js-Answers一
JavaScript的组成 JavaScript 由以下三部分组成: 1. ECMAScript(核心):JavaScript 语言基础 2. DOM(文档对象模型):规定了访问HTML和XML的接口 3. BOM(浏览器对象模型):提供了浏览器窗口之间进行交互的对象和方法 JS的基本数据类型和引用数据类型
14个优秀 JS 前端框架、库、工具及其使用时机
  这篇文章主要描述现今流行的一些 Javascript web 前端框架,库以及它们的适用场景。   新的 Javascript 库层出不穷,从而Web 社区愈发活跃、多样、在多方面快速发展。详细去描述每一种主流的 Javascript 框架和库近乎
JavaScript 是什么?
前言 引用《JavaScript 高级程序设计第四版》中说的话 ——“从简单的输入验证脚本到强大的编程语言,JavaScript 的崛起没有任何人预测到。它很简单,学会用只要几分钟;它又很复杂,掌握它要很多年。要真正学好用好 JavaScript,理解其本质、历史及局限性是非常重要的”。 面试官:JavaScript 是什么? 我:
理解 Javascript 中的 Async / Await
在本文中,我们将探讨async/await,对于每个Javascript开发人员来说,是异步编程的首选工具。如果您不熟悉javascript,请不要担心,本文将帮助您async/await从头开始理解。 介绍async/await 是javascript中的一种模式,可使您的代码以同步方式执行,但又不影响javascript的异步行为。 定义异步功能要定义一
JavaScript 和 Node.js 中事件循环
1.JavaScript中事件循环可以参考《JavaScript忍者秘籍第二版》第十三章,讲解的很好。JavaScript中事件循环,主要就在理解宏任务和微任务这两种异步任务。宏任务(macrotask): setTimeOut 、 setInterval 、 setImmediate 、 I/O 、 各种callback、 UI渲染 、messageCh
了解什么是 TypeScript
内容纲要 了解什么是 TypeScript TypeScript 基本语法 TypeScript 介绍 TypeScript 是什么TypeScript 是 JavaScript 的强类型版本。然后在编译期去掉类型和特有语法,生成纯粹的 JavaScript代码。由于最终在浏览器中运行的仍然是 JavaScript,所以 TypeScript 并
盘点3个可以操作JavaScript的Python库
前言我们都知道Python可以很轻松的实现某些功能,而且还可以编写网页,比如Remi,Pysimplegui,但是操作JavaScript这种浏览器的脚本语言,还是第一次听说,小编也是第一次听说,于是就跟大家脑补这一知识。 一、PyExecJS是一个可以执行JavaScript脚本的Python模块,可以与网页上的JavaScript进行交互,这样就能更加
一篇文章带你了解JavaScript作用域
在JavaScript中,对象和函数也是变量。在JavaScript中,作用域是你可以访问的变量、对象和函数的集合。JavaScript 有函数作用域: 这个作用域在函数内变化。一、本地JavaScript变量一个变量声明在JavaScript函数内部,成为函数的局部变量。局部变量有局部作用域: 它们只能在函数中访问。JS://code here can n
一篇文章带你了解JavaScript错误处理
大家好,我是前端进阶者。执行JavaScript代码时,可能会发生意想不到的错误。错误可以是程序员编写的编码错误,由于输入错误引起的错误以及其他不可预见的事情。因此,为了处理错误,JavaScript提供了4个关键字。一、JavaScript try ... catch语句try语句允许定义一个代码块,该代码块在执行时将进行错误测试,catch如果try块中
javascript实践教程-01-javascript介绍
本节目标1. 了解javascript是什么。2. 了解javascript能干什么。 内容摘要本篇介绍了javascript是什么,为什么要用javascript,ECMAScript标准是什么等。阅读时间大约510分钟。 javascript是什么?javascript是世界上最流行的脚本语言,因为你在电脑、手机、平板上浏览的所有的网页,以及无数基于HT
javascript实践教程-02-javascript入门
本节目标1. 掌握如何编写javascript代码。2. 掌握javascript的3个弹框。3. 掌握javascript的注释。4. 掌握浏览器的调试工具控制台。 内容摘要本篇介绍了如何在网页上编写js代码,如何引入外部js代码文件,js的3个弹框、注释语法,还有浏览器调试工具的控制台使用。阅读时间1520分钟。 script标签如果我们需要在网页中编写