持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情
前言
大家好呀，我是L同学。在上篇文章javascript中的作用域（二）中，我们学习了javascript中的作用域，包括闭包、变量提升、## let const var对比、函数等知识。今天，在这篇文章中，我们继续学习箭头函数、数组和对象的解构赋值、面向对象等相关知识点。
箭头函数
箭头函数是一种声明函数的简洁语法，它与普通函数并无本质的区别，差异性更多体现在语法格式上。箭头函数属于表达式函数，因此不存在函数提升。箭头函数只有一个参数时可以省略圆括号 ()。只有一行代码时可以省略花括号 {}，并自动做为返回值被返回。箭头函数中没有 arguments，只能使用 ... 动态获取实参。
<script>
// 箭头函数
let foo = () => {
console.log('^_^ 长相奇怪的函数...');
}
// 调用函数
foo();
// 更简洁的语法
let form = document.querySelector('form');
form.addEventListener('click', ev => ev.preventDefault());
</script>
解构赋值
解构赋值是一种快速为变量赋值的简洁语法，本质上仍然是为变量赋值，分为数组解构、对象解构两大类型。
数组解构
数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法。 赋值运算符 = 左侧的 [] 用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量。变量的顺序对应数组单元值的位置依次进行赋值操作。变量的数量大于单元值数量时，多余的变量将被赋值为 undefined。但是，当变量的数量小于单元值数量时，可以通过 ... 获取剩余单元值，但只能置于最末位。允许初始化变量的默认值，且只有单元值为 undefined 时默认值才会生效。
<script>
// 普通的数组
let arr = [1, 2, 3];
// 批量声明变量 a b c
// 同时将数组单元值 1 2 3 依次赋值给变量 a b c
let [a, b, c] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
</script>
对象解构
对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法。赋值运算符 = 左侧的 {} 用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量。对象属性的值将被赋值给与属性名相同的变量。对象中找不到与变量名一致的属性时变量值为 undefined。允许初始化变量的默认值，属性不存在或单元值为 undefined 时默认值才会生效。
<script>
// 普通对象
let user = {
name: '小明',
age: 18
};
// 批量声明变量 name age
// 同时将数组单元值 1 2 3 依次赋值给变量 a b c
let {name, age} = user;
console.log(name); // 小明
console.log(age); // 18
</script>
面向对象
构造函数
构造函数是专门用于创建对象的函数，如果一个函数使用 new 关键字调用，那么这个函数就是构造函数。构造函数用于批量生产对象。构造函数是用来创建对象的，如果我们声明的函数，要当做构造函数使用，一般将函数名的首字母大写(推荐)。new 函数名的时候，称为对象的实例化，得到的是一个实例。实例化构造函数时没有参数时可以省略 ()。构造函数的返回值即为新创建的对象。构造函数内部的 return 返回的值无效，始终是一个对象。普通函数中的this指向window, 而构造函数中的this指向的是对象。
<script>
// 定义函数
function foo() {
console.log('通过 new 也能调用函数...');
}
// 调用函数
new foo;
</script>
new关键字
new关键字做了什么呢？
- 创建了空对象
- 将this指向空对象
- 赋值
- 将对象返回
function Person(theName, theAge, theSex, theAdd) {
console.log(this) // {}
this.name = theName
this.age = theAge
this.sex = theSex
this.address = theAdd
}
let p = new Person('小明', 12, 'man', '上海') //new 构造函数 实例化 p 就是实例
console.log(p)
// new 关键字执行了哪些
// 1. 创建了空对象
// 2. 将this指向了空对象
// 3. 字段挂载(为对象赋值)
// 4. 将对象返回出来
我们来演示一下new执行过程，这种创建对象的方式叫工厂函数创建对象。
function Person(theName, theAge, theSex, theAdd) {
// 1. 创建了空对象
let o = {}
// 2 将this指向了对象
// 3. 赋值
o.name = theName
o.age = theAge
o.sex = theSex
o.address = theAdd
// 4.将对象返回
return o
}
let res = Person('小明', 12, 'man', '上海') //new 构造函数 实例化 p 就是实例
console.log(res);
