Js箭头函数
Js箭头函数
箭头函数是ES6
新增的语法,提供了一种更加简洁的函数书写方式,类似于匿名函数,并且简化了函数定义。
完整写法
完整写法类似于匿名函数,省略了function
关键字。
var s = (a,b) => {
console.log(a, b); // 1 2
return a + b;
}
s(1,2);
// 相当于
var s = function(a,b) {
console.log(a, b); // 1 2
return a + b;
}
s(1,2);
省略小括号
当参数只有1
个时,可以省略小括号,当没有参数或者两个以上的参时不能省略小括号。
var s = a => {
console.log(a); // 1
return a + a;
}
s(1);
// 相当于
var s = function(a) {
console.log(a); // 1
return a + a;
}
s(1);
省略大括号
当函数体只有一行语句时,可以省略{}
,并且会自动return
这条语句的返回值。
var cmp = (a, b) => a - b;
var a = [5, 4, 3, 2, 1];
var sortedArr = a.sort(cmp);
console.log(sortedArr); // [1, 2, 3, 4, 5]
// 相当于
var cmp = function(a, b) { return a - b; };
var a = [5, 4, 3, 2, 1];
var sortedArr = a.sort(cmp);
console.log(sortedArr); // [1, 2, 3, 4, 5]
省略小括号与大括号
当满足上述两个条件时,小括号与大括号可以全部省略。
var s = a => a * 2;
console.log(s(1)); // 2
// 相当于
var s = function(a) { return a * 2; }
console.log(s(1)); // 2
返回对象字面量
省略写法返回对象时注意需要使用()
将对象包裹,否则浏览器会把对象的{}
解析为箭头函数函数体的开始和结束标记。
var s = a => ({"a": a * 2});
console.log(s(1)); // {a: 2}
// 相当于
var s = function(a) { return {"a": a * 2}; }
console.log(s(1)); // {a: 2}
没有单独的this
箭头函数没有单独的this
,在箭头函数的函数体中使用this
时,会取得其上下文context
环境中的this
。箭头函数调用时并不会生成自身作用域下的this
,它只会从自己的作用域链的上一层继承this
。由于箭头函数没有自己的this
指针,使用apply
、call
、bind
仅能传递参数而不能动态改变箭头函数的this
指向。
var obj = {
s1: () => {
console.log(this);
},
s2: function(){
console.log(this);
}
}
obj.s1(); // Window ...
obj.s2(); // {s1: ƒ, s2: ƒ}
/*
在调用时运行的环境是Window,而s1为箭头函数不改变this指向,所以指向Window
s2为普通函数,可以改变this指向,所以this指向了调用者
*/
var contextObj = {
e: function() {
var obj = {
s1: () => {
console.log(this);
},
s2: function(){
console.log(this);
}
}
obj.s1(); // {e: ƒ}
obj.s2(); // {s1: ƒ, s2: ƒ}
}
}
contextObj.e();
/*
在调用时运行的环境是contextObj对象,而s1为箭头函数不改变this指向,所以指向contextObj对象
s2为普通函数,可以改变this指向,所以this指向了调用者
*/
利用箭头函数的this
指向特点可以解决一些问题,例如常见的回调函数中this
指向问题。
// 常见的回调函数this指向问题
var a = 1;
var obj = {
a: 2,
run: function(){
var callback = function(){
console.log(this.a);
}
setTimeout(callback,1000); // 1 // 回调函数this调用时指向了Window
}
}
obj.run();
对于这个问题可以将this
值分配给封闭的变量来解决。
var a = 1;
var obj = {
a: 2,
run: function(){
var that = this;
var callback = function(){
console.log(that.a);
}
setTimeout(callback,1000); // 2
}
}
obj.run();
也可以使用bind
来事先将函数执行时的this
绑定。
var a = 1;
var obj = {
a: 2,
run: function(){
var callback = function(){
console.log(this.a);
}
setTimeout(callback.bind(this),1000); // 2
}
}
obj.run();
使用箭头函数可以直接编写回调函数而不改变this
指向,箭头函数不会创建自己的this
,它只会从自己的作用域链的上一层继承this
。
var a = 1;
var obj = {
a: 2,
run: function(){
var callback = () => {
console.log(this.a);
}
setTimeout(callback,1000); // 2
}
}
obj.run();
不绑定arguments
箭头函数不绑定arguments
,在箭头函数函数体内取得arguments
只是引用了封闭作用域内的arguments
,不会生成自身作用域下的this
和arguments
值。
function s(a,b){
console.log(...arguments); // 1 2
var ss1 = (c) => {
console.log(...arguments); // 1 2
}
var ss2 = function(c){
console.log(...arguments); // 3
}
ss1(3);
ss2(3);
}
s(1, 2);
不能用作构造器
箭头函数不能用作构造器,使用new
实例化时会抛出异常。
var s = () => {};
new s(); // Uncaught TypeError: s is not a constructor
没有原型属性
箭头函数没有prototype
属性。
var s = () => {};
console.log(s.prototype); // undefined
不能用作函数生成器
箭头函数不能用作Generator
,yield
关键字通常不能在箭头函数中使用,除非是嵌套在允许使用的函数内。
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://segmentfault.com/a/1190000010159725
https://www.runoob.com/w3cnote/es6-function.html
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- linux环境搭建图数据库neo4j的讲解
- Linux编程之ICMP洪水攻击
- linux搭建squid代理服务器的完整步骤
- 使用wget递归镜像网站
- 整理Linux中字符串的相关操作技巧
- Ubuntu 16.04下无法安装.deb的解决方法
- 关于linux中系统输入输出的管理详解
- Linux下IP设置脚本的实例及遇到问题解决办法
- Linux与Windows文件互传(VMWare)
- 如何测试Linux下tcp最大连接数限制详解
- Linux中利用Vim对文件进行密码保护的方法详解
- Linux中禁止用户修改/重置密码
- 详解 MAC/Linux Vi配置环境变量及Java环境变量配置
- 扒开DMA映射的内裤
- 如何理解与识别Linux中的文件类型