(74)Wangdao.com第十三天_Object 对象_属性描述对象

时间 2019-11-08

标签 wangdao.com wangdao com 第十三天 3天 object 对象属性描述繁體版

原文原文链接

Object 对象数组

JavaScript 原生提供 Object 对象数据结构

JavaScript 的全部其余对象都继承自 Object 对象，即那些对象都是Object的实例函数

Object 对象的原生方法分红两类：
- Object 对象自己的方法
  - 就是直接定义在 Object 对象的方法
  - 对象自身的方法（又称为”静态方法“）和实例方法两部分
- Object 的实例方法
  - 定义在 Objec 原型对象 Object.prototype 上的方法，能够被 Object 实例直接使用

Object() 自己是一个函数
- 将任意值转为对象。这个方法经常使用于保证某个值必定是对象
  - ```
  var obj = Object();
  
  // 等同于
  var obj = Object(undefined);
  var obj = Object(null);
  
  obj instanceof Object     // true
```
- instanceof运算符用来验证，一个对象是否为指定的构造函数的实例
- obj instanceof Object 返回 true，就表示 obj 对象是 Object 的实例
- Object (原始类型的值) Object 方法将其转为对应的包装对象的实例
- Object (一个对象) 老是返回该对象，即不用转换
  - ```
  // 判断变量是否为对象的函数
  function isObject(value) {
    return value === Object(value);
  }
  
  isObject([]) // true
  isObject(true) // false
```

new Object()构造函数 的首要用途是 : 直接经过它来生成新对象。

// 经过var obj = new Object()的写法生成新对象，
// 与字面量的写法var obj = {}是等价的。
// 或者说，后者只是前者的一种简便写法
// 与二者的语义是不一样的
表示将转成一个对象
则表示新生成一个对象，它的值是Object(value)new Object(value)// Object(value)value// new Object(value)value

Object.keys() 接受一个对象做为参数，返回一个数组，该数组的成员都是该对象自身的（而不是继承的）全部属性名

Object.getOwnPropertyNames() 接受一个对象做为参数，返回一个数组，包含了该对象自身的全部属性名

Object.keys()方法只返回可枚举的属性（详见《对象属性的描述对象》一章）
Object.getOwnPropertyNames()方法还返回不可枚举的属性名

var a = ['Hello', 'World'];

Object.keys(a)     // ["0", "1"]
Object.getOwnPropertyNames(a)     // ["0", "1", "length"]

// 数组的length属性是不可枚举的属性，因此只出如今Object.getOwnPropertyNames() 方法的返回结果

自定义计算对象属性个数的方法

var obj = {
    p1: 123,
    p2: 456
};

Object.keys(obj).length;     // 2
Object.getOwnPropertyNames(obj).length;     // 2

其余静态方法
- 对象属性模型的相关方法
  - Object.getOwnPropertyDescriptor()：获取某个属性的描述对象。
  - Object.defineProperty()：经过描述对象，定义某个属性。
  - Object.defineProperties()：经过描述对象，定义多个属性。
- 控制对象状态的方法
  - Object.preventExtensions()：防止对象扩展。
  - Object.isExtensible()：判断对象是否可扩展。
  - Object.seal()：禁止对象配置。
  - Object.isSealed()：判断一个对象是否可配置。
  - Object.freeze()：冻结一个对象。
  - Object.isFrozen()：判断一个对象是否被冻结。
- 原型链相关方法
  - Object.create()：该方法能够指定原型对象和属性，返回一个新的对象。
  - Object.getPrototypeOf()：获取对象的Prototype对象。

定义在 Object.prototype 对象的实例方法 全部Object的实例对象都继承了这些方法。
- Object.prototype.valueOf() 返回当前对象对应的值。
  - 返回一个对象的“值”，默认状况下返回对象自己
    - var obj = new Object(); obj.valueOf() === obj; // true
  - 自动类型转换时会默认调用这个方法
  - 若是自定义valueOf方法，就能够获得想要的结果
    - var obj = new Object(); obj.valueOf = function () { return 2; }; 1 + obj // 3
      
      // 用自定义的，覆盖obj.valueOfObject.prototype.valueOf
