推薦 菜鳥教程 https://www.runoob.com/w3cnote/es6-object.html
本文中也穿插講了函式 如果不懂 移步
js入門(ES6)[五]—函式

什么是物件？

物件就是一個個體 比如人 屬性有 耳朵 眼睛 鼻子 等等 人會動 會吃飯 會說話

定義物件

物件有屬性 好比人有眼睛鼻子
物件有方法 好比人會說話吃飯

屬性定義

代碼中的方法都可以

1. name:“屬性值” 或者 “name”:“屬性值”
2. 如果在外部定義了 比如var phone = 123456 那么 在內部直接寫phone即可 因為它是具名引數
3. 字串拼接形式 [str1+str2] = “xxxxx” 比如str1=“na” str2=“me” 那么此處為name=“xxxxx”
4. 拓展運算子 傳入陣列全部引數 但是屬性名會從0開始
5. 物件 直接把另外一個物件傳入使用

var phone = 123456;
var loves = ["eat","lashi"];
var hate = {
	best: "eat shit",
	low: "eat myself"
}；
var people = {
	name: "dmhsq",
	"smallName": "dog",
	["ol" + "d"]: 18,
	phone,
	...loves，
	hate
}

console.log(people.name)
console.log(people.smallName)
console.log(people.old)
console.log(people.phone)
console.log(people)
console.log(people.hate)

列印結果如下

方法定義

方法名可以使用屬性定義的那種寫法 注意是屬性名

方法其實也是 物件的屬性 只不過可以執行

方法的定義也有很多種方法

1. 普通定義 類似于下面的say say: function(){xxxx}
2. 參考外部方法 如下的look 在外部定義 參考時這樣寫 saliva:look 或者直接 look
3. 參考其它物件方法 參考時這樣寫 touchDog: dog.bark

function look() {
	return "wow! beautiful girl !"
}
var dog = {
	bark: function() {
		return " Woof, woof, woof "
	}
}
var people = {
	name: "dmhsq",
	smallName: "dog",
	say: function() {
		return "I am a people my name is " + this.name
	},
	["e" + "at"]: function() {
		return this.say() + "I eat you"
	},
	saliva: look,
	look,
	touchDog: dog.bark
}

console.log(people.name)
console.log(people.smallName)
console.log(people.say())
console.log(people.eat())
console.log(people.saliva())
console.log(people.look())
console.log(people.touchDog())

拓展(新增)屬性

方法一

如下 定義了一個people只有一個name屬性 我們增加一個old屬性
且對比增加前后的people

var people = {
	name: "dmhsq"
}
console.log(people.name)
console.log(people.old)
console.log(people)
people.old = 18
console.log(people.old)
console.log(people)

方法二

淺拷貝
使用Object.assign()

Object.assign(本體,拓展1,拓展2…)

使用如下
Object.assign(people,{old:18})
或者
一樣可以參考外部屬性
var old = 18;
Object.assign(people,{old})

示例

var people = {
	name: "dmhsq"
}
console.log(people.name)
console.log(people.old)
console.log(people)
Object.assign(people, {
	old: 18
})
people.old = 18
console.log(people.old)
console.log(people)

拓展(新增方法)

和新增屬性一樣 畢竟大家都是屬性 只是型別不同

方法一

people.say = function() {
	return "hello"
}
或者
function say() {
	return "hello"
}
people.say = say

var people = {
	name: "dmhsq"
}
console.log(people.name)
console.log(people)
people.say = function() {
	return "hello"
}
console.log(people.say())
console.log(people)

方法二

首先 我們不增加say這個方法 直接呼叫 會怎樣？

var people = {
	name: "dmhsq"
}
console.log(people.name)
console.log(people.say())
console.log(people)

答案是 會報錯

我們增加一個方法

淺拷貝
使用Object.assign()

Object.assign(本體,拓展1,拓展2…)

使用如下

Object.assign(people, {
	say: function() {
		return "hello"
	}
})

一樣可以參考外部函式

function say() {
	return "hello"
}
Object.assign(people, {
	say
})

示例

var people = {
	name: "dmhsq"
}
console.log(people.name)
console.log(people)
Object.assign(people, {
	say: function() {
		return "hello"
	}
})
console.log(people.say())
console.log(people)

關于this

其實我們一直都省略了this
一般this指向window
因為在window這個物件中 this就是指window

var people = {
	name: "dmhsq"
}
var num1 = 1;


console.log(this.people)
console.log(this.num1)
console.log(this)
console.log(window)

但是在window下屬的物件中 比如people

var people = {
	name: "dmhsq",
	say: function() {
		console.log(this)
	}
}
console.log(this)
console.log(window)
people.say()