标签：get 学习 arguments ons uncaught strong 使用 click 点击事件
在ES6以前我们用 function 来定义函数，还记得楼主刚学js那会儿老是把function写错 (╯‵□′)╯︵┻━┻，但是自从ES6中出现了箭头函数以后，妈妈再也不担心我写成 fnuction了，那么我们下面开始正式学习！
=>）定义函数。let func = (num) => num;
let func = function (num) { return num; }
小伙伴们发现了什么？没错， ES6的箭头函数去掉了function,使我们的代码变得更加简洁，下面再看看其他的写法
var func = () => num; // 等同于 var func = function () { return num }; var sum = (num1, num2) => num1 + num2; // 等同于 var sum = function(num1, num2) { return num1 + num2; };
让我们来看一个更丧心病狂的写法~
let func = num => 1; //等同于 let func = function (num) { return 1; }
return语句返回。var sum = (num1, num2) => { return num1 + num2; }
var porson = name => ({ name: name, age: "18" });
const isEven = n => n % 2 == 0;
const square = n => n * n;
上面代码只用了两行，就定义了两个简单的工具函数。如果不用箭头函数要写很多行代码，而且不如这个结构清晰
// 正常函数写法 [1,2,3].map(function (x) { return x * x; }); // 箭头函数写法 [1,2,3].map(x => x * x);
先来看看这段代码：
let person = { name:‘光头强‘, init:function(){ //为body添加一个点击事件，看看这个点击后的this属性有什么不同 document.body.onclick = function(){ alert(this.name);//?? this在浏览器默认是调用时的对象,可变的？ alert(this); } } }
person.init();
如我们所愿，第一个 alert 弹出的是 undefined，第二个是 body （object HTMLBodyElement）；
再来看一段代码：
let person = { name:‘jike‘, init:function(){ //为body添加一个点击事件，看看这个点击后的this属性有什么不同 document.body.onclick = ()=>{ alert(this.name);//?? this在浏览器默认是调用时的对象,可变的？ } } } person.init();
答案是 jike ，答对了吗？
那么问题又来了，如果上级的function也是箭头函数呢？
看看这段代码：
let person = { name:‘jike‘, init:()=>{ //为body添加一个点击事件，看看这个点击后的this属性有什么不同 document.body.onclick = ()=>{ alert(this.name);//?? this在浏览器默认是调用时的对象,可变的？ } } } person.init();
毫无疑问 this 会指向 window （object Window）。
2.箭头函数的构造函数
请看下面代码：
function Person(p){ //完成初始化 this.name = p.name; }
这是没有箭头函数的构造函数，但是用了箭头函数以后呢？
()=>{
......
}
等等....这是什么鬼！什么语法！不报错才怪。我故意让他报错的？嘿，你还不信，那再来一种写法。
var Person = (p)=>{ this.??? }
好的，我们给他加上变量，再等等....这 this 指向哪里？向上级去找？
3. 箭头函数的 arguments
老规矩，先上代码：
let func = (n1,n2)=>{
console.log(arguments);
}
func(2,3);
不用看了，答案是：报错，Uncaught ReferenceError: arguments is not defined
我们来赌一把：
function func0(n1,n2,n3){ //[1, 2, 3] let func = (n1,n2)=>{ console.log(arguments); } func(); } func0(1,2,3);
恭喜你赌对了（可惜并没有奖励...）。
感谢观看，希望您看完能有一些收获。
最后安利阮老师的ES6入门：http://es6.ruanyifeng.com
标签：get 学习 arguments ons uncaught strong 使用 click 点击事件
原文地址：http://www.cnblogs.com/bfc0517/p/6706498.html
