您的位置：首页 > Web前端 > JavaScript

JS——箭头函数

2017-11-27 09:15 183 查看

//两参
var add = (num1,num2) => {return num1+num2;};
console.log(add(1,2));
var add_1 = (num1,num2) => num1 + num2;
console.log(add_1(1,2));

//一参
var add1 = num => {return num*10;};
console.log(add1(3));

var add2 = () => {console.log("add2");};
add2();

//返回对象字面量
var foo = (name,age) => ({
name:name,
age:age
})
var f = foo("sss",22);
console.log(f.name);

//支持rest参数
var add3 = (num1,num2,...restparam) => {
console.log(restparam.length); //3
var result = num1 + num2;
return result;
}
var a3 = add3(67,8,90,23,44);
console.log(a3); //75

//支持默认参数
var add4 = (num1=9,num2=8) => {
var result = num1 + num2;
return result;
}
var a4 = add4();
console.log(a4);

//箭头函数 this
//箭头函数没有自己的this值，this值是从封闭范围继承。
var Cat = {
name:'cat1',
canRun:function(){
console.log(this); //Cat这个对象
var foo = () => {console.log(this);}; //Cat这个对象
foo();
}
};
Cat.canRun();

//限制
//1、箭头函数没有参数对象
//2、箭头函数不能与新运算符一起使用，因此它不能用作构造函数
//3、箭头函数没有原型属性
var Stu = (name,age) => {name = name, age = age};
//var stu1 = new Stu("cat",6); //报错：Stu is not a constructor
console.log(Stu.prototype); //undefined  箭头函数没有原型属性

转载自：http://mp.weixin.qq.com/s/SROrxYNmkcl-KxoKb_TdFw

补1：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button" name="button" id="btn1">btn1</button>
<script type="text/javascript">
var a = 100;
btn1.addEventListener(
"click",() => {
console.log(this); //输出window 和箭头函数没有原型有关？？
console.log(this.innerHTML); //undefined
console.log(this.a); //100
}
)
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航