object 用法总结

Object.assign()
该方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
语法：
Object.assign(target,…sources)
参数说明：
target：目标对象。
…sources：源对象。
返回值：
目标对象。

例子：

  name: "lisa",
  age: 12,
  color: "red"
};
var c = Object.assign({ address: "beijing" }, a);
console.log(c);//结果为{address: "beijing", name: "lisa", age: 12, color: "red"}
console.log(a);//{name: "lisa", age: 12, color: "red"}

Object.assign并不会改变源对象，但是会改变目标对象，如下例子：

  name: "lisa",
  age: 12,
  color: "red"
};
var b={
    job:"teacher"
}
var c = Object.assign(b, a);
console.log(b);//结果{job: "teacher", name: "lisa", age: 12, color: "red"}

上述例子中b的结果被改变了。

注：
如果目标对象中的属性具有相同的键，则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性。

Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标对象的[[Set]]，所以它会调用相关 getter 和 setter。因此，它分配属性，而不仅仅是复制或定义新的属性。如果合并源包含getter，这可能使其不适合将新属性合并到原型中。为了将属性定义（包括其可枚举性）复制到原型，应使用Object.getOwnPropertyDescriptor()和Object.defineProperty() 。
在出现错误的情况下，例如，如果属性不可写，会引发TypeError，如果在引发错误之前添加了任何属性，则可以更改target对象。
注意，Object.assign 不会跳过那些值为 null 或 undefined 的源对象。

Object.key()

读取对象的所有属性。
1.例如，传入一个对象，返回包含对象可枚举的属性

    name: 'lisa',
    age: 12,
    say: function() {
        alert("Hello World");
    }
}
console.log(Object.keys(obj));

打印结果：

注：Object.keys()的结果为一个数组，上面的里面还可以通过length读取属性的个数，Object.keys(obj).length输出结果为3

2.例如，传入一个字符串，返回字符串索引值
var myStr="Hello World"
console.log(Object.keys(myStr));
//打印结果为["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]
#####3.例如，传入一个数组，返回索引值

var arr=['a','b','c'];
console.log(Object.keys(arr));
//结果为['0','1','2']
#####4.例如，构造函数，返回空数组或者属性名

function Demo(name, age) {
    this.name = name;
    this.age = age;
}
console.log(Object.keys(Demo));
//结果为[]是一个空数组

Object.entries()
语法：
Object.entries(obj)
参数：
obj:可以返回其可枚举属性的键值对的对象。
返回值：
给定对象自身可枚举属性的键值对数组。注意：返回的是一个数组。
描述：
Object.entries()返回一个数组，其元素是与直接在object上找到的可枚举属性键值对相对应的数组。属性的顺序与通过手动循环对象的属性值所给出的顺序相同。
Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for…in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环也枚举原型链中的属性）。
如下例子：

const obj1 = { name: "lisa", age: 12, color: "red" };
console.log(Object.entries(obj1));//[["name", "lisa"],["age", 12],["color", "red"]]
Object.getPrototypeOf()
该方法返回参数对象的原型，这是获取原型对象的标准方法。
var F=function(){}
var f=new F();
console.log(Object.getPrototypeOf(f)===F.prototype);
//结果为true
解释：上面代码中，实例对象f的原型是F.prototype
下面几种特殊对象的原型：
// 空对象的原型是Object.prototype
console.log(Object.getPrototypeOf({})===Object.prototype);
//结果为true
//Object.prototype的原型是null
console.log(Object.getPrototypeOf(Object.prototype)===null);
// 结果为true
//函数的原型是Function.prototype
function f(){}
console.log(Object.getPrototypeOf(f)===Function.prototype);
//结果为true

Object.setPrototypeOf()
该方法为参数对象设置原型，返回该参数对象，它接受2个参数，第一个是现有对象，第二个是原型对象。

var a={age:12};
var b={name:'lisa'};
var c=Object.setPrototypeOf(a,b);//设置b为a的原型对象
console.log(c);//结果为{age:12}，返回第一个参数的对象
console.log(Object.getPrototypeOf(a)===b);//结果为true
console.log(a.name);//结果为'lisa',此时对象a可以直接调用对象b中的属性

