js入门(ES6)[四]---对象

推荐 菜鸟教程 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()