JavaScript箭头函数

合集下载

JavaScript中的普通函数和箭头函数的区别和用法详解

JavaScript中的普通函数和箭头函数的区别和⽤法详解最近被问到了⼀个问题：javaScript 中的箭头函数 ( => ) 和普通函数 ( function ) 有什么区别？我当时想的就是：这个问题很简单啊~（flag），然后做出了错误的回答……箭头函数中的 this 和调⽤时的上下⽂⽆关，⽽是取决于定义时的上下⽂这并不是很正确的答案……虽然也不是完全错误箭头函数中的 this⾸先说我的回答中没有错误的部分：箭头函数中的 this 确实和调⽤时的上下⽂⽆关function make () {return ()=>{console.log(this);}}const testFunc = make.call({ name:'foo' });testFunc(); //=> { name:'foo' }testFunc.call({ name:'bar' }); //=> { name:'foo' }这个例⼦可以看到，确实箭头函数在定义之后，this 就不会发⽣改变了，⽆论⽤什么样的⽅式调⽤它，this 都不会改变；但严格来说，这并不是“取决于定义时的上下⽂”，因为箭头函数根本就没有绑定⾃⼰的 this，在箭头函数中调⽤ this 时，仅仅是简单的沿着作⽤域链向上寻找，找到最近的⼀个 this 拿来使⽤罢了；从效果上看，这和我之前的理解并没有多⼤偏差，但它们的本质却是截然不同，箭头函数并不是普通函数新增了 this 不受调⽤时上下⽂影响的特性，⽽是减少了很多特性；箭头函数其实是更简单的函数实际上箭头函数中并不只是 this 和普通函数有所不同，箭头函数中没有任何像 this 这样⾃动绑定的局部变量，包括：this，arguments，super(ES6)，new.target(ES6)……借⽤别⼈的⼀个例⼦：function foo() {setTimeout( () => {console.log("args:", arguments);},100);}foo( 2, 4, 6, 8 );// args: [2, 4, 6, 8]在普通函数中，会⾃动绑定上的各种局部变量，箭头函数都是⼗分单纯的沿着作⽤域链向上寻找……箭头函数就是这么个简单、纯粹的东西；所以我个⼈认为箭头函数更适合函数式编程，除了它更短以外，使⽤箭头函数也更难被那些没有显⽰声明的变量影响，导致你产⽣意料之外的计算结果；那么普通函数能否实现和箭头函数⼀样的效果呢？如果是像当初的我⼀样简单的考虑固定住 this 这个易变的家伙……那倒是很简单，有些常⽤的⽅法，⽐如这样：function make () {var self = this;return function () {console.log(self);}}或者function make () {return function () {console.log(this);}.bind(this);}然⽽第⼆种⽅法只能固定 this 这⼀个变量⽽已，如前⽂所述，箭头函数中的 arguments 等变量也是从作⽤域链中寻找的，为了实现类似的效果，我们只有重新定义⼀个局部变量这⼀种⽅式，⽽ babel 也是使⽤这种⽅式对箭头函数进⾏处理的。

js定时器settimeout箭头函数用法

js定时器settimeout箭头函数用法JS定时器setTimeout箭头函数用法一、什么是定时器setTimeout？定时器setTimeout是JavaScript中一个非常重要的函数，用于在指定的时间延迟后执行一段代码。

它接受两个参数，即要执行的代码和延迟的时间。

二、箭头函数的概念和用法1. 箭头函数的概念箭头函数是ES6中引入的一种新的函数表达式，它的主要特点是以更简洁的语法形式定义函数，并且具有词法作用域绑定变量的特性。

它使用箭头（=>）来定义函数，并且可以省略function关键字。

2. 箭头函数的用法箭头函数可以使用在任何需要函数的地方，并且可以有多种不同的用法。

下面就来逐步探讨如何在setTimeout中使用箭头函数。

三、在setTimeout中使用箭头函数的基本用法在setTimeout中使用箭头函数很简单，只需要将要执行的代码作为箭头函数的参数，并且在箭头函数前加上延迟的时间作为setTimeout的第二个参数即可。

javascriptsetTimeout(() => {要执行的代码}, 延迟的时间);例如，如果希望延迟1000毫秒后在控制台打印"Hello, World!"，可以使用以下代码：javascriptsetTimeout(() => {console.log("Hello, World!");}, 1000);这段代码会在1000毫秒后将"Hello, World!"输出到控制台。

四、箭头函数和this关键字在setTimeout中使用箭头函数的一个重要用法是解决this关键字的问题。

在普通的匿名函数中，this关键字指向的是函数的执行环境，而在箭头函数中，this关键字指向的是定义函数时的环境。

这意味着在箭头函数中使用this关键字可以避免一些常见的作用域问题，并且可以更方便地访问外部作用域中的变量。

js 箭头函数调用方法

js 箭头函数调用方法
在JavaScript中，箭头函数是一种简洁的函数语法。

与常规函数相比，箭头函数有一些特殊的规则和行为。