注释：上面代码中Object.setPrototypeOf方法将对象a的原型设置为对象b，因此a可以共享b的属性。
new命令可以使用Object.setPrototypeOf方法模拟如下：

var F = function() {
    this.foo = "bar";
}
var f = new F();
//等同于
var f = Object.setPrototypeOf({}, F.prototype);
F.call(f);
console.log(f)

上面代码中，new命令新建实例对象，其实可以分成两步。1.将一个空对象的原型设为构造函数的prototype属性（上例是F.prototype），2.将构造函数内部的this绑定这个空对象，然后执行构造函数，使得定义在this上面的方法和属性(上例是this.foo)，都转移到这个空对象上。

Object.create()
生成实例对象的常用方法，使用new命令让构造函数返回一个实例，但是很多时候，只能拿到一个实例对象，它可能根本不是由构造函数生成的，那么能不能从一个实例对象，生成另一个实例对象呢？
js提供了Object.create()方法，来满足这种需求，该方法接受一个对象作为参数，然后以它为原型，返回一个实例对象，该实例完全继承原型对象的属性。

var A = {
    say: function() {
        console.log("我说点啥?")
    }
}
//使用A作为B的原型，此时B将会拥有A的属性和方法
var B = Object.create(A);
//判断B的原型对象是不是A
console.log(Object.getPrototypeOf(B) === A); //结果为true
//B可以直接调用A的方法
B.say(); //结果为”我说点啥?“
//判断A和B的方法是不是同一个?
console.log(B.say === A.say); //结果为true

上面代码中，Object.create方法以A对象为原型，生成了B对象，B继承了A的所有属性和方法。

使用Object.create方法的时候，必须提供对象原型，即参数不能为空，或者不是对象，否则会报错。
如下会报错：
Object.create()；
Object.create(123)

Object.create方法生成的新对象，动态继承了原型。在原型上添加或修改任何方法，会立刻反映在新对象之上。
例如：

var obj1 = {
    p: 1
};
var obj2 = Object.create(obj1);
obj1.p = 2;//修改obj1的p属性的值
console.log(obj2.p);//打印结果为2

上面代码中，obj2继承obj1，修改obj1会影响到obj2

除了对象的原型，Object.create方法还可以接受第二个参数，该参数是一个属性描述对象，它所描述的对象属性，会添加到实例对象，作为该对象自身的属性。

var obj = Object.create({}, {
    p1: {
        value:123,
        enumerable:true,
        configurable:true,
        writable:true
    },
    p2:{
        value:'hello',
        enumerable:true,
        configurable:true,
        writable:true
    }
});
//等同于
var obj = Object.create({});
obj.p1 = 123;
obj.p2 = 'hello';

Object.create方法生成的对象，继承了它的原型对象的构造函数。

function A() {}
var a = new A();
var b = Object.create(a);
b.constructor === A // true
b instanceof A // true

上面代码中，b对象的原型是a对象，因此继承了a对象的构造函数A。

Object.freeze()
Object.freeze() 方法可以冻结一个对象，冻结指的是不能向这个对象添加新的属性，不能修改其已有属性的值，不能删除已有属性，以及不能修改该对象已有属性的可枚举性、可配置性、可写性。该方法返回被冻结的对象。

语法：
Object.freeze(obj)
参数：
obj:要被冻结的对象
返回值：
被冻结的对象。
描述：
被冻结对象自身的所有属性都不可能以任何方式被修改。任何修改尝试都会失败，无论是静默地还是通过抛出TypeError异常（最常见但不仅限于strict mode）。
数据属性的值不可更改，访问器属性（有getter和setter）也同样（但由于是函数调用，给人的错觉是还是可以修改这个属性）。如果一个属性的值是个对象，则这个对象中的属性是可以修改的，除非它也是个冻结对象。数组作为一种对象，被冻结，其元素不能被修改。没有数组元素可以被添加或移除。

