- 综合排序
- 最热优先
- 最新优先
- 来自专栏编程之旅
ES6——箭头函数
ES6之后，允许使用箭头=>来定义函数。首先我们来总结一下箭头函数存在的意义，之后再来细细的看它的使用方法。 7, 9] // 而使用箭头函数简化的话 materials.map(material => material.length); // [8, 6, 7, 9] 可以看到，如果用箭头函数，代码简化到了一行 在箭头函数出现之前，每个新定义的函数都有它自己的this值。而箭头函数体内的this值，就是定义时所在的对象，而不是使用时所在的对象。 但是箭头函数导致this总是指向函数定义生效时所在的对象，所以输出的是50。 通过call或者apply也可以调用箭头函数。 建议参考阮一峰老师的ES6的这本书。
87720发布于 2018-08-30 - 来自专栏Java
Es6箭头函数
箭头函数是Es6新增加的一个语法特性，在简化编码方面，有着巨大亮点。 下文就是我对于箭头(=>)函数的定义与实用说明。 function(a, b){return a + b;} console.log(add(1, 1)) </script> <body> </body> </html> 运行结果 用法三（箭头函数的代码块大于一行 定于语法 // 这个正常写法需要写到上面 不然语法报错 [1,2,3].map(function (x) { return x + x; }); // =>函数写法 > // 这个正常写法需要写到上面 不然语法报错 [1,2,3].map(function (x) { return x + x; }); // =>函数写法
24300编辑于 2025-01-21 - 来自专栏飞鸟的专栏
ES6箭头函数
ES6（ECMAScript 2015）引入了箭头函数（Arrow Functions），它是一种更简洁和更具表达力的函数定义方式。 箭头函数具有更短的语法形式，隐式绑定了this，并且没有自己的this、arguments、super 或 new.target。基本语法：箭头函数使用箭头(=>)来分隔参数和函数体。 在上面的示例中，我们定义了一个简单的箭头函数hello，它不带参数，并在函数体中打印了一条消息。隐式返回：箭头函数还具有隐式返回的特性。 箭头函数add接受两个参数a和b，并返回它们的和。this 绑定：与常规函数不同，箭头函数没有自己的this值，它继承了包含它的父级作用域的this值。 注意事项：尽管箭头函数具有许多优点，但也有一些限制和注意事项：箭头函数没有自己的this，因此无法用作构造函数。箭头函数也没有自己的arguments对象，但可以通过使用剩余参数语法来获取参数。
46740编辑于 2023-05-22 - 来自专栏WflynnWeb
es6箭头函数详解
console.log(x, y) return x + y } fun5(30, 31) 箭头函数的this: 箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的 this 箭头函数的this看外层是否有函数，如果有，外层函数的this就是内部箭头函数的this，如果没有，则this是window let btn1 = document.getElementById console.log(this) } } } 箭头函数没有arguments，caller，callee 箭头函数本身没有arguments，如果箭头函数在一个 箭头函数中要想接收不定参数，应该使用rest参数...解决。 ，要加一个小括号 var func = () => ({ foo: 1 }); //正确 var func = () => { foo: 1 }; //错误 多重箭头函数就是一个高阶函数，相当于内嵌函数
75630编辑于 2022-10-28 - 来自专栏全栈私房菜
ES6箭头函数总结
箭头函数基本形式 wdnda 箭头函数基本特点 「1.箭头函数this为父作用域的this，不是调用时的this」 箭头函数的this永远指向其父作用域，任何方法都改变不了，包括call，apply 「2.箭头函数不能作为构造函数，不能使用new」 由于this必须是对象实例，而箭头函数是没有实例的，此处的this指向别处，不能产生person实例，自相矛盾。「3. 箭头函数没有arguments，caller，callee」 箭头函数本身没有arguments，如果箭头函数在一个function内部，它会将外部函数的arguments拿过来使用。 return 2; } console.log(a.prototype); // undefined console.log(b.prototype); // {constructor: ƒ} 「6. 箭头函数返回对象时，要加一个小括号」 var func = () => ({ foo: 1 }); //正确 var func = () => { foo: 1 }; //错误 「8.箭头函数在ES6
56120编辑于 2022-10-24 - 来自专栏全栈程序员必看
ES6基础：箭头函数
ES6基础系列（三）箭头函数 一、基本用法 先来看看 ES5 中我们怎么写一个函数 const foo = function (num) { return num + 1; }; 再来看看 ES6 为我们提供的箭头函数 const foo = (num) => num + 1; 看这个例子难道箭头函数是为了让我们的代码看上去更“高大上”吗？ 箭头函数中的 this，就绑定在它最近一层非箭头函数的 this. 一句话理解：箭头函数内部的 this 是词法作用域，由上下文确定。 this 指向对象 第二个箭头函数，它的 this 绑定在最近一层非箭头函数，也就是 obj 上 2.2 没有 arguments 箭头函数没有自己的 arguments 对象，这不一定是件坏事，因为箭头函数可以访问外围函数的 参考 ES6 系列之箭头函数 廖雪峰：箭头函数 写在最后 关于我 花名：余光（沉迷 JS，虚心学习中） 如果您看到了最后，对文章有任何建议，都可以在评论区留言 这是文章所在 GitHub 仓库的传送门，
49510编辑于 2022-07-02 - 来自专栏站长的编程笔记
ES6 箭头函数 Arrow Function
ES6 前定义函数 2. ES6 箭头函数语法 3. ES6 箭头函数返回值 4. 箭头函数中的 this 到底是谁 ? 前言 ---- ES6 新增了一种新的函数: 箭头函数 Arrow Function 箭头函数相当于匿名函数，简化了函数定义，将原函数的 function 关键字和函数名都删掉，并使用 => 连接参数和函数体 ES6 箭头函数语法 ---- 当没有参数时, 可以定义为以下形式 const test = () => { } 当只有一个参数时，括号可以省略。 ES6 箭头函数返回值 ---- 当方法体只有一条语句时可以省略花括号 // 普通写法 // const math = (num1, num2) => { // return num1 + num2 / 箭头函数中的 this 到底是谁 ? ---- 箭头函数中的 this 指向问题标准答案: 向外层作用域中一层层查找 this，直到有 this 的定义
44510编辑于 2022-12-28 - 来自专栏全栈修炼
ES6 系列之箭头函数
回顾 我们先来回顾下箭头函数的基本语法。 ES6 增加了箭头函数： let func = value => value; 相当于： let func = function (value) { return value; }; 如果需要给函数传入多个参数 没有 this 箭头函数没有 this，所以需要通过查找作用域链来确定 this 的值。 这就意味着如果箭头函数被非箭头函数包含，this 绑定的就是最近一层非箭头函数的 this。 关于 new.target，可以参考 http://es6.ruanyifeng.com/#docs/class#new-target-%E5%B1%9E%E6%80%A7 5. 没有原型 由于不能使用 new 调用箭头函数，所以也没有构建原型的需求，于是箭头函数也不存在 prototype 这个属性。
64420发布于 2019-06-28 - 来自专栏大熊G的前端分享
Es6新特性——箭头函数
---- theme: channing-cyan 这是我参与8月更文挑战的第9天，活动详情查看：8月更文挑战 什么是箭头函数 箭头函数是Es6新增的一种定义函数表达式的语法，它简化了我们之前写的函数书写方式 ，箭头函数实例化的函数对象与我们Es5之前创建的函数表达式的创建函数行为是相同的。 在任何使用函数表达式的地方，都可以使用箭头函数。但箭头函数有些地方与传统书写方式还有差异，我们在下面来为大家讲解。 箭头函数书写方式 //Es5 let sum = function(a,b){ return a + b; } // Es6 let sum1 如果该函数是一个对象的方法，则它的this指针指向这个对象。但在箭头函数中，箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。
55110编辑于 2022-11-14 - 来自专栏编程微刊
ES6系列笔记-箭头函数
ES6相关概念就不多解释啦，语法也成为了前端的主流，平时在很多场景开发中都会遇到，一下是关于ES6系列笔记的一些记录~ 1：普通写法和箭头函数 <! 8"> <title></title> </head> <body> </body> <script> //箭头函数 arr.sort(function(n1, n2) { return n1 - n2; }); console.log(arr) //箭头函数数组排序 n1 - n2; // }); // console.log(arr) //只有一个return的时候，{}可以省略 //箭头函数数组排序 "utf-8"> <title></title> </head> <body> </body> <script> //箭头函数
11300编辑于 2025-05-19 - 来自专栏Rattenking
ES6学习之路6----箭头函数
什么是箭头函数 ES6允许使用“箭头”（=>）定义函数。 ); add(9);//9 1.如果箭头函数只有一句话并且返回值 ES5： var sum = function(a,b){return a + b;} sum(1,2);//3 ES6: let sum0 由于箭头函数没有this，所以也就不能用作构造函数。 箭头函数没有自己的this，内部的this就是外层代码块的this。 由于没有自己的this，所以不能使用apply，call，bind方法改变箭头函数的this指向。 由于没有自己的this，所以不能当做构造函数。 箭头函数没有arguments对象，可以使用rest参数代替。
44030发布于 2021-01-30 - 来自专栏前端记录笔记
ES6中的箭头函数
前言 今天记录一下函数之中的比较重要而且经常使用的箭头函数 箭头函数 基本用法 ES6 允许使用“箭头”（=>）定义函数。 如果不用箭头函数，可能就要占用多行，而且还不如现在这样写醒目。 箭头函数的一个用处是简化回调函数。 8) // args: [2, 4, 6, 8] 上面代码中，箭头函数内部的变量arguments，其实是函数foo的arguments变量。 嵌套的箭头函数 箭头函数内部，还可以再使用箭头函数。下面是一个 ES5 语法的多重嵌套函数。 由于 λ 演算对于计算机科学非常重要，这使得我们可以用 ES6 作为替代工具，探索计算机科学。
1K20编辑于 2022-12-05 - 来自专栏三分恶的专栏
ES6中的箭头函数=>
ES6标准新增了一种新的函数：Arrow Function（箭头函数）。为什么叫Arrow Function？ 因为它的定义用的就是一个箭头： x => x * x 相当于： function(x){ return x*x; } 箭头函数相当于匿名函数，并且简化了函数定义。 箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。 箭头函数有两种格式，一种像上面的，只包含一个表达式，连{ ... }和return都省略掉了。 { ... }有语法冲突，所以要改为： // ok: x => ({ foo: x }) this 箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this
92141发布于 2020-10-26 - 来自专栏大前端开发
ES6特性之：箭头函数
在ES6的所有新特性中，箭头函数(Arrow Fucntion)算是我用的最频繁的特性之一了。 它是函数 那什么是箭头函数呢？首先，它得有“函数”的功能。 const greeting = (name) => { return "Hello," + name; } 更进一步，这个箭头函数还可以简化，在箭头后面只使用一个表达式： const greeting 在ES6之前，我们怎么来解决这个问题呢？ _name; }; return getMyIntro(); } }; person.intro(); //My name is Kevin 在ES6中，我们也可以通过箭头函数来轻松解决这个问题 getMyIntro定义成了一个箭头函数，这样的话，箭头函数中的this是和当前上下文中的this是一致的了。
40110发布于 2018-08-21 - 来自专栏编程微刊
ES6系列笔记-箭头函数
ES6相关概念就不多解释啦，语法也成为了前端的主流，平时在很多场景开发中都会遇到，一下是关于ES6系列笔记的一些记录~ 1：普通写法和箭头函数 <! 8"> <title></title> </head> <body> </body> <script> //箭头函数 //箭头函数数组排序 let arr = [1, 23, 45, 67, 3, 2, 22]; arr.sort((n1, n2) => { return n1 - n2; // }); // console.log(arr) //只有一个return的时候，{}可以省略 //箭头函数数组排序 "utf-8"> <title></title> </head> <body> </body> <script> //箭头函数
46010发布于 2019-12-24 - 来自专栏一个会写诗的程序员的博客
ES6 箭头函数： () => {} 与匿名函数 function() {}
function foo() { setTimeout( () => { console.log("id:", this.id); },100); } foo.call( { id: 42 } ); id: 42 function foo() { setTimeout( function() { console.log("id:", this.id); },100); } foo.call( { id: 42 } ); id: undefined
40120发布于 2018-08-17 - 来自专栏授客的专栏
Vue ES6箭头函数使用总结
Vue ES6箭头函数使用总结 箭头函数 ES6允许使用“箭头”（=>）定义函数： 函数不带参数 定义方法：函数名称 = () => 函数体 let func = () => 1 等同于 function func() { return 1; } 函数只带一个参数 定义方法： 函数名称 = 参数 => 函数体 或者 函数名称 = (参数) => 函数体 let func = state => state.count 等同于 function func(state) { return state.count; } 函数带多个参数 定义方法：函数名称 = (参数1,参数2,... ，参数N) =>函数体 let arg2 = 1 let func = (state, arg2) => state.count + arg2 等同于 function func(state，arg2) { return state.count + arg2; } 函数体包含多条语句 let author = { name: "授客", age: 30, viewName: () =>
79430发布于 2019-12-20 - 来自专栏web秀
ES6箭头函数中this指向谁？
ES6箭头函数中this （1）默认指向定义它时，所处上下文的对象的this指向。 即ES6箭头函数里this的指向就是上下文里对象this指向，偶尔没有上下文对象，this就指向window （2）即使是call，apply，bind等方法也不能改变箭头函数this的指向 一些实例加深印象 （1）hello是全局函数，没有直接调用它的对象，也没有使用严格模式，this指向window function hello() { console.log(this); // window console.log(this); // window }); } } obj.hello(); （4）hello直接调用者是obj，第一个this指向obj，setTimeout箭头函数 perimeter是箭头函数，this应该指向上下文函数this的指向，这里上下文没有函数对象，就默认为window，而window里面没有radius这个属性，就返回为NaN。
2K10发布于 2020-08-19 - 来自专栏java开发的那点事
ES6 语法详解(箭头函数(重点))
: * 多用于定义回调函数 * * 箭头函数的特点 * 1. 箭头函数没有自己的this, 箭头函数的this不是调用的时候决定的,而是在定义的时候处在的对象就是它的this * 普通函数是,谁调用这个函数,函数内的this就是谁,箭头函数是在谁的内部定义的 扩展题解: 箭头函数的this看外层是否有函数 * 如果有,外层函数的this就是内部箭头函数的this * 如果没有,则this就是window /** * 箭头函数分为两个部分 * => 左边的形参 * 左边的形参对应函数的形参 * => 右边的执行体 return x + y } console.log(executeFun4(10,20)) /** * 尝试解构对象箭头函数
42120发布于 2021-08-20 - 来自专栏全栈程序员必看
JavaScript ES6 Arrow Functions（箭头函数）
介绍 第一眼看到ES6新增加的 arrow function 时，感觉非常像 lambda 表达式。 那么arrow function是干什么的呢？可以看作为匿名函数的简写方式。 语法 arrow functions(箭头函数)主要有以下4种语法： // 1)基本 (param1, param2, paramN) => { expression } (param1, param2 场景：在Web开发时都会用到ajax的回调，回调函数内的this常常用外部创建的self、that、_this等变量暂存，而当回调函数采用arrow function方式时就可以直接使用外部的this。 productBLL.query(); 3.2 call()、apply() 调用无法改变this 就像上面讲的arrow function没有自身的this，当用call()或apply() 调用箭头函数时无法改变函数主体内的 ); }; sayHello.call({ x: 1 }, 'polk'); // => this == { x: 1 } // 箭头函数 var sayHello2 = (userName) =>
59510编辑于 2022-07-20
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号