学习ES6（八）：对象

一、对象的基本创建方式

1. 通过对象字面量来创建对象

字面量本身是一个表达式，所以每次加载的时候，都会创建一个新的对象，并且更新对象中的所有属性。

// 直接通过字面量创建一个空对象
let obj = {} 
 //通过字面量创建并拥有key1,key2属性的对象
let obj2 = { key1:value1,key2:value2 }
//在字面量的创建方法中，如果属性名中有特殊字符或者空格，必须用字符串表示。创建的对象中也可以把对象作为属性值。
let obj3 =  { "key key":"value" ,"key-key":"value2",userinfo:{username:"David",age:11} }

2. 通过new关键字创建对象

通过new关键字调用构造函数来创建并初始化一个新的对象
JavaScript中包含了大量内置对象供开发者使用，比如Object()、Array()、String()、Number()等等。

//可以通过new构造函数来创建(不带参数)
let obj1 = new Object()
//可以通过new构造函数来创建(对象参数)
let obj2 = new Object({name:'张三',age:14})
//不用new关键字也可以生成object对象
let obj3 = Object()

3. 通过原型来创建或继承对象

所有通过对象字面量创建的对象都具有同一个原型对象！

let obj1 = {name:'张三',age:11}
let obj2 = {name:'李四',age:10}
console.log(obj1.__proto__)//[Object: null prototype] {}
console.log(obj2.__proto__)//[Object: null prototype] {}

通过new和构造函数创建的对象的原型就是构造函数的prototype属性引用的对象
使用new关键字创建对象本来就是调用了构造函数来创建，而构造函数的原型也就是通过new关键字调用的构造函数的原型。相当于new关键字call了构造函数，调用了构造函数，再通过构造函数的原型对象来创建。
少数对象没有原型：Object.prototype，它不继承任何属性，在这一点上和字面量创建对象一致

let obj1 = new Object({name:'张三',age:11})
console.log(Object.prototype)//[Object: null prototype] {}

所有内置构造函数都具有一个继承自Object.prototype的原型
意思就是构造函数的原型是Object，所以构造函数的原型的原型也就是Object的原型。

//我们先打印Array的构造函数的原型，再打印object的原型
//Object(0) []
console.log(Array.prototype)
//[Object: null prototype] {}
console.log(Array.prototype.__proto__)
//[Object: null prototype] {}
console.log(Object.prototype)
//true
console.log(Array.prototype.__proto__ === Object.prototype)

可以将构造函数、构造函数的原型、构造函数的原型的原型、Object、Object的原型抽象出来，就可以用一条链来表示。
所以这里引入了原型链的概念：通过层级的原型继承形成的链接

如果我们将顶级原型（Object.prototype）设置新属性，那么是否会随着原型链来继承该属性呢？？
我们给顶级原型设置了新属性，顶级原型按原型链来的每一下级都继承了这个属性。

let arr = {val:'1'}
Object.prototype.newattr = "newattr"
//{val:"1"}
console.log(arr)
//newattr
console.log(arr.newattr)

我们虽然在顶级原型上新增了属性，但是在实例上确看不见该属性，可我们又可以通过**实例[属性名]**的方式来访问。这是为什么呢？
其实是这样的，当在实例上访问这个属性的时候，如果该实例没有这个属性，那么就会随着原型链往上一层找，也就是在arr.__proto__上找这个属性，如果找到了该属性，就返回该属性值，停止寻找。否则，继续往上找，直到找到顶级对象，如果顶级对象都没有这个属性，就返回undefined。
这个方式和计算机网络中本地网络向DNS发起网址解析请求类似，不过一个是往上。一个是往下。

4. 通过Object.create()来创建对象

其实更好的解释是通过Object.create()来创建指定原型的对象。

1. 这里我们指定obj的原型对象为create中的参数，指定了obj继承name和age。

let obj = Object.create({name:'张三',age:11})
既然指定了继承对象，那么肯定能访问该属性。
console.log(obj.name)//张三

2. 如果不继承某个属性和方法的话。那么create的参数必须为null，不能为空！！！！
   否则报错：TypeError: Object prototype may only be an Object or null: undefined

let obj = Object.create(null)
//[Object: null prototype] {}
console.log(obj)

3. 如果想要通过Object.create（）创建一个空对象，那么可以将 create 的参数设为Object.prototype，Object.prototype本来是没有原型的，那么继承它的实例也就没有任何属性。