这个方法返回传递的对象，而不是创建一个被冻结的副本。

const obj1 = { name: "lisa", age: 12, color: "red" };
Object.freeze(obj1);//冻结obj1
obj1.name="coco";//修改obj1的name属性值，此时会报错，因为obj1的属性被冻结了
delete obj1.age;//报错，不能删除Obj1的属性
obj1.adress="beijing";//报错，不能添加给obj1属性

Object.isFrozen()
该方法判断一个对象是否被冻结。
语法：
Object.isFrozen(obj)
参数：
obj:被检测的对象
返回值：
表示给定对象是否被冻结的Boolean。
描述：
一个对象是冻结的是指它不可扩展，所有属性都是不可配置的，且所有数据属性（即没有getter或setter组件的访问器的属性）都是不可写的。
例如：

var obj={name:"coco",age:12};
Object.freeze(obj);
console.log(Object.isFrozen(obj));//结果为true

Object.values()
方法返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用for…in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。
语法：
Object.values(obj)
参数：
obj:被返回可枚举属性值的对象。
返回值：
一个包含对象自身的所有可枚举属性值的数组。
描述：
Object.values()返回一个数组，其元素是在对象上找到的可枚举属性值。属性的顺序与通过手动循环对象的属性值所给出的顺序相同。

如下例子：

var obj = {
  name: "lisa",
  color: "red",
  age: 12
};
console.log(Object.values(obj));//结果为["lisa", "red", 12]

Object.prototype.isPrototypeOf()
实例对象的isPrototypeOf方法，用来判断该对象是否为参数对象的原型。

//创建一个空对象m1
var m1 = {}
//创建一个对象m2，使用m1作为m2的原型
var m2 = Object.create(m1);
//创建一个m3，使用m2作为m3的原型
var m3=Object.create(m2);
//使用isPrototypeOf来判断m2是否为m3的原型
console.log(m2.isPrototypeOf(m3));//结果为true
//使用isPrototypeOf来判断m1是否为m3的原型
console.log(m1.isPrototypeOf(m3));//结果为true

上面代码中m1和m2都是m3的原型，这表明只要实例对象处在参数对象的原型链上，isPrototypeOf方法都返回true.

Object.prototype. _ _ proto_ _
实例对象的proto属性（前后各两个下划线），返回该对象的原型。该属性可读写。

var obj = {};
var p = {};
obj.__proto__ = p;
Object.getPrototypeOf(obj) === p // true

上面代码通过proto属性，将p对象设为obj对象的原型。
根据语言标准，proto属性只有浏览器才需要部署，其他环境可以没有这个属性。它前后的两根下划线，表明它本质是一个内部属性，不应该对使用者暴露。因此，应该尽量少用这个属性，而是用Object.getPrototypeof()和Object.setPrototypeOf()，进行原型对象的读写操作。
原型链可以用proto很直观地表示。

var A = {
  name: '张三'
};
var B = {
  name: '李四'
};

var proto = {
  print: function () {
    console.log(this.name);
  }
};

A.__proto__ = proto;
B.__proto__ = proto;

A.print() // 张三
B.print() // 李四

A.print === B.print // true
A.print === proto.print // true
B.print === proto.print // true

上面代码中，A对象和B对象的原型都是proto对象，它们都共享proto对象的print方法。也就是说，A和B的print方法，都是在调用proto对象的print方法。

如上所述，proto属性指向当前对象的原型对象，即构造函数的prototype属性。

//创建一个构造函数
var obj = function() {
    this.name = 'lisa';
}
//实例化一个对象
var m1 = new obj();
// 判断实例对象m1的__proto__是否是构造函数的prototype
console.log(m1.__proto__ === obj.prototype); //结果为true
//判断实例对象m1的__proto__是否是当前构造函数的属性，m1.constructor.prototype
console.log(m1.__proto__ === m1.constructor.prototype); //结果为true