如果你想在一个箭头函数中调用另一个函数，可以使用 `()()` 语法或者使用函数名(`fnName`)。

假设你有两个箭头函数，一个是你想要调用的函数，另一个是你用来调用这个函数的函数。

```javascript
// 定义一个箭头函数
const myFunction = () => {
('Hello, World!');
};
// 定义另一个箭头函数，用于调用 myFunction
const callMyFunction = () => {
myFunction(); // 使用函数名()来调用myFunction
};
// 调用callMyFunction函数，这将间接地调用myFunction函数callMyFunction();
```
你也可以直接在箭头函数中使用其他函数，如下例所示：
```javascript
// 定义一个箭头函数，它直接调用了另一个函数
const myFunction = () => ('Hello, World!');
const anotherFunction = () => myFunction(); // 在这个箭头函数中直接调用了myFunction
anotherFunction(); // 调用anotherFunction，这将间接地调用myFunction
```
在这些例子中，箭头函数是用于封装和抽象代码的，使得代码更简洁、更易于阅读和维护。

JavaScript箭头函数（Lambda表达式）

JavaScript箭头函数（Lambda表达式）箭头函数也叫lambda表达式据说其主要意图是定义轻量级的内联回调函数栗有：1 var arr = ["wei","ze","yang"];2 arr.map(item=>"Mr."+item); // ["Mr.wei", "Mr.ze", "Mr.yang"]实则1 var arr = ["wei","ze","yang"];2 arr.map(function(item){3 return "Mr."+item;4 });1.注意点：（1）当箭头函数有⼀个参数的时候，参数可以不加括号，没有参数的时候就必须要加。

定义函数名 = 参数 => 函数体1 var student = name => "my name is " + name;2 console.log(student("wei ze yang"));3 // my name is wei ze yang（2）如果函数体不⽌⼀⾏，应该⽤花括号括起来，这时就要显⽰地返回。

定义函数名 = （参数，参数） => { 函数体； return 返回值； }1 var student = (name,age) => {2 age +=1;3 return "name:" + name + ",age:" + age;4 }5 console.log(student("wei ze yang",21));6 // name:wei ze yang,age:222.arguments object正常的函数内：1 function student(name,age){2 console.log(arguments[0]);3 }45 student("weizeyang",22);但箭头函数不会暴露argument对象1 var student = (name,age) => {2 console.log(arguments[0]);3 }45 student("weizeyang"); // arguments is not defined所以，argument将简单地指向当前作⽤域内的⼀个变量1 var arguments = ["Mr.wei"];23 var student = (name,age) => {4 console.log(arguments[0]);5 }67 student("weizeyang"); // "Mr.wei"或者这时可以使⽤“剩余参数”的时候代替1 var arguments = ["Mr.wei"];23 var student = (...arguments) => {4 console.log(arguments[2]);5 }67 student("weizeyang",22,true); // true3.绑定this的值箭头函数是（词法作⽤域），这意味着其this绑定到了附近scope的上下⽂。

javascript箭头函数的使用

javascript箭头函数的使用箭头函数是ES6中引入的新语法，它提供了一种简洁的语法来定义函数。

箭头函数的语法形式如下：```(parameters) => { statements }```箭头函数的语法特点如下：1. 箭头函数没有自己的this值，它会捕获所在上下文的this值。

在箭头函数中使用this时，它指向的是定义时所在的对象，而不是执行时的对象。

2. 箭头函数没有arguments对象，但可以使用rest参数来获取传入的参数。

3. 箭头函数不能用作构造函数，不能使用new关键字调用。

下面是一些箭头函数的使用示例：1.简单的箭头函数```javascriptconst square = (x) => { return x * x; };console.log(square(5)); // 输出 25```2. 省略大括号和return关键字```javascriptconst square = x => x * x;console.log(square(5)); // 输出 25```3.没有参数的箭头函数```javascriptconst greet = ( => { console.log("Hello!"); }; greet(; // 输出 Hello!```4.箭头函数作为回调函数```javascriptconst numbers = [1, 2, 3, 4, 5];const squared = numbers.map(x => x * x); console.log(squared); // 输出 [1, 4, 9, 16, 25] ```5.使用箭头函数与其他高阶函数结合```javascriptconst numbers = [1, 2, 3, 4, 5];const evenSquares = numbers.filter(x => x % 2 === 0).map(x => x * x);console.log(evenSquares); // 输出 [4, 16]```6.箭头函数与解构赋值结合```javascriptconst person = { name: "Alice", age: 30 };const greet = ({ name, age }) => { console.log(`Hello, ${name}! You are ${age} years old.`); };greet(person); // 输出 Hello, Alice! You are 30 years old.```总结一下，箭头函数是一种简洁的语法形式，适用于定义匿名函数或作为回调函数使用。

JavaScript普通函数与箭头函数的区别

