ES6中的箭头函数的语法、指向、不定参数
箭头函数的语法
function fn1() {
console.log(1);
}
let fn2 = () => {
console.log(2);
}
fn1()//1
fn2()//2
//箭头函数: 形参=>返回值
//单个形参的最简写法,箭头函数作为匿名的回调函数是可以省略let fn ,既(形参)=>{语句}
let fn = nub => nub * 2
console.log(fn(10));//20
//多个形参,语句单一。(形参1,形参2)=>返回值
let fn = (num1, num2, num3) => num1 * num2 * num3
console.log(fn(2, 3, 4))//24
//多个形参,多条语句,不加return返回undefined
let fn = (num1, num2, num3) => { let a = num1 + num2; let b = num1 + num3 ;console.log(a + b)}
console.log(fn(2, 3, 4))//报错undefined,与普通函数的没有return的值相同都是undefined
//多个形参,多条语句,必须用return返回函数值
let fn = (num1, num2, num3) => { let a = num1 + num2; let b = num1 + num3 ;return(a + b)}
console.log(fn(2, 3, 4))//11
箭头函数的不定参
不定参对应普通函数的arguments
function fn1() {
console.log(arguments);
}
fn1(1, 2, 3, 4)//伪数组arguments[1,2,3,4]
let fn2 = () => {
console.log(arguments);
}
fn2(1, 2, 3, 4)//arguments is not defined,也就是箭头函数没有不定参
//解决剩余参数的方法
let fn3 = (a, b, ...c) => {
console.log(a, b, c)
}
fn3(1, 2, 3, 4)//1,2,[3,4],剩余参数以数组保存
let fn3 = (a, b, ...c) => {
console.log(c[0])
}
fn3(1, 2, 3, 4)//3,注意剩余参数以Array[3,4]进行保存
箭头函数的this的指向
//本质,箭头函数的this在定义时所在的对象,其实质是因为箭头函数没有自己的this,用的是外层的this
function fn1() {
console.log(this);
}
fn1()//window
let fn2 = () => {
console.log(this);
}
fn2()//window,箭头函数本身没有this指向,在调用时指向其声明时所在作用域,这里声明在全局作用域下所以指向window
//在点击事件中
document.onclick = function () {
let fn = () => { console.log(this) }
fn()//this指向#document,指向调用时的作用域
}
//深入理解
let fn
let fn2 = function () {
console.log(this);
fn = () => { console.log(this) }
}
fn2()//先调用fn2为了给fn赋值为函数,全局函数this打印结果是指向window
fn()//箭头函数调用时应指向声明所在的作用域,fn声明在fn2中,所以指向与fn2相同
//深入理解--变形
let fn
let fn2 = function () {
console.log(this);
fn = () => { console.log(this) }
}
fn2 = fn2.bind(document.body)//先调用fn2为了给fn赋值为函数
fn2()//body
fn()//body

浙公网安备 33010602011771号