门户网站开发技术,腾讯会议付费,wordpress好看的个人博客主题,百度推广的效果什么是箭头函数#xff1f;
箭头函数是指通过箭头函数表达式创建的函数#xff0c;是匿名函数。
箭头函数表达式的语法更简洁#xff0c;但语义有差异#xff0c;所以用法上也有一些限制。尽管如此#xff0c;箭头函数依旧被广泛运用在需要执行“小函数”的场景。
箭头…什么是箭头函数
箭头函数是指通过箭头函数表达式创建的函数是匿名函数。
箭头函数表达式的语法更简洁但语义有差异所以用法上也有一些限制。尽管如此箭头函数依旧被广泛运用在需要执行“小函数”的场景。
箭头函数表达式的基本语法
/* 函数体只有一个语句 */
() 单个语句
单个参数 单个语句
(单个参数) 单个语句
(参数1, 参数2) 单个语句
let f ()console.log(111)
f() undefined // true/* 函数体有多个语句使用{} */
() { 多个语句 }
单个参数 { 多个语句 }
(单个参数) { 多个语句 }
(参数1, 参数2) { 多个语句 }
let g (){}箭头函数表达式的语法说明
只有一个参数时() 可以省略函数体只有单个语句{} 可以省略返回值就是该语句/表达式的值函数体有多个语句必须使用 {} 包围语法上返回一个对象字面量时加 ()箭头是复合符号不要空格或换行参数列表和箭头之间不要换行箭头 的优先级不高在符合运算中尽量用 () 包围。
let f (){ a:1 } // 不报错a被当成一个标签执行了表达式 “1”返回 undefined
let f (){ a: 1, b: 2 } // 报错
let f (){ a: 1; b: 2 } // 不报错a,b都时标签
let f ()( {a:1, b:2} ) // 不报错()改变了优先级let g () {} // 报错
let g () // 报错 {}let x f || ( (){} )箭头函数的限制
箭头函数不绑定 this会捕获其声明所在上下文的 this且 call/apply/bind 方法都不会改变其指向不能用作构造函数不能使用 new 调用会引发类型错误函数体内也无法访问 new.target不能使用 yield不能用做生成器函数没有 arguments 对象可以使用剩余参数取而代之没有原型对象 prototype 这个属性。
this 的绑定问题
箭头函数没有独立的 this下面将依次总结其如何绑定上下文的 this、避免用作方法等限制问题。
绑定上下文的 this
箭头函数捕获声明所在上下文的 this 并绑定考虑捕获绑定顺序如下
外层函数内部的箭头函数和外部临近的普通函数有相同的 this 绑定类类具有封闭独立的 this 上下文箭头函数作为方法时将自动绑定实例的 this本质就像闭包有独立的变量环境不会因为属性解构等操作改变其绑定。全局当以上不符合一般和全局 globalThis 绑定。
由于箭头函数会绑定外部函数的 t h i s this this所以在一些需要访问外部属性时常用诸如函数 setTimeout/setInterval、方法 forEach/map 等。下面一个例子中
showGroup2 内部的箭头函数绑定的是外部函数的 this指向 w b 对象 wb对象 wb对象所以能够访问其属性 groupshowGroup3 绑定的是全局globalThis指向 全局对象 全局对象 全局对象访问的是全局属性convert 内部的箭头函数绑定的是 this.data 的 this指向 w b 对象 wb对象 wb对象能够正确访问属性 groupconvert2 内部的箭头函数绑定的也是 this.data 的 this但外部也是箭头函数指向 全局对象 全局对象 全局对象将会报错或者得到错误的结果所以尽量不使用箭头函数作为方法。
const wb {group: 第一组,data: [1, 2, 3, 4],showGroup: function () { console.log(this.group); },showGroup2: function () { (() { console.log(this.group) })(); },showGroup3: () { console.log(this.group) },convert: function() {let res new Array;this.data.forEach( (elem){ res.push(this.group : elem); } );return res;},convert2: () {let res new Array;// console.log(this globalThis), // true// console.log(this.data); // undefined/其他this.data.forEach( (elem){ res.push(this.group : elem); } );return res;},
}类的封闭性使得箭头函数与实例自动绑定每创建一个实例都分配一个闭包和实例环境自动绑定。下面一个例子中
箭头函数 fa 绑定具体的实例对象解构赋值不会改变 this 指向普通方法 fd 在构造时绑定自身解构赋值也不会改变 this 指向另外的 fb/fc 作为普通方法在构造时没有绑定自身解构赋值会改变 this 指向。
class C {constructor() { this.fd this.fd.bind(this) };a 1;fa (){ console.log(this.a); };fb function () { console.log(this.a); };fc () { console.log(this.a); };fd function () { console.log(this.a); };
}let c new C();
c.fa(); // 1
let { fa, fb, fc, fd } c;
fa(); // 1
fb(); // 报错属性未定义
fc(); // 报错属性未定义
fd(); // 1call、bind 和 apply 不会改变箭头函数的 this 指向
箭头函数表达式是执行完创建的所以 this 绑定声明定义所在上下文的 this。call、bind 和 apply 方法都不会改变其指向。下面一个例子中
普通函数的 this 绑定可以根据需求被 call/apply/bind 改变指向 o o o 对象箭头函数的 this 绑定不可以被 call/apply/bind 改变依旧指向全局对象。
const o { a: 10 }
globalThis.a 100;const add function (m, n) { return this.a m n; }
const add2 n this.a m n;add.call(o, 2, 3) // 15
add.apply(o, [2, 3]) // 15
let boundedAdd add.bind(o);
boundedAdd(2, 3) // 15add2.call(o, 2, 3) // 105
add2.apply(o, [2, 3]) // 105
let boundedAdd2 add.bind(o);
boundedAdd2(2, 3) // 105在 setTimeout 中使用箭头函数
setTimeout 函数使用一定封闭环境内的属性时常用箭头函数作为回调函数。下面一个例子中
loading 中箭头函数绑定外部方法 loading 的 this指向 o 对象 o对象 o对象loading2 中由 function 引导的声明式函数将绑定全局globalThis指向 全局对象 全局对象 全局对象setTimeout 不会影响内部箭头函数的 this 绑定也不会影响内部普通函数的 this 绑定。
const o {n: 0,loading () {setTimeout(() {console.log(this.n); // 箭头函数this绑定声明所在上下文}, 1000)},loading2 () {setTimeout(function () { console.log(this.n); // 声明式函数this绑定提升到全局}, 1000)},
}o.loading() // 1秒后控制台输出 1
o.loading() // 再1秒后控制台输出 2
o.loading2() // 再1秒后控制台输出 NaN 或其他更一般的在需要控制函数内 this 绑定指定区域时采用箭头函数一个例子如下
const o {n: 1,f() {let fn function () { console.log(this.n); }; // 声明式函数this绑定提升到全局fn();},g() {let gn () { console.log(this.n); }; // 箭头函数this绑定声明所在上下文gn();},
}o.g() // 2
o.f() // NaN不仅如此箭头函数常出现在 promise 链中。或者说箭头函数经常作为一个回调函数出现。
没有 arguments 对象
箭头函数没有自己的 arguments 对象。类似 this 的绑定箭头函数会使用上下文 / 外部的 arguments。下面一个例子中
内部箭头函数与外部函数 f 的参数隐式绑定即 arguments[0] 为 f 的第一个参数 n。
function f(n) {let g () arguments[0] n; // f 的隐式参数绑定。arguments[0] 为 f 的第一个参数 nreturn g();
}f(3); // 3 3 6JS 类没有默认的 arguments 字段下面的例子中
全局箭头函数可以访问全局变量 arguments 如果存在类可以自定义 arguments 字段并进行访问使用 this 指定。
globalThis.arguments [1, 2, 3]
let f () { console.log(arguments[0]); }
class C {constructor(a, ...r) { this.arguments [a, ...r]; };// arguments [1, 2, 3];g () { console.log(this.arguments[0]); };
}f() // 1
(new C(10, 1, 2)).g() // 10由于箭头函数的以上特性在需要指定作用域的 this/arguments 时setTimeout/Promise/闭包/装饰器/...能够起到简化的作用。下面一个装饰器的例子中
内部箭头函数可以对外部函数的 this 和 arguments 访问
function sayHi(name) { console.log(Hello, ${name}!); }function decorator1(fn, ms) {return function () {setTimeout(() fn.apply(this, arguments), ms); }
}function decorator2(fn, ms) {return function (...args) {let nt this;setTimeout(function() { return f.apply(nt, args); }, ms);}
}let f decorator1(sayHi, 1000);
let g decorator2(sayHi, 1000);
f(Lily);
g(Jack);在大多情况下使用剩余参比使用 arguments 是更好的选择。
不能用作构造函数
箭头函数不能用作构造函数当使用 new 调用时会出错。
const F () {this.a 10;
}let f new F() // 报错不能作为构造器更不允许在箭头函数中使用 new.target。
const G (v) {if (!new.target) return new G(v); // 报错不允许在箭头函数中出现 new.targetthis.k v;
}
