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

水深无声 2022-11-02 00:59 263阅读 0赞

> 推荐 菜鸟教程 [https://www.runoob.com/w3cnote/es6-object.html][https_www.runoob.com_w3cnote_es6-object.html]  
> 本文中也穿插讲了函数 如果不懂 移步[  
> js入门(ES6)\[五\]—函数  
> ][js_ES6_]

### 对象 ###

*  什么是对象？
 *  定义对象
 *   *  属性定义
     *  方法定义
     *  拓展(新增)属性
     *   *  方法一
         *  方法二
     *  拓展(新增方法)
     *   *  方法一
         *  方法二
 *  关于this

# 什么是对象？ #

对象就是一个个体 比如人 属性有 耳朵 眼睛 鼻子 等等 人会动 会吃饭 会说话

# 定义对象 #

对象有属性 好比人有眼睛鼻子  
对象有方法 好比人会说话吃饭

## 属性定义 ##

代码中的方法都可以

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)

打印结果如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70]

## 方法定义 ##

方法名可以使用属性定义的那种写法 注意是属性名

方法其实也是 对象的属性 只不过可以执行

方法的定义也有很多种方法

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())

![在这里插入图片描述][2021022515514033.png]

## 拓展(新增)属性 ##

### 方法一 ###

如下 定义了一个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)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 1]

### 方法二 ###

浅拷贝  
使用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)

![在这里插入图片描述][20210225155931171.png]

## 拓展(新增方法) ##

和新增属性一样 毕竟大家都是属性 只是类型不同

### 方法一 ###

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)

答案是 会报错

![在这里插入图片描述][20210225160323630.png]

我们增加一个方法

浅拷贝  
使用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)

![在这里插入图片描述][20210225160407941.png]

# 关于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)

![在这里插入图片描述][20210225161227350.png]

但是在window下属的对象中 比如people

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

![在这里插入图片描述][20210225161449617.png]

[https_www.runoob.com_w3cnote_es6-object.html]: https://www.runoob.com/w3cnote/es6-object.html
[js_ES6_]: https://dmhsq.blog.csdn.net/article/details/114042673
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70]: /images/20221024/55ab1bd1f2604866947f3f862ae6177c.png
[2021022515514033.png]: /images/20221024/314ea636cd0d42b3a351a35a1fadcfce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 1]: /images/20221024/be50f7961c9049668f48e8bf1712362d.png
[20210225155931171.png]: /images/20221024/27a925e32d534f09986af7add9ad8435.png
[20210225160323630.png]: /images/20221024/b3f52151a5f04a588690fd379173c5b5.png
[20210225160407941.png]: /images/20221024/40a411cce517483da083db56719ab2b0.png
[20210225161227350.png]: /images/20221024/6f6eb00cc60d4439acdb98049d2d43bf.png
[20210225161449617.png]: /images/20221024/8f0481c95c634398a3021f415a7e4d80.png