let obj = Object.create(Object.prototype)
//{}
console.log(obj)

记住：Object.create(null) 和 Object.create(Object.prototype)的最大区别就是：
Object.create(null) 什么也没有，连原型都没有，直接无属性。
Object.create(Object.prototype)起码还有个__proto__。

二、对象属性的访问

1、具体的对象属性，直接通过对象[ 属性名 ]访问

let user={"name":"张三","age":13}
user['name']//张三
user['age']//13

1、对象属性为变量，通过解构方式访问

let user={"name":"张三","age":13}
let {"name":name,"age":age} = user
console.log(name)//张三
console.log(age)//13

//用ES6对象属性的简写方式也可以。
let {name,age} = user
console.log(name)//张三
console.log(age)//13

3、继承

• 声明变量 a，设置 a 的 x属性为1
• 声明变量 b，设置 b 的原型对象为 a，并继承了 a 的所有属性
• 声明变量 c，设置 c 的原型对象为 b，并继承了 b 的所有属性

let a = {};
a.x = 1;
let b = Object.create(a)
b.y = 2;
let c = Object.create(b)
c.z = 3
console.log(c.x+c.y+c.z)//6

由于 c本身 没有 x 和 y 属性，所以会随着继承的原型链往上找，在c的原型对象上找到了y，在b的原型对象上找到了x，也就间接继承了a的x属性和b的y属性。

4、属性访问错误

访问一个不存在的属性不会报错，要么返回属性值，要么返回undefined。
但是如果对象都不存在，那么访问一个不存在的对象的属性就要报错。

三、对象属性的其他

1. 删除属性

方法：delete运算符

delete可以删除对象的属性
它的操作数 应当是一个属性访问表达式！！

let user = {"name":"张三","age":"11"}
console.log("之前:",user) //---->之前: { name: '张三', age: '11' }
delete user.name
console.log("之后:",user)// ---->之后: { age: '11' }

delete只是断开属性和宿主对象的联系，不会操作属性中的属性。

这句话可以理解为，如果一个变量通过属性访问的方式引用了一个对象的某个属性。那么删除该属性的操作结果为那个变量不再引用这个对象的属性。

delete运算符只能删除自有属性，不能删除继承属性。

这句话可以理解为，你的还是你的，他的还是他的。你没有权力操作别人的东西

delete不能删除可配置性为false的属性。

这句话可以理解为，没有权限删除。

2. 检测属性

检测属性就是判断某个对象是否拥有某个属性，有四种方法可以检测。

1. 可以直接通过属性访问的方法，如果有这个属性就会返回属性值，否则返回undefined。
2. 通过 in 运算符，直接判断对象中是否包含该属性

格式：属性名 in 对象

3. 通过hasOwnProperty()，直接判断是否具有该属性。

举例：obj1.hasOwnProperty(属性名)

4. 通过判断属性是否可枚举，来间接检测是否具有该属性。

举例：obj1.propertyIsEnumerable(属性名)

3. 枚举属性

1. 使用 for/in 方法可以在循环体中遍历对象中所有可枚举的属性（包括自有属性和继承的属性）

let user = {"name":"张三","age":"11"}
for (p in user){
	console.log(p,user[p])
}
//name 张三（自有属性）
//age 11（自由属性）
//newattr newattr (继承的属性)

2. Object.keys()，它返回一个数组，数组由可枚举的自身属性组成。不包括继承下来的属性

let obj = Object.create({"name":"张三","age":"11"})
obj.x = 1;obj.y = 2
//[ 'x', 'y' ]
console.log(Object.keys(obj))

3. Object.getOwnpropertyNames()，返回对象所有自有属性的名称，包括不可枚举的。

let user = Object.create({m:10,n:20})
user.x = 1;user.y = 2
//[ 'x', 'y' ]
console.log(Object.getOwnPropertyNames(user))

4. getter和setter

我们将对象中定义并有具体值的数据成为 “数据属性”，数据属性只有一个简单的值。 由getter和setter定义的属性成为
“存取器属性”，当程序设置一个存取器属性的值时，JavaScript调用setter方法，将赋值表达式右侧的值当作参数传入setter。

getter和setter的使用：
看下面的代码：