- Object.prototype.toString() 返回当前对象对应的字符串形式。
  - 返回一个对象的字符串形式，默认状况下返回类型字符串
    - var o1 = new Object(); o1.toString() // "[object Object]" var o2 = {a:1}; o2.toString() // "[object Object]" 该字符串说明对象的类型。
  - 经过自定义toString方法，可让对象在自动类型转换时，获得想要的字符串形式。
    - var obj = new Object(); obj.toString = function () { return 'hello'; }; obj + ' ' + 'world' // "hello world"
  - 数组、字符串、函数、Date 对象调用toString方法，并不会返回[object Object]，由于它们都自定义了toString方法，覆盖原始方法
    - [1, 2, 3].toString() // "1,2,3" '123'.toString() // "123" (function () { return 123; }).toString(); // "function () { // return 123; // }" (new Date()).toString(); // "Tue May 10 2016 09:11:31 GMT+0800 (C
  - 直接使用Object.prototype.toString方法。经过函数的call方法，能够在任意值上调用这个方法，帮助咱们判断这个值的类型
    - Object.prototype.toString.call(value);
  - 自定义一个比typeof运算符更准确的类型判断函数
    - var type = function (o){ var s = Object.prototype.toString.call(o); return s.match(/\[object (.*?)\]/)[1].toLowerCase(); }; type({}); // "object" type([]); // "array" type(5); // "number" type(null); // "null" type(); // "undefined" type(/abcd/); // "regex" type(new Date()); // "date" // 在上面这个type函数的基础上，还能够加上专门判断某种类型数据的方法 ['Null', 'Undefined', 'Object', 'Array', 'String', 'Number', 'Boolean', 'Function', 'RegExp' ].forEach(function (t) { type['is' + t] = function (o) { return type(o) === t.toLowerCase(); }; }); type.isObject({}) // true type.isNumber(NaN) // true type.isRegExp(/abc/) // true
- Object.prototype.toLocaleString() 返回当前对象对应的本地字符串形式。
  - 与toString的返回结果相同，也是返回一个值的字符串形式
  - 主要做用是留出一个接口，让各类不一样的对象实现本身版本的toLocaleString，用来返回针对某些地域的特定的值
  - 目前，主要有三个对象自定义了toLocaleString方法
    - Array.prototype.toLocaleString()
    - Number.prototype.toLocaleString()
    - Date.prototype.toLocaleString()
      - // 日期 Date 的实例对象的toString和toLocaleString返回值就不同，并且toLocaleString的返回值跟用户设定的所在地域相关
- Object.prototype.hasOwnProperty() 判断某个属性是否为当前对象自身的属性，仍是继承自原型对象的属性。
- Object.prototype.isPrototypeOf() 判断当前对象是否为另外一个对象的原型。
- Object.prototype.propertyIsEnumerable() 判断某个属性是否可枚举。

属性描述对象 attributes objectui

JavaScript 提供了一个内部数据结构，用来描述对象的属性，控制它的行为，好比该属性是否可写、可遍历等等this

{
    value: undefined,    // 该属性的属性值，默认为undefined

    writable: true,    // 表示属性值（value）是否可改变（便是否可写），默认为true

    enumerable: true,    // 表示该属性是否可遍历，默认为true。若是设为false，会使得某些操做（好比for...in遍历对象和对象原型中能够遍历的属性、Object.keys()）跳过该属性

    configurable: true,    // 表示可配置性，默认为true。若是设为false，将阻止某些操做改写该属性，
                           // 好比没法删除该属性，也不得改变该属性的属性描述对象（value属性除外）。也就是说，configurable属性控制了属性描述对象的可写性。

    get: undefined,    // 表示该属性的取值函数（getter），默认为undefined    每次读取该属性，都会调用这个取值函数
                       // 一旦定义了取值函数（或存值函数），就不能将属性设为

    set: undefined    // 表示该属性的存值函数（setter），默认为undefined
}

// 方式1
getsetwritabletruevar obj = Object.defineProperties({}, {
 p1: { value: 1, enumerable: true },
 p2: { value: 2, enumerable: false }
});

// 方式2
var obj = {name:"Tom", age:"22"};
Object.defineProperty(obj, "name", {
 writable: false, // 属性不可写 
 enumerable: false, // 属性不可遍历 如 for in 将跳过 name 属性
 configurable: false, // 属性不可配置 如 delete name
});

Object.defineProperty(obj, 'fullName', {
 get:function(){
 return this.name + "Michal";
 },
 set:function(newName){
 this.name = newName.split(" ")[0];
 }
});

