从零开始学_JavaScript_系列（39）——对象的扩展（2）Object对象的扩展方法

以你之姓@ 2022-06-13 23:40 257阅读 0赞

# 对象的扩展 #

## 0、一句话总结 ##

1.  属性名，以及是属性的函数的简洁写法，写起来简单易阅读
2.  属性名可以用变量字符串拼接起来（话说以前也有吧？）
3.  函数都有name属性，但set和get也要加前缀
4.  Object.is判断两个变量是否相等
5.  Object.assign可以合并对象的非原型链上，且可枚举属性
6.  Object.getOwnPropertyDescriptor查看属性是否可枚举、可修改、可赋值
7.  Object.keys获取对象非原型链上，且可枚举属性的key
8.  Object.values获取对象非原型链上，且可枚举属性的值
9.  Object.entries同时获取上面两个
10. 当属性在原型链上，或者不可枚举时，会被很多方法忽视（参照6.1）
11. \_\_proto\_\_和prototype的关系（参照7.1）
12. Object.setPrototypeOf(obj, prototype)设置\_\_proto\_\_属性
13. Object.getPrototypeOf(obj)获取\_\_proto\_\_属性
14. es7新增对对象有效的扩展运算符…（三个点）

本篇没有的请翻看【对象的扩展】系列的其他篇

## 4、Object的扩展 ##

### 4.1、判断两个变量是否相等(Object.is) ###

> Object.is(value1, value2);

简单的说，判断2个值是否相等，相等返回true，不等返回false。

类似===，但与其在某些表现略有差异，如代码：

Object.is(+0, -0);   //false
    +0 === -0;  //true
    
    Object.is(NaN, NaN);    //true
    NaN === NaN;  //false

另外需要在注意的是，按引用传递类型，比如\{\}或者\[\]，哪怕看起来都是空数组、空对象，但2个不同的变量作为参数时，他们是不相等的。

（我似乎提升

### 4.2、将对象的属性合并到另外一个对象之中(Object.assign) ###

#### 4.2.1、定义 ####

> Object.assign(target, …sources)

简单来说，就是将参数2，3，4……里面的对象的所有 **可枚举** 属性，添加到参数1这个对象之中。

返回值是参数1这个对象（但因为对象是按引用传递，所以返回值和参数1是一样的）；

需要注意的是，被添加对象的属性的数据类型，如果是按引用传递，那么该属性将以按引用传递的形式添加到第一个参数之中。

#### 4.2.2、属性覆盖： ####

同名属性，参数位置靠后者覆盖靠前者。

var foo = {
        name: "1"
    }
    var target = {
        name: "target"
    }
    Object.assign(target, foo);
    console.log(target.name);    //"1"

#### 4.2.3、必须可枚举 ####

可枚举，具体来说，就是该属性enumerable值为false时，如代码

注意：

通过 Object.defineProperty 方法添加新属性，未设置的属性名，不然上面里不包含writable和configurable，其默认值为false

#### 4.2.4、参数一必须是对象或者可以转为对象 ####

参数一如果不是对象，那么至少要能转为对象，例如：

var num = Object.assign(1);
    console.log(num);    //Number {
       [[PrimitiveValue]]: 1}
    
    //作为对比
    new Number(1);    //Number {
       [[PrimitiveValue]]: 1}

说明num是一个Number类型的对象。他可以像number一样进行正常的数学运算；

也可以像一个对象一样添加属性，只要不对它进行赋值，那么就会一直保持是对象状态。

如代码：

var num = Object.assign(1);
    typeof num; //"object"
    Object.assign(num, {name: "obj"});
    num.name;   //"obj"
    num + 10;   //11
    Object.prototype.toString.call(num);    //"[object Number]"

类似可以推导到Boolean类型、String类型等基本类型，甚至可以对正则表达式使用，如代码：

var reg = Object.assign(/\d/, {name: "reg"})
    reg;    // /\d/
    reg.name;   //"reg"

但，基本类型里，`null` 和 `undefined` 不行。

另外，参数一也不能是函数，不管是声明的还是变量赋值的都不行，除非通过new生成该函数的实例。

var test = function () { 
    }
    var res = Object.assign(test, {name: "fun"});
    //Uncaught TypeError: Cannot assign to read only property 'name' of function 'function () {}'

