摘要
ES5中定义函数的方式是用关键字function加上函数名和参数列表，再在花括号内写函数体。
正文
ES6函数调用
以前在看Vue2.0的情况下，就被许多的箭头函数困惑，一直不清楚是什么原因，尽管箭头函数四个字在我耳旁一直转圈圈，今日我梳理梳理箭头函数里边的普遍使用方法和表达形式，在这个Vue3.0早已来临的一段时间，期待大伙儿还可以一起搭上箭头函数的风大飞起来。大伙儿还可以关注我的微信公众平台，小乌龟全栈开发。
一、es5中涵数的申明方法
function sum(x,y){ return x y } console.log(sum(4,5)) // 9 let sum = function(x,y){ return x y } console.log(sum(4,5)) // 9
针对上边的二种方法，关键差别取决于let 关键词申明涵数的情况下，不会有变量提升的难题（ps:实际能够参照我的第一篇文章内容，关键词let和var的差别）
二、es6中的箭头函数：关键便是把function除掉，在主要参数解析函数体中间用箭头符号切分
let sum = (x,y) => { return x y } console.log(sum(3,4)) // 7
针对涵数体仅有一行编码的情况下，上边编码能够简单化为下列编码
let sum = (x,y) => x y
针对传参，能够省去return关键词并且用圆括号扩起來
function addStr(str1,str2){ return str1 str2 } const addStr = (str1,str2) => (str1 str2) // 之上2个涵数作用是一样的，仅仅箭头函数在箭头符号右边，省去了关键词return，而且在外面加上圆括号
三、箭头函数和一般涵数中间的差别
1、this偏向界定时所属的目标，而不是启用时所属的目标(箭头函数中沒有this,this偏向的是父级的this)
<html> <body> <button id="btn">点此</button> <script> let oBtn = document.querySelector("#btn") oBtn.addEventListener("click",function(){ console.log(this) // <button id="btn">点此</button> }) </script> </body> </html>
<html> <body> <button id="btn">点此</button> <script> let oBtn = document.querySelector("#btn") oBtn.addEventListener("click",function(){ setTimeout(function(){ // call apply bind更改this偏向 console.log(this) // Window },1000) }) </script> </body> </html>
根据bind更改this偏向
<html> <body> <button id="btn">点此</button> <script> let oBtn = document.querySelector("#btn") oBtn.addEventListener("click",function(){ setTimeout(function(){ console.log(this) // <button id="btn">点此</button> }.bind(this),1000) }) </script> </body> </html>
箭头函数中的this偏向
<html> <body> <button id="btn">点此</button> <script> let oBtn = document.querySelector("#btn") oBtn.addEventListener("click",function(){ setTimeout(() => { console.log(this) // <button id="btn">点此</button> },1000) }) </script> </body> </html>
2、不能做为构造方法
function People(name,age){ console.log(this) // People{} this.name = name this.age = age } let p1 = People("lilei",34) console.log(p1) // People{name:"lilei",age:34} let People = (name,age) => { this.name = name this.age = age } let p1 = People("lilei",34) console.log(p1) // 出错 People is not a constrator
3、不能应用arguments目标
let foo = function(){ console.log(arguments) } console.log(foo(1,2,3)) // Arguments[1,2,3] let foo = () => { console.log(arguments) } console.log(foo(1,2,3)) // Arguments is not defined
箭头函数兼容相近es5中arguments目标：根据rest主要参数
let foo = (...args) => { console.log(args) } console.log(foo(1,2,3)) // [1,2,3]
关注不迷路
扫码下方二维码，关注宇凡盒子公众号，免费获取最新技术内幕！
温馨提示：如果您访问和下载本站资源，表示您已同意只将下载文件用于研究、学习而非其他用途。
评论0