专栏首页达观数据达观数据前端分享:理解 JavaScript 中的对象的属性

达观数据前端分享:理解 JavaScript 中的对象的属性

在达观数据的前端工作中,对象的属性是经常接触和使用的,正好最近重温了一下《JavaScript 高级程序设计》,把书中理解对象属性的部分整理一下与大家分享。

ECMA-262把对象定义为:“无序属性的集合,其属性可以包含基本值、对象或函数”。对象的每个属性或方法都有一个名字,而每个名字都映射到一个值。

JavaScript原生提供一个Object对象,所有其他对象都继承自这个对象。Object本身也是一个构造函数,可以直接通过它来生成新对象。

创建自定义对象最简单的方式是创建一个Object的实例,再为其添加属性和方法:

使用对象字面量语法创建对象:

1属性类型

ECMA-262第五版定义只有内部采用的特性时,描述了属性的各种特征。为了表示特性是内部值,规范中把他们放到了两对方括号中,比如[[Enumerable]]。

1.1数据属性

数据属性包含一个数据值的位置,在这个位置可以读取和写入值,数据属性有四个描述其行为的特性:

• [[Configurable]]:表示能否通过delete删除属性从而新定义属性,能否修改属性的特性,或能否把属性修改为访问器属性,默认为true。

• [[Enumerable]]:表示能否通过for-in循环返回属性,默认为true。

• [[Writable]]:表示能否修改属性的值,默认为true。

• [[Value]]:包含这个属性的数据值。读取属性值的时候从这里读取,写入属性值的时候把新值保存在这个位置。默认值为undefined。

这里创建了一个名为name 的属性,为其指定的值是younixiao。也就是说,[[Value]]特性被修改为younixiao,对这个值的任何修改都将反映在这个位置。

修改属性默认的特性,必须使用Object.defineProperty()方法。其接收三个参数:属性所在的对象、属性的名字和一个描述符对象,描述符对象的属性必须是数据属性的特性。

这个例子为person 对象创建了名为name 的属性,它的值”younixiao”是只读的。这个属性的值是不能被修改的,如果尝试为它指定新值,在非严格模式下,赋值操作将被忽略;在严格模式下,赋值操作将导致抛出错误。

类似的规则也适用于不可配置的属性:

把[[configurable]]设置为false,表示不能从对象中删除该属性。如果对这个属性调用delete,在非严格模式下该属性的删除操作不会生效,在严格模式下会导致抛出错误。一旦把属性定义为不可配置,就不能再改为可配置。此时,如果再调用Object.defineProperty()方法修改除[[Writable]] 之外的特性,都会导致错误:

可以多次调用Object.defineProperty()方法修改同一个属性,但在把[[Configurable]] 特性设置为false之后就会有限制了。

