<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06_箭头函数</title>
</head>
<body>
<button id="btn">测试箭头函数this_1</button>
<button id="btn2">测试箭头函数this_2</button>
<!--
* 作用: 定义匿名函数
* 基本语法:
* 没有参数: () => console.log('xxxx')
* 一个参数: i => i+2
* 大于一个参数: (i,j) => i+j
* 函数体不用大括号: 默认返回结果
* 函数体如果有多个语句, 需要用{}包围，若有需要返回的内容，需要手动返回
* 使用场景: 多用来定义回调函数
* 箭头函数的特点：
1、简洁
2、箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this
3、扩展理解： 箭头函数的this看外层的是否有函数，
如果有，外层函数的this就是内部箭头函数的this，
如果没有，则this是window。
-->
<script type="text/javascript">
let fun = function () {
console.log('fun()');
};
fun();
//没有形参，并且函数体只有一条语句
let fun1 = () => console.log('fun1()');
fun1();
console.log(fun1());
//一个形参，并且函数体只有一条语句
let fun2 = x => x;
console.log(fun2(5));
//形参是一个以上
let fun3 = (x, y) => x + y;
console.log(fun3(25, 39));//64
//函数体有多条语句
let fun4 = (x, y) => {
console.log(x, y);
return x + y;
};
console.log(fun4(34, 48));//82
setTimeout(() => {
console.log(this);
},1000)
let btn = document.getElementById('btn');
//没有箭头函数
btn.onclick = function () {
console.log(this);//btn
};
//箭头函数
let btn2 = document.getElementById('btn2');
let obj = {
name : 'kobe',
age : 39,
getName : () => {
btn2.onclick = () => {
console.log(this);//obj
};
}
};
obj.getName();
function Person() {
this.obj = {
showThis : () => {
console.log(this);
}
}
}
let fun5 = new Person();
fun5.obj.showThis();
</script>
</body>
</html>
2018-06-22-箭头函数
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 学习箭头函数之前，先普及一个小知识点。 上面的代码告诉我们函数的参数默认已经被定义了，一经声明，就不能再用let或...
- 箭头函数中的this指向的是定义时的this，而不是执行时的this。 举个栗子 上面对象中的方法(ES6对象的扩...