#### 4.2.5、其他参数会隐式转换为对象，并且将可枚举属性添加进去 ####

之前提过，只有 **可枚举** 的属性可以添加，因此假如其他参数是number或者boolean显然是不行的，即使被转换为对象，也无法添加。

因此，基本类型里只有string有意义，例如”string”转为对象后，key为”0”时，值为”s”。

而扩展类型里，Array也是有意义的，他的下标就是key，并且该key可以被枚举。

#### 4.2.6、再次提示，这种拷贝方法是浅拷贝 ####

如果只是要合并属性是可以用的，但注意是浅拷贝，也就是数据类型为按引用传递类型时，只拷贝引用，而不是创建一个新的。

如果有深拷贝的需求，请自行寻找办法。

另外，因为这种方式是浅拷贝，所以不会递归执行，

因此也不必担心参数2和参数3有同名属性且该属性是按引用传递，参数3覆盖参数2在参数1的属性时，导致参数2这个对象的属性的值受到影响。

具体来说，其实质就是：

//a,b,c都有属性name,且name是不同的对象
    Object.assign(a,b,c);
    a.name = b.name;
    a.name = c.name;
    //结果是a.name = c.name，但b.name的值因为不是递归，所以自身不受影响。

#### 4.2.7、对setter和getter不会正确生效 ####

简单来说，set和get复制过来后，复制的仅是值，而不包括setter和getter的函数。如代码：

注意看以上，从foo通过assign将属性合并到bar后，val属性变成一个普通变量了。

对val属性的赋值和获取，也没有正确生效。

**解决办法：**

通过`Object.getOwnPropertyDescriptors(obj)`（参照4.3）和`Object.defineProperties()`两个方法完成获取和定义。

如代码：

### 4.3、查看是否可枚举、可修改、可赋值(Object.getOwnPropertyDescriptor) ###

> Object.getOwnPropertyDescriptor(obj, prop)  
> Object.getOwnPropertyDescriptors(obj) //需要es7，IE11不支持

获取enumberable、configurable和writable属性，以及value，和通过Object.defineProperty设置其的行为类似。

第一个获取指定属性的，第二个获取所有属性的，就像设置他们一样的形式来获取；

### 4.4、获取对象所有key(Object.keys) ###

> Object.keys(obj)

获取obj对象，非原型链上，enumberable的值为true的所有属性的key，依次放到数组中并返回该数组。

### 4.5、获取对象所有值(Object.values) ###

> Object.values(obj)

按照MDN说法，这个是实验性的，IE不兼容。但是我实测结果，IE11开IE9的文档模式，这个方法是可以正常执行的。

效果是获取obj对象，非原型链上，enumberable的值为true的所有属性的values。同样依次放到一个数组中并返回该数组。

代码参照4.4

### 4.6、同时获取对象的所有key和value(Object.entries) ###

> Object.entries(obj)

兼容性不好，IE11才能跑，10都不行。

也是只对非原型链，以及enumerable值为true的才有效。

返回一个数组，数组的每个元素是一个key+val组合。

返回数组的每个元素也是一个数组，下标为0的地方为key，下标为1的为value。

如代码：

var obj = Object.create({a: "A"}, {
        b: {
            value: "B",
            enumerable: true
        },
        c: {
            value: "C",
            enumerable: true
        }
    });
    console.log(Object.entries(obj));   //[["b", "B"], ["c", "C"]]

## 5.属性的可枚举性 ##

### 5.1、如何设置可枚举性 ###

> Object.defineProperty(obj, prop, descriptor)  
> Object.defineProperties(obj, props)

第一个设置单个属性的，第二个可以同时设置多个属性。

通过设置属性的enumerable属性来设置其是否可枚举，true可枚举，false不可枚举。

在未锁定前可以设置，锁定后不可修改（并且会报错）

### 5.2、查看是否可枚举（以及其他） ###

参照4.3中的：

> Object.getOwnPropertyDescriptor(obj, prop)  
> Object.getOwnPropertyDescriptors(obj) //需要es7，IE11不支持

### 5.3、当可枚举属性为false时，被忽视的情况 ###

`for in` 遍历对象属性；

`Object.keys()` 获取所有key