let user = {
	age:20,
	//通过数据属性来过渡存取器属性。
	// 如果是设置fategae的数值，那么会利用数据属性暂存操作结果
	set fateage(v){
		this.age = v - 1
	},
	// 如果是获取fategae的数值，那么会利用数据属性返回操作结果
	get fateage(){
		return this.age + 1
	},
	// 这里也可以是
	get realage(){
		return this.age
	},
}
//21,20
console.log(user.fateage,user.realage)
//这里是set操作，调用setter操作，改变了age的值
user.fateage = 30
//这里是数据属性访问操作和getter操作。
//29,30
console.log(user.age,user.fateage)

同样，存取器也是可以继承的，接上面的代码，我们尝试一下继承一下setter和getter方法

let newuser = Object.create(user)
newuser.age = 1

先继承，设置一个属性，这个数据必须和setter、getter操作中的this后面的变量一样。不然setter和getter找不到操作目标。

//这里是数据属性访问操作和getter操作。
//1,2
console.log(newuser.age,newuser.fateuser)
//同样进行setter操作
newuser.fateage = 10
// 9,9
console.log(newuser.age,newuser.realage)

5. 属性的特性

除了包含名字和值之外，属性还包含一些标志它们可写，可枚举和可配置的特性。可以通过这些API给原型对象添加方法，并将它们设置成不可枚举的，这样就不能继承。由此成为内置方法。也可以通过这些方法给对象定义不能修改或删除的属性，借此”锁定“对象。

数据属性的四个特性：

• 值
• 可写性
• 可枚举性
• 可配置性

由于存取器没有固定的数值，所以没有值属性。其次，存取器的可写性是取决于有没有setter方法。

存取器属性的四个特性：

• 读取（get）
• 写入（set）
• 可枚举性
• 可配置性

当我们想对对象的单个属性特性（数据属性/存取器属性）进行查询和设置操作时，可以使用Object.getOwnPropertyDescriptor(对象名，属性名)，对于继承属性和不存在属性返回undefined。

let user = {"name":"张三","age":12}
//{ value: '张三', writable: true, enumerable: true, configurable: true }
console.log(Object.getOwnPropertyDescriptor(user,"name"))

以上只是查询操作。如果要想设置属性特性的话，需要使用 Object.defineProperty(要修改的对象，创建或修改的属性名，属性描述符对象)

let user = {"name":"张三","age":12}
//{ value: '张三', writable: true, enumerable: true, configurable: true }
console.log(Object.getOwnPropertyDescriptor(user,"name"))
//配置user的name属性为不可修改,描述符对象不必写完
Object.defineProperty(user,"name",{
	writable:false
})
//{ value: '张三', writable: false, enumerable: true, configurable: true }
console.log(Object.getOwnPropertyDescriptor(user,"name"))

当完成上述属性特性的修改后，我们可以尝试修改user的name值：

user.name = "李四"
// 输出为张三，此时user的name属性为不能修改的。
console.log(user.name)

如果要同时修改或创建多个属性的话，要使用Object.defineProperties(要修改的对象名，嵌套的对象)

let p = Object.defineProperties({},{
	name:{writable:false},
	age:{writable:false},
	r:{
		get:function(){
		return xxxxx
	},
	enumerable:true,
	configurable:true
	}
})

四、原型属性

1. 使用对象字面量创建的对象，使用Object.prototype作为它们的原型
2. 使用new或者构造函数创建的对象，使用构造函数constructor属性的prototype作为它们的原型
3. 使用Object.create()创建的对象，使用第一个参数作为它们的原型。

要想查询一个对象的原型，可以使用Object.getPrototypeOf(要查询的对象名)

let user = {}
console.log(Object.getPrototypeOf(user))
console.log(user.__proto__)
let user1 = new Object({"name":"张三"})
console.log(Object.getPrototypeOf(user1))
console.log(user1.__proto__)
let user2 = new Array([1,2,3])
console.log(Object.getPrototypeOf(user2))
let user3 = Object.create(user2)
console.log(Object.getPrototypeOf(user3))
//[Object: null prototype] { newattr: 'newattr' }
//[Object: null prototype] { newattr: 'newattr' }
//[Object: null prototype] { newattr: 'newattr' }
//[Object: null prototype] { newattr: 'newattr' }
//Object(0) []
//[ [ 1, 2, 3 ] ]

要想检测一个对象是否是另一个对象的原型（或处于原型链中），可以使用isPrototypeOf()
凡是在对象原型链以上的都是该对象的原型。

let user3 = Object.create(user2)
console.log(user2.isPrototypeOf(user3))
console.log((Object.prototype).isPrototypeOf(user2))
console.log((Array.prototype).isPrototypeOf(user2))
//true
//true
//true