```上面的代码首先创建了一个m1实例对象，它的__proto__属性，指向构造函数(obj或m1.constructor)的prototype属性。因此，获取实例对象m1的原型对象，有三中方法：
(1)m1.proto
(2)m1.constructor.prototype
(3)Object.getPrototypeOf(m1);
上面三种方法之中，前两种都不是很可靠。__proto__属性只有浏览器才需要部署，其他环境可以不部署。而m1.constructor.prototype在手动改变原型对象时，可能会失效。推荐使用第三种Object.getPrototypeOf方法，获取原型对象。

Object.getOwnPropertyNames()
该方法返回一个数组，成员是参数对象本身的所有属性的键名，不包含继承的属性键名。

console.log(Object.getOwnPropertyNames(Date));
//结果为 ["length", "name", "prototype", "now", "parse", "UT

上面代码中，Object.getOwnPropertyNames方法返回Date所有自身的属性名。

对象本身的属性之中，有的是可以遍历的（enumerable），有的是不可以遍历的。Object.getOwnPropertyNames方法返回所有键名，不管是否可以遍历。只获取那些可以遍历的属性，使用Object.keys方法。

Object.keys(Date) //结果为一个空数组 []

上面代码表明，Date对象所有自身的属性，都是不可以遍历的。

Object.prototype.hasOwnProperty()
对象实例的hasOwnProperty方法返回一个布尔值，用于判断某个属性定义在对象自身，还是定义在原型链上。

Date.hasOwnProperty('length') // true
Date.hasOwnProperty('toString') // false

上面代码表明，Date.length（构造函数Date可以接受多少个参数）是Date自身的属性，Date.toString是继承的属性。另外，hasOwnProperty方法是 JavaScript 之中唯一一个处理对象属性时，不会遍历原型链的方法。

对象中的数据属性（数据描述符）
数据属性有4个描述内部属性的特性：
（1）configurable
定义：表示能否通过delete删除此属性，能否修改属性的特性，或能否修改把属性修改为访问器属性，如果直接使用字面量定义对象，默认值为true

var person = {}
Object.defineProperty(person, 'name', {
configurable: false,
value: 'lisa'
})
delete person.name; //会报错，configurable为false不能删除

（2）enumerable
定义：表示该属性是否可枚举，即是否通过for-in循环或Object.keys()返回属性，如果直接使用字面量定义对象，默认值为true
（3）writable
定义：能否修改属性的值，如果直接使用字面量定义对象，默认值为true
（4）value
定义：该属性对应的值，默认为undefined

访问器属性（存取描述符）
访问器属性也有4个描述内部属性的特性
（1）configurable
定义：和数据属性的[[Configurable]]一样，表示能否通过delete删除此属性，能否修改属性的特性，或能否修改把属性修改为访问器属性，如果直接使用字面量定义对象，默认值为true
（2）enumerable
定义：和数据属性的[[Configurable]]一样，表示该属性是否可枚举，即是否通过for-in循环或Object.keys()返回属性，如果直接使用字面量定义对象，默认值为true
（3）get
定义：一个给属性提供 getter 的方法(访问对象属性时调用的函数,返回值就是当前属性的值)，如果没有 getter 则为 undefined。该方法返回值被用作属性值。默认为 undefined
（4）set
定义：一个给属性提供 setter 的方法(给对象属性设置值时调用的函数)，如果没有 setter 则为 undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认为 undefined

Object.defineProperty()
功能：
方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。如果不指定configurable, writable, enumerable ，则这些属性默认值为false，如果不指定value, get, set，则这些属性默认值为undefined
语法：
Object.defineProperty(obj, prop, descriptor)
参数说明：
obj: 需要被操作的目标对象
prop: 目标对象需要定义或修改的属性的名称
descriptor: 将被定义或修改的属性的描述符
代码如下：

//定义一个名为obj对象
var obj = new Object();
//为对象obj定义一个属性名为name,然后对name进行描述
Object.defineProperty(obj, 'name', {
configurable: false, //能否通过delete删除name属性，能否修改属性的特性，能否修改把属性修改为访问器属性
writable: true, //能否修改属性的值
enumerable: true, //该属性是否可枚举，即是否通过for...in循环或Object.keys()返回属性
value: 'lisa' //该属性对应的值
})
console.log(obj.name);

Object.defineProperties()
功能:
方法直接在一个对象上定义一个或多个新的属性或修改现有属性，并返回该对象。
语法：
Object.defineProperties(obj, props)
参数说明：
obj: 将要被添加属性或修改属性的对象
props: 该对象的一个或多个键值对定义了将要为对象添加或修改的属性的具体配置

var obj = new Object();
Object.defineProperties(obj, {
name: {
value: '张三',
configurable: false,
writable: true,
enumerable: true
},
age: {
value: 18,
configurable: true
}
})
console.log(obj.name, obj.age) // 张三, 18

Object.getOwnPropertyDescriptor()
功能:
该方法返回指定对象上一个自有属性对应的属性描述符。（自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性）,即返回对象的属性描述。
语法：
Object.getOwnPropertyDescriptor(obj, prop)
参数说明：
obj: 需要查找的目标对象
prop: 目标对象内属性名称

var person = {
name: '张三',
age: 12
}
var des = Object.getOwnPropertyDescriptor(person, 'name');
console.log(des);
// 结果如下：{value: "张三", writable: true, enumerable: true, configurable: true}

功能:
所指定对象的所有自身属性的描述符，如果没有任何自身属性，则返回空对象。
语法：
Object.getOwnPropertyDescriptors(obj)
参数说明：
obj: 需要查找的目标对象

var person = {
name: '张三',
age: 12
}
var des = Object.getOwnPropertyDescriptors(person);
console.log(des);
// 结果如下：
// {
// name: {
// configurable: true
// enumerable: true
// value: "张三"
// writable: true
// },
// age: {
// configurable: true
// enumerable: true
// value: 12
// writable: true
// }
// }

在对象中添加存取描述符属性
// 定义一个对象obj
var obj = {}
// 定义一个变量a
var a = 1;
// 定义一个变量b
var b;
//为obj对象设置一个m属性
Object.defineProperty(obj, 'm', {
configurable: true,
enumerable: true,
//添加存取属性，当读取属性值时，调用get方法
get: function() {
return a + 1;
},
//当设置属性时，调用set方法
set: function(i) {
a = i + 2;
b = i + 1;
}
})
console.log(obj.m); //调用属性的get方法，结果为2
//为属性从新设置一个值，此时会调用set方法
obj.m = 4; //参数i的值就是4
console.log(a); //打印结果为6,a=i+2；i的值是4，所以a=6
console.log(b); //打印结果为5,b=i+1;i的值是4,所以b=5

注意:
1.getter和setter可以不同时使用,但在严格模式下只其中一个,会抛出错误
2.数据描述符与存取描述符不可混用,会抛出错误

value不能和get和set同时使用。
如下：

var obj = {}
var a = 1;
var b;
Object.defineProperty(obj, 'm', {
value:'123',//切记不能使用value和get,set同时使用，会报错
get: function() {
return a;
},
set: function(i) {
b = i + 1;
}
})

详细解读set和get访问器
set是给属性赋值，get是取属性的值，get是得到 一般是要返回的 set 是设置 不用返回

// 定义一个函数person
function person() {
// 定义一个变量age，值为18
var age = 18;
// 为当前函数定义一个personAge属性
Object.defineProperty(this, "personAge", {
//为其设置一个get访问器，当读取该属性时调用get
get: function() {
return age - 10;
},
//为其设置一个set访问器，当更新该属性时调用set
set: function(v) {
age = v;
}
})
}
//实例化person对象
var p = new person();
//读取personAge的值，此时会调用get中的方法
console.log(p.personAge); //打印结果为8
//重新为属性personAge设置一个值，此时会调用set中的方法
p.personAge = 1994;
console.log(p.personAge); //打印结果为1984

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,126评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,254评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,445评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,185评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,178评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,970评论 1赞 284
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,276评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,927评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,400评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,646评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,213评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2赞 345