深入JS对象属性

时间: 2019-08-10阅读: 26标签: 对象

属性决定JS中对象的状态,本文章主要分析这些属性是如何工作的。


JS几种不同的属性

JS有三种不同的属性:数据属性,访问器属性和内部属性。

1.1 数据属性(properties)

对象的普通属性将字符串名称映射到值。例如,下面对象obj有一个数据属性,名称为 prop,对应的值为 123:

var obj = {
    prop: 123
};

可以用以下方式读取属性的值:

console.log(obj.prop); // 123
console.log(obj["prop"]); // 123

当然也可以用以下方式来设置属性的值:

obj.prop = "abc";
obj["prop"] = "abc";

1.2 访问器属性

另外,可以通过函数处理获取和设置属性值。 这些函数称为访问器函数。 处理获取的函数称为getter。 处理设置的函数称为setter:

var obj = {
  get prop () {
    return 'Getter';
  },
  set prop (value) {
    console.log('Setter: ' + value);
  }
}

访问 obj 属性:

> obj.prop
 'Getter'
> obj.prop = 123;
  Setter: 123

1.3 内部属性

一些属性只是用于规范,这些属于“内部”的内部,因为它们不能直接访问,但是它们确实影响对象的行为。内部属性有特殊的名称都写在两个方括号,如:

  • 内部属性[[Prototype]]指向对象的原型。它可以通过Object.getPrototypeOf()读取。它的值只能通过创建具有给定原型的新对象来设置,例如通过object.create()或__proto__ 。
  • 内部属性[[Extensible]]决定是否可以向对象添加属性。可以通过Object.isExtensible() 方法判断一个对象是否是可扩展的(是否可以在它上面添加新的属性)。可以通过Object.preventExtensions()方法让一个对象变的不可扩展,也就是永远不能再添加新的属性。


2. 属性特性(attribute)

属性的所有状态,包括数据和元数据,都存储在特性(attribute)中。它们是属性具有的字段,就像对象具有属性一样。特性(attribute)键通常用双括号编写:

以下特性是属于数据属性:

  • [[Value]]:该属性的属性值,默认为undefined。
  • [[Writable]]:是一个布尔值,表示属性值(value)是否可改变(即是否可写),默认为true。

以下特性是属于访问器属性:

[[Get]]:是一个函数,表示该属性的取值函数(getter),默认为undefined

[[Set]]:是一个函数,表示该属性的存值函数(setter),默认为undefined。

所有的属性都具有以下的特性:

[[Enumerable]]:是一个布尔值,表示该属性是否可遍历,默认为true。如果设为false,会使得某些操作(比如for...in循环、Object.keys())跳过该属性。

[[Configurable]] :是一个布尔值,表示可配置性,默认为true。如果设为false,将阻止某些操作改写该属性,比如无法删除该属性,也不得改变该属性的属性描述对象(value属性除外)。也就是说,configurable属性控制了属性描述对象的可写性。


3. 属性描述

JavaScript 提供了一个内部数据结构,用来描述对象的属性,控制它的行为,比如该属性是否可写、可遍历等等。这个内部数据结构称为“属性描述对象”(attributes object)。每个属性都有自己对应的属性描述对象,保存该属性的一些元信息。下面是值为123属性描述对象的一个例子。

{
    value: 123,
    writable: false,
    enumerable: true,
    configurable: false
}

咱们也可以通过访问器属性实现相同的目标,属性描述对象如下所示:

{
  get: function () { return 123 },
  enumerable: true,
  configurable: false
}

3.1 使用属性描述符的函数

下面的函数允许咱们使用属性描述符:

Object.defineProperty(obj, propName, propDesc):该方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。

obj:要在其上定义属性的对象。
prop:要定义或修改的属性的名称。
descriptor:将被定义或修改的属性描述符。

var obj = Object.defineProperty({}, "foo", {
  value: 123,
})

Object.defineProperties(obj, propDescObj): 该方法直接在一个对象上定义一个或多个新的属性或修改现有属性,并返回该对象。

obj: 将要被添加属性或修改属性的对象

props: 该对象的一个或多个键值对定义了将要为对象添加或修改的属性的具体配置

var obj = Object.defineProperties({}, {
  foo: { value: 123, enumerable: true },
  bar: { value: "abc", enumerable: true }
});

Object.create(proto, propDescObj?): 方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。

proto:新创建对象的原型对象。
propDescObj:可选。如果没有指定为 undefined,则是要添加到新创建对象的可枚举属性(即其自身定义的属性,而不是其原型链上的枚举属性)对象的属性描述符以及相应的属性名称。这些属性对应Object.defineProperties()的第二个参数。

var obj = Object.create(Object.prototype, {
  foo: { value: 123, enumerable: true },
  bar: { value: "abc", enumerable: true }
})

Object.getOwnPropertyDescriptor(obj, propName): 该方法返回指定对象上一个自有属性对应的属性描述符。(自有属性指的是直接赋予该对象的属性,不需要从原型链上进行查找的属性)

obj:需要查找的目标对象
prop:目标对象内属性名称

var o, d;

o = { get foo() { return 17; } };
d = Object.getOwnPropertyDescriptor(o, "foo");
// d {
//   configurable: true,
//   enumerable: true,
//   get: /*the getter function*/,
//   set: undefined
// }


4.可枚举性(Enumerable)

本节说明哪些操作受可枚举性影响,哪些操作不受可见性影响。 下面,假设有以下定义:

var proto = Object.defineProperties({}, {
  foo: { value: 1, enumerable: true },
  bar: { value: 2, enumerable: false }
})

