ES6_04_简化的对象写法和箭头函数

简化的对象写法：
* 省略同名的属性值
* 省略方法的function
* 例如:

let x = 1;
let y = 2;
let point = {
x,
y,
setX (x) {this.x = x}
};

 

原先写法：

let username = 'kobe' ;
let age = 39;
let obj = {
username: username,
age : age，
};
console.log(obj);

 

后改为：

let username = 'kobe' ;
let age = 39;
let obj = {
username, // 同名的属性可以省略不写
age，
getName:function(){ //去掉 :function,输出：console.log(obj.getName());【//可以省略函数的function】
return this.username;
}
};
console.log(obj);

 

 

箭头函数：

* 作用: 定义匿名函数
* 基本语法:
* 没有参数: () => console.log('xxxx')
* 一个参数: i => i+2
* 大于一个参数: (i,j) => i+j
* 函数体不用大括号: 默认返回结果
* 函数体如果有多个语句, 需要用{}包围，若有需要返回的内容，需要手动返回
* 使用场景: 多用来定义回调函数

箭头函数的特点：

1、简洁
2、箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this
3、扩展理解： 箭头函数的this看外层的是否有函数，
如果有，外层函数的this就是内部箭头函数的this，
如果没有，则this是window。

用例说明：

let fun = () = > console.log('我是箭头函数');
fun();

//形参的情况
//1. 没有形参的时候

let fun1 = () = > console.log('我是箭头函数'); 
fun1();

//2.只有一个形参的时候（）可以省略

let fun2 = a => console.log(a);
fun2('aaa');

//3.两个及两个以上的形参的时候（）不能省略

let fun3 = (x, y) => console.log(x, y);
fun3(25, 36);

 

//函数体的情况

//1、函数体只有一条语句或者表达式的时候{}可以省略--->会自动返回语句执行的结果或者是表达式的结果

let fun4 = (x, y) => x + y;
console.log(fun4(24, 36));

//2、函数体不止一条语句或者是表达式的情况 {}不可以省略

let fun5 = (x , y) => {
console.log(x, y);
return x + y;
}
console.log(fun5(35, 49));

 

测试：

<button id="btn1">测试箭头函数this_1</button>
<button id="btn2">测试箭头函数this_2</button>

//测试箭头函数的this
let btn1 = document.getElementById('btn1');
let btn2 = document.getElementById('btn2');
btn1.onclick = function () {
altert(this);

}

btn2.onclick = () => {
console.log(this);
}