译者：前端小智作者：Dr.Axe l来源：2ality



阿里云最近在做活动，低至2折，有兴趣可以看看：

https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=pxuujn3r


 

为了保证的可读性，本文采用意译而非直译。

属性决定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

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

 

交流

我是小智，公众号「大迁世界」作者，对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！

关注公众号，后台回复福利，即可看到福利，你懂的。



每次整理文章，一般都到2点才睡觉，一周4次左右，挺苦的，还望支持，给点鼓励

对象是JS的基本数据类型。对象是一种复合值，它将很多值聚合在一起，可通过名字访问这些值。对象也可看作是属性的无序集合，每个属性都是一个 名/值 对。属性名是字符串，因此我们可以把对象看成是从字符串到值的映射。除了可以保持自有的属性，JS还可以从一个称为原型的对象继承属性。
除了字符串，数字，true, false, null, undefined之外，JS中的值都是对象。
对象最常见的用法是创建，设置，查找，删除，检测和枚举它的属性。


属性包括名字和值。属性名可以是包含空字符串在内的任意字符串，但对象中不能存在两个同名的属性。值可以是任意JS值，或者是一个getter或setter函数。


除了名字和值之外，每个属性还有一些与之相关的值，称为“属性特性”：

可写 —— 表明是否可以设置该属性的值
可枚举 —— 表明是否可以通过for/in循环返回该属性
可配置 —— 表明是否可以删除或修改该属性

除了包含属性之外，每个对象还拥有三个相关的对象特性：

对象的原型（prototype）—— 指向另外一个对象，本对象的属性继承自它的原型对象
对象的类（class）—— 是一个标识对象类型的字符串
对象的扩展标记（extensible flag）—— 指明了是否可以向该对象添加新属性

三类JavaScript对象：

内置对象（native object）—— 是由ECMAScript规范定义的对象或类。例如，数组，函数，日期和正则表达式都是内置对象
宿主对象（host object）—— 是由JS解释器所潜入的宿主环境定义的（如浏览器）。
自定义对象 —— 是由运行中的JS代码创建的对象

两类属性：

自有属性 —— 是直接在对象中定义的属性
继承属性 —— 是在对象的原型对象中定义的属性



创建对象
可以通过对象直接量，关键字new 和Object.create()函数来创建对象。
对象直接量创建对象
创建对象最简单的方式就是在JavaScript代码中使用对象直接量。
对象直接量是由若干名/值对组成的映射表，名/值对 中间用冒号分隔，名/值对 之间用逗号分隔，整个映射表用花括号括起来。
例如：

var empty = {};
var point = (x:0, y:0);
var book = {
    "main title":"JavaScript",
    "sub-title":"The Definitive Guide",
     author : {                           // 这里的属性名没有引号
        first:"David",
        surname:"Flanagan"
    }
}


对象直接量是一个表达式，这个表达式的每次运算都创建并初始化一个新的对象。


原型（对象直接量的原型）
每一个JS对象都和另一个对象相关联，即原型，每一个对象都从原型继承属性。
所有通过对象直接量创建的对象都具有同一个原型对象，并可以通过JS代码Object.prototype获得对原型对象的引用。


通过new 创建对象
关键字 new 后跟着一个函数调用，这里的函数称作 构造函数，构造函数用以初始化一个新创建的对象。
JS语言核心中的原始类型都包含内置构造函数。
例如：

var o = new Object();  // 创建一个空对象，和{}一样
var a = new Array();   // 创建一个空数组，和[]一样

Object.create()
Object.create()是一个静态函数，第一个参数是这个对象的原型，第二个参数可选，用以对对象的属性进一步描述。
例如：

var o1 = Object.create({x:1, y:2});  // o1继承了属性x 和 y



如果需要创建一个普通的空对象，需要传入Object.prototype：

var o3 = Object.create(Object.prototype);  // o3和｛｝和new Object()一样


对象属性的查询和设置

可以通过点（.）和方括号（[]）运算符获取属性的值。
例如：

var author = book.author;       // 得到book的“author”属性
var name = author.surname       // 得到获得author的“surname”属性
var title = book["main title"]  //得到book的“main title”属性


通过点和方括号也可以创建属性或给属性赋值：

book.edition = 6;                   // 给book创建一个名为"edition"的属性
book["main title"] = "ECMAScript";  // 给"main title"属性赋值


查询一个不存在的属性并不会报错，如果在对象滋生的属性或继承的属性中均为找到属性，属性的访问表达式返回undefined。
但是，如果对象不存在，那么视图查询这个不存在的对象的属性就会报错。