1、箭头函数简写：• 箭头函数如果没有参数，同时函数体的返回值只有一句，则{}和return 都可以省略var fn =() => console .log("123");//去掉了{} 和 returnfn(); //'123'2、this 指向：•普通函数中this 指向的是调用它的对象，如果作为构造函数，它指向创建的对象实例• 箭头函数不会创建自己的this ，所以它没有自己的this ，它只会在自己作用域的上一层继承this 。

所以箭头函数中this 的指向在它在定义时已经确定了，之后不会改变。

普通函数中this 指向的9大场景：箭头函数中this指向箭头函数不会创建自己的this，所以它没有自己的this，它只会在自己作用域的上一层继承this。

所以箭头函数中this的指向在它在定义时已经确定了，之后不会改变。

<div id="box"></div><script>var fn = () =>console.log(this); //window//var fn=function(){console.log(this);} // <div id="box"></div>document.getElementById("box").onclick = fn;</script>如果fn是普通函数,则this指向的是#box,如果是箭头函数，则this 指向的是window3、改变this指向•普通函数通过调用call()、apply()、bind()可以改变this指向。

•箭头函数无法通过调用call()、apply()、bind()改变this指向。

普通函数<script>const obj = {};function fn() {console.log(this);}fn(); //windowfn.apply(obj); //objfn.call(obj); //objfn.bind(obj)(); //obj</script>箭头函数<script>const obj = {};const fn = () =>console.log(this);fn(); //windowfn.apply(obj); //windowfn.call(obj); //windowfn.bind(obj)(); //window</script>4、构造函数•普通函数可以作为构造函数来创建对象实例•箭头函数不能作为构造函数来使用，因为箭头函数没有自己的this普通函数-用作构造函数<script>function Person(name) { = name;}const p = new Person("张三");console.log(p); //{name: '张三'}</script>箭头函数-用作构造函数会报错<script>const fn = (a) => {console.log(a);};fn(1); //1console.log(new fn(1)); //Uncaught TypeError: fn is not a constructor</script>5、arguments与...args•每一个普通函数调用后都具有一个arguments对象，用来存储实际传递的参数。

function箭头函数

function箭头函数箭头函数是一种在JavaScript语言中引入的新的函数定义方式，它简化了函数的书写，同时提供了更清晰的语法结构。

箭头函数的特点是使用一个箭头（=>）来分隔函数的参数列表和函数体。

一个基本的箭头函数可以如下定义：```const square = (x) =>return x * x;```上述的箭头函数表示一个求平方的函数，接受一个参数 `x`，并返回`x` 的平方。

箭头函数省略了传统函数定义中的关键字 `function` 和花括号 `{}`，并使用了箭头 `=>` 来代替。

箭头函数的语法特性有以下几点：1.箭头函数可以省略参数的括号，当只有一个参数时不需要括号。

例如：`(x)=>{}`可以简化为`x=>{}`。

2. 当函数体只有一个表达式时，可以不使用 `return` 来返回结果。

例如：`(x) => { return x * x; }` 可以简化为 `x => x * x;`。

如果函数体有多个语句，依然需要使用花括号和 `return` 关键字。

3. 箭头函数的 `this` 值是词法作用域中的 `this`。

传统的函数在定义时会创建自己的 `this` 值，但箭头函数没有自己的 `this` 值，箭头函数的 `this` 值会继承外部作用域中的 `this` 值。

箭头函数相较于传统的函数定义有以下优点：1. 箭头函数的语法更加简洁明了，省略了关键字 `function` 和冗余的花括号和 `return` 关键字，使得代码更加简洁易读。

2. 箭头函数的词法作用域绑定了 `this` 值，避免了在传统函数中常见的 `this` 指向问题，使得代码更加可靠。

3. 箭头函数没有自己的 `arguments` 对象，这样可以避免在传统函数中使用 `arguments` 对象时带来的一些问题。

虽然箭头函数有以上的优点，但在一些情况下，传统函数的定义方式仍然更为适用：1. 需要动态绑定 `this` 值的情况，箭头函数不能满足需求。

js的箭头函数的由来

js的箭头函数的由来
JavaScript的箭头函数是ES6（ECMAScript 2015）中引入的新
特性，它提供了一种更简洁的函数书写方式。

箭头函数的由来可以
追溯到对函数表达式的简化和优化。

在ES6之前，我们通常使用function关键字来声明函数，例如： javascript.
function add(a, b) {。

return a + b;
}。

而ES6中引入了箭头函数的概念，它的基本语法如下：
javascript.
let add = (a, b) => a + b;
箭头函数的语法更加简洁明了，省略了function关键字和return关键字，使得代码更加精炼。

除了语法上的简化外，箭头函数还具有词法作用域绑定this的特性，这意味着箭头函数内部的this值始终与外部作用域的this值保持一致，不会因为函数的调用方式而改变，这解决了传统函数中this指向的困扰。

箭头函数的由来可以说是为了简化函数的书写方式，提高代码的可读性和可维护性。

它的词法作用域绑定this的特性也使得在处理this指向时更加方便和直观。

总的来说，箭头函数的引入是为了让JavaScript语言更加现代化和高效。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。