Object.getOwnPropertyDescriptor() 方法
- 获取对象某个属性的属性描述对象
- 第一个参数是目标对象。
- 第二个参数是一个字符串，对应目标对象的某个属性名。
- 只能用于对象自身的属性，不能用于继承的属性。。。对于继承的属性，返回 undefined
  - ```
  var obj = { p: 'a' };
  
  // 获取obj.p的属性描述对象
  Object.getOwnPropertyDescriptor(obj, 'p');
  
  // Object { 
  //     value: "a",
  //     writable: true,
  //     enumerable: true,
  //     configurable: true
  // }
```
Object.getOwnPropertyNames() 方法
- 返回一个数组，成员是参数对象自身的所有属性的属性名，无论该属性是否可遍历

Object.defineProperty(object, propertyName, attributesObject) 方法
- 经过属性描述对象，定义或修改一个属性，而后返回修改后的对象
- object 属性所在的对象
- propertyName 字符串，表示属性名
- attributesObject 属性描述对象
  - ```
  var obj = Object.defineProperty({}, 'p', {
    value: 123,
    writable: false,    // 不可写    
    enumerable: true,
    configurable: false
  });
  
  obj.p // 123
  
  obj.p = 246;
  obj.p // 123
```

Object.defineProperties()

var obj = Object.defineProperties({}, {
    p1: { value: 123, enumerable: true },
    p2: { value: 'abc', enumerable: true },
    p3: { get: function () { return this.p1 + this.p2 },    // 每次读取该属性，都会调用这个取值函数
        enumerable:true,
        configurable:true
    }
});

obj.p1    // 123
obj.p2    // "abc"
obj.p3    // "123abc"

Object.prototype.propertyIsEnumerable()
- 用于判断某个属性是否可遍历
- 只能用于判断对象自身的属性，对于继承的属性一概返回false
  - ```
  var obj = {};
  obj.p = 123;
  
  obj.propertyIsEnumerable('p');      // true
  obj.propertyIsEnumerable('toString');     // false
```

元属性spa

指属性描述对象的各个属性，即控制属性的属性prototype

value 属性是目标属性的值

var obj = {};
obj.p = 123;

Object.getOwnPropertyDescriptor(obj, 'p').value;    // 123

Object.defineProperty(obj, 'p', { value: 246 });

obj.p    // 246

writable 属性，决定了目标属性的值（value）是否能够被改变

正常模式下，对writable为false的属性赋值不会报错，只会默默失败
可是，严格模式下会报错，即便对 a 属性从新赋予一个一样的值

'use strict';    // 采用严格模式

var obj = {};

Object.defineProperty(obj, 'a', {
    value: 37,
    writable: false
});

obj.a = 37;    // Uncaught TypeError: Cannot assign to read only property 'a' of object

__proto__是原型对象，它的foo属性不可写。obj对象继承proto，也不能够再自定义这个属性了。若是是严格模式，这样作还会抛出一个错误

var proto = Object.defineProperty({}, 'foo', {
    value: 'a',
    writable: false
});

var obj = Object.create(proto);

obj.foo = 'b';
obj.foo     // 'a' 若是是严格模式，此处将抛出一个错误

有一个规避方法，就是经过覆盖属性描述对象，绕过这个限制。缘由是这种状况下，原型链会被彻底忽视
- ```
var obj = Object.create(proto);
Object.defineProperty(obj, 'foo', {
    value: 'b'
});

obj.foo      // "b"
```

enumerable（可遍历性）返回一个布尔值，表示目标属性是否可遍历
- 若是一个属性的enumerable为false，下面三个操做不会取到该属性
- 所以，enumerable能够用来设置“秘密”属性
  - obj.x属性的enumerable为false，因此通常的遍历操做都没法获取该属性，使得它有点像“秘密”属性，
  - 但不是真正的私有属性，仍是能够直接获取它的值