删除对象属性
delete 运算符可以删除对象的属性。
它的操作数应当是一个属性访问表达式。delete只是断开属性和宿主对象的联系，而不会去操作属性中的属性。
例如：

delete book.author;
delete book["main title"];


delete运算符只能删除自有属性，不能删除继承属性。
delete不能删除那些可配置性为false的属性


检测对象属性
经常要判断某个属性是否存在与某个对象中。
可以通过in运算符，hasOwnProperty()和propertyIsEnumerable()方法来完成这个工作，甚至仅通过属性查询也可以。

in运算符 —— 左侧是属性名，右侧是对象，如果对象的自有属性或继承属性中包含这个属性则返回true。

例如：

var o = {x:1}
"x" in o;        // true
"y" in o;        // true
"toString" in o  // true, o 继承toString属性



对象的hasOwnProperty()方法 —— 用来检测给定的名字是否是对象的自有属性，对于继承属性它将返回false；

例如：

var o = {x:1}
o.hasOwnProperty("x");         // true
o.hasOwnProperty("y");         // false
o.hasOwnProperty("toString");  // false;继承属性



propertyIsEnumerable()方法 —— 是hasOwnProperty()的增强版，只有检测到是自有属性且这个属性的可枚举性为true时它才返回true。
除了使用in 运算符之外，另一种更简便的方法是使用“！＝＝”判断一个属性是否是undefined。！＝＝可以区分undefined和null

例如：

var o = {x:1}
o.x !== undefined;          // true
o.y !== undefined;          // false
o.toString !== undefined;   // true


枚举对象属性


for/in循环，例如：


var o = {x:1, y:2,z:3};
for (p in o)
    console.log(p);  // 输出x,y,z



函数Object.keys()
函数Object.getOwnPropertyNames()

属性getter和setter


对象的三个属性
每个对象都有与之相关的原型，类，和可扩展性。
原型属性
对象的原型属性是用来继承属性的。
原型属性是在实例对象创建之初就设置好的：

通过对象直接量创建的对象使用Object.prototype作为它们的原型
通过new创建的对象使用构造函数的prototype属性作为它们的原型
通过Object.create()创建的对象使用第一个参数作为它们的原型

要想检测一个对象是否是另一个对象的原型，使用isPrototypeOf()方法：

var p = {x:1};
var o = Object.create(p);
p.isPrototypeOf(o);      //=> true



类属性
对象的类属性是一个字符串，用以表示对象的类型信息。

通过内置构造函数（Array和Date）创建的对象包含“类属性”，它与构造函数名称相匹配
通过对象直接量和Object.create()创建的对象的类属性是“Object”
那些自定义构造函数创建的对象也是一样，类属性也是“Object”



可扩展性
对象的可扩展性用以表示是否可以给对象添加新属性。



序列化对象
对象序列化是指将对象的状态转换为字符串，也可以将字符串还原为对象。
ECMAScript提供了内置函数JSON.stringify()和JSON.parse()来序列化和还原JS对象。这些方法都适用JSON作为数据交换格式。
例如：

o = {x:1, y:{z:[false,null,""]}};
s = JSON.stringify(o);                 // s是 '{"x":1,"y":{"z":[false,null,""]}}'
p = JSON.parse(s);



对象方法
所有的JS对象都从 Object.prototype继承属性，这些属性主要是方法。
toString()方法
toString()方法没有参数，它将返回一个表示调用这个方法的对象值的字符串。
在需要将对象转换为字符串的时候，JS都会调用这个方法。
很多类都带有自定义的toString()方法。
toLocaleString()方法
这个方法返回一个表示这个对象的本地化字符串。Object中默认的该方法并不做任何本地化自身的操作，它仅调用toString()方法并返回对应值。
toJSON()方法
Object.prototype实际上没有定义toJSON()方法，但对于需要执行序列化的对象来说，JSON.stringify()方法会调用toJSON()方法。
valueOf()方法
当JS需要将对象转换为某种原始值而非字符串的时候才会调用它，尤其是转换为数字的时候。

javascript是一种动态语言，不管你是否接受，它就是这样的，有些东西你必须接受它，才可以享受它提供的服务。

看书籍看的多了，也渐渐有了自己的看法。

Javascript在对象生成后，可以任意给该对象添加属性或者方法。

var o = {}; // 我发现了一个东西。

o.eat = function(){return "I am eating."}  // 我发现它会吃；

o.sleep = function(){return "ZZZzzz..."} 

// 我发现它会睡；

