提起来ES6的箭头函数,相信大家都不默认,无论是工作还是学习还是面试中,箭头函数都是重点使用和考察对象。这次我们一起回顾一下箭头函数,重新学习一下ES6提供的这项瑰宝的内容。
1,回顾一下函数
什么是函数?
JavaScript函数 也就是我们平时所说的 函数 。根据官方定义:JavaScript 使用关键字 function 定义函数。JavaScript 函数是被设计为执行特定任务的代码块。JavaScript 函数会在某代码调用它时被执行。
从定义中我们不难摘出:函数,它是由function关键字定义的代码块,目的是在被调用时去执行被设计的特定任务。
如何定义函数?或者说定义函数的方法有哪些?
从我们最开始接触JavaScript的时候,函数就作为引用数据类型被我们所认识。开始我们就学习了两种定义函数的方式:匿名函数和表达式函数
匿名函数基本格式:function 函数名(){ ... };
表达式函数基本格式:var 函数名 = function (){ ... };
后来当我们学习了构造函数后,我们知道了另一个声明函数的方法:构造函数法
构造函数法基本结构:var myfunction = new Function( ... );
var x = myfunction();
函数有哪些特性?
1,函数声明后会像变量一样得到提升。 (使用表达式定义函数时无法提升。)
myFunction(4,2); // 6
function myFunction(x,y){
console.log(x+y)
}
2,函数可以自调用
function myFunction(x,y){
console.log(x+y)
}(4,3) // 7
3,函数是对象,他有自己的属性和方法;
4,函数内部区域被定义为局部作用域,内部声明的变量是局部提升,外部不能用;
5,函数默认计算值不会被返回,默认为underfined,如果需要作为变量使用,需要return内部计算数值;
function myFunction(a, b) {
return a * b;
}
var x = myFunction(4, 3);
2,学习一下箭头函数
什么是箭头函数?
定义:ES6 允许使用“箭头”(=>
)定义函数。
基本格式:var myfunction = (参数) => { ... };
箭头函数有什么特点?
1,当函数没有参数或者有多个参数的时候,需要用圆括号把参数括起来。也就是说,当你有一个参数的时候,圆括号就可以省略了。
// 只有一个参数
var f1 = num => { console.log(num) };
// 没有参数时
var f2 = () => { ... };
// 有多个参数时
var f3 = (num1,num2) => { ... };
2, 既然圆括号可以省略,后边的花括号肯定也是可以省的。当执行代码块只有一句时,花括号可以省略。
// 代码块只有一句话
var f1 = v => console.log(v)
3,由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错。
箭头函数的注意点是啥子?
1,箭头函数没有自己的this
对象;
2,不可以当作构造函数,也就是说,不可以对箭头函数使用new
命令,否则会抛出一个错误。
3,不可以使用arguments
对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
4,不可以使用yield
命令,因此箭头函数不能用作 Generator 函数。
疑难点!!!
this的指向问题。说起来这个我可就不困了啊!
说起this的问题,相信好多人 都是说不清楚的,喂喂喂!别看我,我也说不清楚。
在普通函数中不同的声明和调用,this的指向都是随时随地变化的。所以,普通函数的this指向不同的场景指向不同,不过可以概括成一句话(% 我是这么理解的,希望对你有帮助 %):普通函数的this总是指向最终调用它的对象。
那么箭头函数呢?ES6规定的箭头函数没有this,那么在箭头函数中使用的this是啥?后边说了,箭头函数根本没有自己的this
,导致内部的this
就是外层代码块的this
。所以概括来说:箭头函数中this总是指向箭头函数所在位置的上一级(父级)的最终调用者。
箭头函数就到这了,深层次的箭头函数的用途和属性我们就不赘述了,好多的博主大佬写的贼棒!我在写感觉就是班门弄斧了。毕竟我是给初级学者或者小白看的,点到为止!
拜了个拜!迪迦。。。