configurable (可配置性）返回一个布尔值，决定了是否能够修改属性描述对象
- configurable为false时，value、writable、enumerable和configurable都不能被修改了
- obj.p的configurable设置为false。而后，改动value、writable、enumerable、configurable，结果都报错
  - 注意，writable只有在false改成true会报错，true改成false是容许的
  - 至于value，只要writable和configurable有一个为true，就容许改动
  - 直接目标属性赋值，不报错，但不会成功。若是是严格模式，还会报错。
  - 可配置性决定了目标属性是否能够被删除（delete）

存取器属性还能够用存取器（accessor）定义

存值函数称为setter，使用属性描述对象的set属性

取值函数称为getter，使用属性描述对象的get属性

一旦对目标属性定义了存取器，那么存取的时候，都将执行对应的函数
利用这个功能，能够实现许多高级特性，好比某个属性禁止赋值

var obj = Object.defineProperty({}, 'p', {
    get: function () {
        return 'getter';
    },
    set: function (value) {
        console.log('setter: ' + value);
    }
});

obj.p    // "getter"
obj.p = 123    // "setter: 123"

JavaScript 还提供了存取器的另外一种写法

var obj = {
    get p() {    // 取值函数get不能接受参数
        return 'getter';
    },
    set p(value) {    // 存值函数set只能接受一个参数（即属性的值）
        console.log('setter: ' + value);
    }
};

存取器每每用于，属性的值依赖对象内部数据的场合。code

var obj ={
    $n : 5,
    get next() { return this.$n++ },
    set next(n) {
        if (n >= this.$n){
            this.$n = n;
        }else{
             throw new Error('新的值必须大于当前值');
        }
    }
};

obj.next     // 5

obj.next = 10;
obj.next     // 10

obj.next = 5;     // Uncaught Error: 新的值必须大于当前值

拷贝对象的全部属性到另外一个对象

var extend = function (to, from) {
    for (var property in from) {
        to[property] = from[property];
    }

    return to;
}

上面这个方法的问题在于，若是遇到存取器定义的属性，会只拷贝值
为了解决这个问题，咱们能够经过Object.defineProperty方法来拷贝属性

var extend = function (to, from) {
    for (var property in from) {
        if (!from.hasOwnProperty(property)){
            // 来过滤掉继承的属性，不然会报错，由于读不到继承属性的属性描述对象
            continue;
        }
        Object.defineProperty(
            to,
            property,
            Object.getOwnPropertyDescriptor(from, property)
        );
    }

    return to;
}

extend({}, { get a(){ return 1 } })
// { get a(){ return 1 } })hasOwnPropertyObject.getOwnPropertyDescriptor

控制对象状态对象

有时须要冻结对象的读写状态，防止对象被改变
blog

JavaScript 提供了强度依次递增的三种冻结方法是,

Object.preventExtensions()

可使得一个对象没法再添加新的属性

var obj = new Object();
Object.preventExtensions(obj);

Object.defineProperty(obj, 'p', {
      value: 'hello'
});    // TypeError: Cannot define property:p, object is not extensible.

obj.p = 1;
obj.p     // undefined

Object.isExtensible() 方法
- 用于检查一个对象是否使用了Object.preventExtensions方法。
- 也就是说，检查是否能够为一个对象添加属性
```
var obj = new Object();

Object.isExtensible(obj);     // true
Object.preventExtensions(obj);
Object.isExtensible(obj);     // fal
```

var newObj = Object.seal(obj); 密封对象，能够读写，可是不能添加新属性，不能删除属性
- 使得一个对象既没法添加新属性，也没法删除旧属性
- Object.seal实质是把属性描述对象的configurable属性设为false，所以属性描述对象再也不能改变
- Object.seal只是禁止新增或删除属性，并不影响修改某个属性的值
- Object.isSealed方法用于检查一个对象是否使用了Object.seal方法
  - Object.isSealed() 为true时，Object.isExtensible方法返回false

var newObj = Object.freeze(obj);
- 可使得一个对象没法添加新属性、没法删除旧属性、也没法改变属性的值——使得这个对象实际上变成了常量
- 当进行修改属性、新增属性、删除属性时，这些操做并不报错，只是默默地失败。
- 若是在严格模式下，则会报错
- Object.isFrozen() 方法用于检查一个对象是否使用了Object.freeze方法
  - 使用Object.freeze方法之后，Object.isSealed将会返回true，Object.isExtensible返回false
  - 用途是，确认某个对象没有被冻结后，再对它的属性赋值, 就不会报错了

上面的三个方法锁定对象的可写性有一个漏洞：能够经过改变原型对象，来为对象增长属性。

var obj = new Object();
Object.preventExtensions(obj);

var proto = Object.getPrototypeOf(obj);
proto.t = 'hello';
obj.t

// hello

解决方案是，把obj的原型也冻结住

var obj = new Object();
Object.preventExtensions(obj);

var proto = Object.getPrototypeOf(obj);
Object.preventExtensions(proto);

proto.t = 'hello';
obj.t     // undefined

若是属性值是对象，上面这些方法只能冻结属性指向的对象，而不能冻结对象自己的内容

var obj = {
    foo: 1,
    bar: ['a', 'b']
};
Object.freeze(obj);

obj.bar.push('c');
obj.bar   // ["a", "b", "c"]

深度冻结对象成一个常量：

function deepFreeze(obj){
    if(typeof obj !== "object"){
        return obj;
    };

    object.freeze(obj);

    for(var attr in obj){
        deepFreeze(obj[attr]);
    };
};