var obj = Object.create(proto, {
  baz: { value: 1, enumerable: true },
  gux: { value: 2, enumerable: false}
})

请注意,对象(包括proto)通常至少具有原型Object.prototype:

> Object.getPrototypeOf({}) === Object.prototype
  true

Object.prototype是定义标准方法(如toString和hasOwnProperty)的地方。

4.1 受可枚举性影响的操作

可枚举性仅影响两个操作:for-in循环和Object.keys()。

for-in循环遍历所有可枚举属性的名称,包括继承的属性(请注意,Object.prototype的所有非可枚举属性都不会显示):

> for (var x in obj) console.log(x);
    baz
    foo

Object.keys() 返回所有自有(非继承)可枚举属性的名称:

> Object.keys(obj)
 [ 'baz' ]

如果需要所有属性的名称,则需要使用Object.getOwnPropertyNames()。

4.2 忽略可枚举性的操作

除了上达两个,其他操作都忽略了可枚举性,还有一些操作会考虑继承:

> "toString" in obj
true
> obj.toString
[Function: toString]

还有一些仅读取自有属性:

> Object.getOwnPropertyNames(obj)
[ 'baz', 'qux' ]

> obj.hasOwnProperty("qux")
true
> obj.hasOwnProperty("toString")
false

> Object.getOwnPropertyDescriptor(obj, "qux")
{ value: 2,
  writable: false,
  enumerable: false,
  configurable: false }
> Object.getOwnPropertyDescriptor(obj, "toString")
undefined

创建,删除和定义属性仅影响原型链中的第一个对象:

obj.propName = value
obj["propName"] = value

delete obj.propName
delete obj["propName"]

Object.defineProperty(obj, propName, desc)
Object.defineProperties(obj, descObj)


5. 最佳实践

一般规则是系统创建的属性是不可枚举的,而用户创建的属性是可枚举的:

> Object.keys([])
[]
> Object.getOwnPropertyNames([])
[ 'length' ]
> Object.keys(['a'])
[ '0' ]

这特别适用于原型对象中的方法:

> Object.keys(Object.prototype)
[]
> Object.getOwnPropertyNames(Object.prototype)
[ hasOwnProperty',
  'valueOf',
  'constructor',
  'toLocaleString',
  'isPrototypeOf',
  'propertyIsEnumerable',
  'toString' ]

因此,对于咱们的代码,应该忽略可枚举性。通常不应该向内置原型和对象添加属性,但如果这样做,咱们就应该使它们不可枚举以避免破坏内置代码。

正如咱们所看到的,非可枚举性主要受益于for-in并且确保使用它的遗留代码不会中断。 不可枚举的属性创建了一种错觉,即for-in仅迭代用户创建的对象自有的属性。 在咱们的代码中,如果可以,应该避免使用for-in。

原文:https://2ality.com/2012/08/instanceof-object.html

链接: http://www.fly63.com/article/detial/5244

js Date对象

Date对象对日期和时间进行存储和计算;获取当前的系统时间new Date();返回值就是当前系统时间 ;new Date(1000*60*60*24),返回值是距离计算机元年对应的日期时间;获取Date中的日期时间

Js event对象offsetX,pageX,screenX,clientX

平时在测量元素位置时难以确定,下面给出具体的event对象中的各种属性,以便日后使用。检测相对于浏览器的位置:clientX和clientY,当鼠标事件发生时,鼠标相对于浏览器左上角的位置

Js数学对象Math

写在前面:Javascript 中Math和其他对象不同,它具有数学常数和函数的属性和方法。因为它的属性是数学常数,所以不能被改变(可以进行赋值操作,但最后值不变)。Math的方法就是普通函数

原来JS是这样的_对象属性

同样的字符串赋值到对象,一会儿是字符串类型一会儿是对象,而明明不是对象类型的变量还是可以使用对象属性,为什么会这样呢?JavaScript 中一共有六种主要(语言)类型

JS 的 Document对象

Document 对象是是window对象的一个属性,因此可以将document对象作为一个全局对象来访问。当浏览器载入 HTML 文档, 它就会成为 Document 对象。Document对象的 属性和方法

Js创建对象的4种方式

创建对象的4种方式:方式一:通过对象字面量表示法(又称为直接量、原始方式)。object literals方式二:通过new和构造函数Object()、String()等。方式三:用自定义构造函数来初始化新对象。方式四:通过Object.create()

Js中Error错误对象

error,指程序中的非正常运行状态,在其他编程语言中称为“异常”或“错误”。解释器会为每个错误情形创建并抛出一个Error对象,其中包含错误的描述信息。ECMAScript定义了六种类型的错误。除此之外,还可以使用Error构造方法创建自定义的Error对象,并使用throw语句抛出该对象。

JS基础之传参(值传递、对象传递)

我们需了解什么是按值传递(call by value),什么是按引用传递(call by reference)。在计算机科学里,这个部分叫求值策略(Evaluation Strategy)。它决定变量之间、函数调用时实参和形参之间值是如何传递的。

js对象的封装、继承和多态

面向对象三大特性就是封装继承和多态,简单理解,对于猫这种动物,它本身就是一个封装好的类,你只需要供它吃喝(输入),它就能表现猫的行为(输出),同时它继承了动物所具有的习性(吃东西等~)

Js对象的增删改查

以后看到的,除了5种基本数据类型就是对象 ,JS中表示一个人的信息(name,gender,age),如果使用基本数据类型,我们所创建的变量都是独立的,不能成为一个整体, 对象属于一种复合的数据类型

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全