o.talk = function(){return "Hi!"} // 我发现它会说话；

o.think = function(){return "Hmmm..."} // 我发现它还会思考。

var Human = new Function(); // 我决定给它起名叫“人”。

Human.prototype = o; // 这个东西就代表了所有“人”的概念。

var h = new Human(); // 当我发现其他同它一样的东西，

alert(h.talk()) // 我就知道它也是“人”了！

上面这个代码足可以说明这些。

 

javascript本身没有类，但是我们在经典的OOP中知道，有了类才可以有对象。看过《悟透Javascript》这本书的话，可以知道在 JavaScript 中，用 new 关键字创建对象是执行了下面三个步骤的：
创建一个新的普通对象；
将方法对象的 prototype 属性的所有属性复制到新的普通对象中去。
以新的普通对象作为上下文来执行方法对象。

其实这里就利用了继承，集成了函数的方法，这是因为在Javascrit中，函数具有波粒二象性的，既可以当做对象使用，又可以当做方法去执行，其实也就是Call和Apply这两个玩意儿。

如果说第二步是为了继承函数的方法，那么第三步也是很关键的，Javacript中有作用域的概念，也就是上下文，这里牵扯到一个this，在Java等语言中this有明确的含义，就是当前类的当前对象，而Javascript中，这个玩意不确定，这一点需要注意。

我感觉才开始的时候this指的就是Window的作用域，当我们定义一个函数的时候，这个函数其实也就是在window的上下文中的，不信可以看下面的，这个this在这里就是window。





var b
 = function()
 {

    alert(this.value);

   }

    

   b();

    

   window.b();





 因为call和apply这两个函数是函数的一个方法，只是apply和call的参数不一样，前者是一个数组，而后者是一个参数列表，函数就是通过这两个方法来改变内部的this的。





<script
 type="text/javascript">

    

   var b
 = function()
 {

    alert(this.value);

   }

    

   b();

    

   window.b();

    

   var b1
 = {value:"this
 is b1"};

    

   var b2
 = {value:"this
 is b2"};

    

   b.call(b1);

    

  </script>





 当调用了call方法或者apply方法，那么相当于将函数附加到b1这个对象上了。

看到这些，感觉Javascript里面都是动态的，当调用了apply或者call的时候，不知道内部是不是将这个函数动态添加到这个新的对象上了，b1本身没有b这个函数，自然不能调用，而用了这两个方法后，相当于执行了b1.b()，那么这个时候的this指向的就是b1了，从这里可以看出this始终指向当前的作用域对象。在调用apply和call的时候只是更改了作用域而已。

一.对象：

它可以看作为物体，而且分为思维对象（物体）和实在对象（物体）。思维对象指的是我们在大脑中想象或假设出来的物体，它不存在于现实空间中；而实在对象指的是当时真正存在于我们生活空间的物体，它是可见的。例如一本书、一张桌子都可以看作为对象，如果这本书当时是可见的，那么这本书即是实在对象，反之则是思维对象。
二. 对象的属性：

指的是对象本身所具有的特性。对象既然可以看作是物体，那么这个物体本身所具有的颜色、形状、大小、名称、位置等，都可以看作是这个对象的属性。对象的属性有的是可以改变的，有的是不能改变的（只读属性）。比如说，我把一本书从桌子上扔到地上，那么这本书的位置属性就发生了改变，但是，制作这本书的原料和书的内容却是不可以改变的（只读属性）。
三. 对象的方法：

它可以看作是对象所做的动作，它可以返回结果（功能函数）。例如打开一本书，结果书打开了，返回的结果为真（True）；若这本书带有密码锁，但是我们没有密码，再去做“打开书”这个动作，结果便是失败，返回假（False）。当然，还有不想返回结果的动作（即过程），比如说一位朋友想通过你去约你的同事吃饭，然后你去传达了这件事情，所以“传达”这个动作你已经做了，但是具体他（你的同事）是否应邀，那就与你无关了，因此你不会想得到这个结果。
四. 对象的事件：

是当对象的某种属性状态发生改变的时候所发出的通知。当然，很多事件是没有通知的，例如美国总统昨晚喝了一杯咖啡，虽然这杯咖啡的位置状态发生了改变（从杯子里到总统的肚子里），但是你不会得到什么通知。因此可以说事件的通知大多是人为加上的。比如你用“热得快”烧水，你可以在一定的范围内去做别的事情，当水烧开的时候，水的状态发生改变（沸腾），并激发了事件，“热得快”就会鸣响发出通知，而后你就可以在这个事件发生时去处理某些事情（拔下电源）。