在调用Object.defineProperty()方法时,如果不指定,除[[Value]] 特性外的特性的默认值都是false。(达观数据http://www.datagrand.com 赵业辉)

1.2访问器属性

访问器属性不包含数据值,它们包含一对getter()和setter()函数(这两个函数都不是必须的)。在读取访问器属性时,会调用getter()函数,这个函数负责返回有效的值;在写入访问器属性时,会调用setter()函数并传入新值,这个函数负责如何处理数据。访问器属性有以下四个特性:

• [[Configurable]]:表示能否通过delete删除属性从而新定义属性,能否修改属性的特性,或能否把属性修改为访问器属性,默认为true。

• [[Enumerable]]:表示能否通过for-in循环返回属性,默认为true。

• [[Get]]:读取属性时调用的函数,默认为undefined。

• [[Set]]:写入属性时调用的函数,默认为undefined。

访问器属性不能直接定义,必须使用Object.defineProperty()定义:

_year 前面的下划线用于表示只能通过对象方法访问的属性。

以上代码创建了一个book 对象,并给它定义两个默认的属性:_year 和edition。year 的访问器属性包含getter()函数和setter()函数。getter()函数返回_year 的值,setter()函数通过计算得出_year 和edition 的值。这是访问器属性的常见用法,即设置一个属性的值会导致其他属性发生变化。

只指定getter()函数意味着属性不可写,尝试写入属性会被忽略,在严格模式下此操作会抛出异常。

只指定setter()函数意味着属性不可读,在非严格模式下回返回undefined,在严格模式下会抛出错误:

在旧的浏览器中创建访问器属性可以使用defineGetter()和defineSetter()函数。)(达观数据http://www.datagrand.com 赵业辉)

2定义多个属性

使用Object.defineProperties()定义多个属性。这个方法接受连个对象参数,第一个对象是要添加和修改其属性的对象,第二个对象的属性与第一个对象中要添加或修改的属性一一对应:

以上代码在book 对象上定义了两个数据属性(_year 和edition)和一个访问器属性(year)。

3读取属性的特性

使用Object.getOwnPropertyDescriptor()方法可以取得给定属性的描述符。其接收两个参数:属性所在的对象和要读取描述符的属性名称。返回值是一个对象,如果是访问器属性,这个对象的属性有configurable、enumerable、get 和set;如果是数据属性这个对象的属性则有configurable、enumerable、writable、value:

在JavaScript 中,可以针对任何对象——包括DOM 和 BOM,使用Object.getOwnPropertyDescriptor()方法。(达观数据http://www.datagrand.com 赵业辉)

在本文中,我们学习整理了JavaScript 中对象的属性和特性。但是,JavaScript不是必须得通过特性来组织一个属性,它们主要是作为ECMAScript规范中定义的一个抽象操作。但有时候这些特性也会明确的出现在语言代码中,比如在属性描述符中。

达观数据专注于企业大数据技术服务,以独创的多层智能挖掘算法,实现对海量用户行为和文本数据的深入分析和挖掘,为企业提供智能文本分析、精准用户建模、个性化推荐、智能搜索等尖端数据挖掘功能。

作者简介

赵业辉,14年毕业于南京信息工程大学,网络媒体艺术专业。目前就职于达观数据,任职前端开发工程师,负责大数据平台的pc和web app研发工作。曾任职杭州数云信息技术有限公司前端工程师,对web兼容性,前端性能提升,SEO,前端组件化开发,响应式设计以及主流前端框架有着丰富的实战经验。

本文分享自微信公众号 - 达观数据(Datagrand_),作者:赵业辉

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-11-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 分享 | 一文详解2017年深度学习NLP重大进展与趋势

    作者通过本文概述了 2017 年深度学习技术在 NLP 领域带来的进步,以及未来的发展趋势,并与大家分享了这一年中作者最喜欢的研究。2017 年是 NLP 领域...

    达观数据
  • 技术干货|集成学习算法(Ensemble Method)浅析

    个性化推荐系统是达观数据在金融、电商、媒体、直播等行业的主要产品之一。在达观数据的个性化推荐系统架构中, 可以简单地分为5层架构,每层处理相应的数据输出给下一层...

    达观数据
  • 技术干货丨想写出人见人爱的推荐系统,先了解经典矩阵分解技术

    网络中的信息量呈现指数式增长,随之带来了信息过载问题。推荐系统是大数据时代下应运而生的产物,目前已广泛应用于电商、社交、短视频等领域。本文将针对推荐系统中基于隐...

    达观数据
  • 18.Swift学习之属性与方法

    YungFan
  • 前端基础-CSS属性选择器

    cwl_java
  • 【Rust每周一知】 Attribute 属性

    Rust 中的属性数量非常多。而且具有可扩展性(可自定义属性)。Rust 的属性语法遵从 C# 定义并标准化了的属性规范ECMA-334。

    MikeLoveRust
  • Workbook工作簿对象属性

    Activeworkbook.name表示当前活动工作簿的name属性,即当前excel文件的名称为vba.xlsm。

    无言之月
  • 《OEA - 实体扩展属性系统 - 设计方案说明书》

        这篇设计文档是 12 月份写来参加公司的研发峰会的,自己倒是信心满满,不过最后还是没有入围。现在想想也没啥大用,所以贴出来,期待与园友交流。     文...

    用户1172223
  • [UWP]依赖属性1:概述

    依赖属性(DependencyProperty)是UWP的核心概念,它是有DependencyObject提供的一种特殊的属性。由于UWP的几乎所有UI元素都是...

    dino.c
  • JavaScript之面向对象的概念,对象属性和对象属性的特性简介

      一、大家都知道,面向对象语言有一个标志,那就是他们都有类的概念,通过类我们可以创建任意多个具有相同属性和方法的对象。但ECMAScript(指定JavaSc...

    郑小超.

扫码关注云+社区

领取腾讯云代金券