Object构造函数（一）

Object构造函数

JavaScript中的所有对象都来自 Object；所有对象从Object.prototype继承方法和属性，尽管它们可能被覆盖。例如，其他构造函数的原型将覆盖 constructor 属性并提供自己的 toString() 方法。Object 原型对象的更改将传播到所有对象，除非受到这些更改的属性和方法将沿原型链进一步覆盖。

Object.prototype

可以为所有 Object 类型的对象添加属性，对象原型，上面有封装好的方法。可以供所有的对象继承使用。

（1）Object.prototype.constructor

构造函数指向Object

（2）Object.prototype.hasOwnProperty

判断是否是自身的属性，所有对象继承该属性，对象可以直接调用hasOwnProperty，来判断对象上是否有某个属性，比如：

        var obj = {name: "zhu"};
        console.log(obj.hasOwnProperty("name")); true

可以结合for in，来遍历获取对象自身的属性和属性值。

（3）Object.prototype.toString方法

对象原型的该toString方法可以来识别数据类型，而且每个对象也继承了该toString方法，该方法的详细介绍在“数据类型的toString”有介绍

1、ES5的方法，兼容IE9

这两个方法，在“数据属性和访问器属性”中有介绍

（1）Object.defineProperty()

给对象添加一个属性并指定该属性的配置。

（2）Object.defineProperties()

给对象添加多个属性并分别指定它们的配置。

（3）Object.getOwnPropertyDescriptor() 方法返回指定对象上一个自有属性对应的属性描述符

如果指定的属性存在于对象上，则返回其属性描述符对象（property descriptor），否则返回 undefined。

比如，

正常的对象属性

o = { bar: 42 };
d = Object.getOwnPropertyDescriptor(o, "bar");
 d {
   configurable: true,
   enumerable: true,
   value: 42,
   writable: true
 }

通过defineProperty设置的对象属性

        o = {};
        Object.defineProperty(o, "baz", {
            value: 8675309,
            writable: false,
            enumerable: false
        });
        d = Object.getOwnPropertyDescriptor(o, "baz");
        d = {
            value: 8675309,
            writable: false,
            enumerable: false,
            configurable: false
        }

2、获取对象自身属性或值组成数组

（1）Object.keys() 兼容新ES5 IE9

返回一个包含所有给定对象自身可枚举属性名称的数组。

数组返回索引值组成的数组：

var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr));  console: ['0', '1', '2']

对象返回自身可枚举的属性组成的数组：

var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj));  console: ['0', '1', '2']

var anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj));  console: ['2', '7', '100']

在ES5里，如果此方法的参数不是对象（而是一个原始值），那么它会抛出 TypeError。在ES6中，非对象的参数将被强制转换为一个对象

Object.keys("foo");
TypeError: "foo" is not an object (ES5 code)

Object.keys("foo");
["0", "1", "2"]                   (ES2015 code)

（2）Object.values() 兼容性：Edge 14

返回给定对象自身可枚举值的数组。

        var obj = {
            name: "zhu",
            age: 24
        }
        obj.__proto__ = {
            protoName: "p"
        }
        console.log(Object.values(obj));  ["zhu", 24]
        
        var arr = [];
        for(prop in obj){
            arr.push(obj[prop]);
        }
        console.log(arr);  ["zhu", 24, "p"]

也可以遍历数组，获取数组的值组成的数组，其实就是数组本身。

也可以遍历字符串，把字符串作为数组遍历得到值，组成的数组。

console.log(Object.values('foo')); // ['f', 'o', 'o']

（3）Object.entries() 兼容性：Edge14

返回给定对象自身可枚举属性的 [key, value] 数组。

Object.entries()返回一个数组，其元素是与直接在object上找到的可枚举属性键值对相对应的数组。属性的顺序与通过手动循环对象的属性值所给出的顺序相同。

const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

// array like object
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]

// array like object with random key ordering
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]

// getFoo is property which isn't enumerable
const myObj = Object.create({}, { getFoo: { value() { return this.foo; } } });
myObj.foo = 'bar';
console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ]

// non-object argument will be coerced to an object
console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]

// iterate through key-value gracefully
const obj = { a: 5, b: 7, c: 9 };
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
}

// Or, using array extras
Object.entries(obj).forEach(([key, value]) => {
console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
});

Polyfill 支持IE9以上：

if (!Object.entries)
  Object.entries = function( obj ){
    var ownProps = Object.keys( obj ),
        i = ownProps.length,
        resArray = new Array(i); // preallocate the Array
    while (i--)
      resArray[i] = [ownProps[i], obj[ownProps[i]]];
    
    return resArray;
  };

若想支持IE8，替换上面Object.keys

（4）Object.getOwnPropertySymbols() 兼容性：ES6 Edge12

方法返回一个给定对象自身的所有 Symbol 属性的数组。

与Object.getOwnPropertyNames()类似，您可以将给定对象的所有符号属性作为 Symbol 数组获取。请注意，Object.getOwnPropertyNames()本身不包含对象的 Symbol 属性，只包含字符串属性。因为所有的对象在初始化的时候不会包含任何的 Symbol，除非你在对象上赋值了 Symbol 否则Object.getOwnPropertySymbols()只会返回一个空的数组。

var obj = {};
var a = Symbol("a");
var b = Symbol.for("b");

obj[a] = "localSymbol";
obj[b] = "globalSymbol";

var objectSymbols = Object.getOwnPropertySymbols(obj);

console.log(objectSymbols.length); // 2
console.log(objectSymbols)         // [Symbol(a), Symbol(b)]
console.log(objectSymbols[0])      // Symbol(a)

（5）Object.getOwnPropertyNames() 兼容性ES5 IE9

返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组

该数组对元素是 obj自身拥有的枚举或不可枚举属性名称字符串。数组中枚举属性的顺序与通过 for...in 循环（或 Object.keys）迭代该对象属性时一致。数组中不可枚举属性的顺序未定义。

数组：数组的顺序为定义

var arr = ["a", "b", "c"];
console.log(Object.getOwnPropertyNames(arr).sort());  ["0", "1", "2", "length"]

类数组：

        function foo(){
            console.log(arguments);
            console.log(Object.getOwnPropertyNames(arguments))
        }
        foo("zhu",true,3,5);

结果：

对象：

var my_obj = Object.create({}, {
  getFoo: {
    value: function() { return this.foo; },
    enumerable: false
  }
});
my_obj.foo = 1;

console.log(Object.getOwnPropertyNames(my_obj).sort());  ["foo", "getFoo"]

如果你只要获取到可枚举属性，查看Object.keys或用for...in循环（还会获取到原型链上的可枚举属性，不过可以使用hasOwnProperty()方法过滤掉）

Object构造函数（一）

Object构造函数

猜你喜欢