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

2022-11-20 08:55:42

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;     //

Object.getOwnPropertyNames(obj).length;     //

其他静态方法
- 对象属性模型的相关方法
  - 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.valueOf，覆盖Object.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 object

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

{

    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    每次读取该属性，都会调用这个取值函数
                       // 一旦定义了取值函数get（或存值函数set），就不能将writable属性设为true

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

}

// 方式1
var 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 //
  
  obj.p = 246;
  
  obj.p //
```

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    //

obj.p2    // "abc"

obj.p3    // "123abc"

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

元属性

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

value 属性是目标属性的值

var obj = {};

obj.p = 123;

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

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

obj.p    //

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);

    }

};

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

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     //

obj.next = 10;

obj.next     //

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)){
            // hasOwnProperty 来过滤掉继承的属性，否则会报错，因为Object.getOwnPropertyDescriptor读不到继承属性的属性描述对象

            continue;

        }

        Object.defineProperty(

            to,

            property,

            Object.getOwnPropertyDescriptor(from, property)

        );

    }

    return to;

}

extend({}, { get a(){ return 1 } })

// { get a(){ return 1 } })

控制对象状态

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

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]);

    };

};

码农公寓

相关文章