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语言更加现代化和高效。

JavaScript-箭头函数及This的使用

JavaScript-箭头函数及This的使⽤ES6可以使⽤“箭头”（=>）定义函数语法⾸先是写法上的不同:// es5var fn = function (x, y) {return x + y;}// es6 箭头函数写法，当函数直接被return时，可以省略函数体的括号const fn = (x, y) => x + y;// es5var foo = function () {var x = 10;var y = 20;return x + y;}// es6const foo = () => {const x = 10;const y = 20;return x + y;}ps:箭头函数可以替换函数表达式，但是不能替换函数声明其次还有⼀个⾄关重要的⼀点，那就是箭头函数中，没有this。

如果你在箭头函数中使⽤了this，那么该this⼀定就是外层的this。

ES5var name = "window";var obj = {name: "kxy",sayName: function () {console.log();}};obj.sayName(); //kxy使⽤ES6var name = "window";var obj = {name: "kxy",sayName: () => {console.log();}};obj.sayName(); //window换⼀种写法var name = "window";var obj = {name: "kxy",sayName: function () {setTimeout(() => {console.log();}, 1000);}};obj.sayName(); //kxy编译后ES5：var name = "window";var obj = {name: "kxy",sayName: function sayName() {var _this = this; // 注意这⾥setTimeout(function () {console.log(_);}, 1000);}};obj.sayName(); //kxy箭头函数和普通函数区别不能作⽤构造函数，不能使⽤new箭头函数不绑定arguments，取⽽代之⽤rest参数...箭头函数不绑定this，会捕获其所在的上下⽂的this值，作为⾃⼰this值call 或 apply ⽅法调⽤函数，只是传⼊参数⽽已对this 并没有影响。

js箭头函数和普通函数

js箭头函数和普通函数JavaScript 是一种广泛使用的编程语言，它的函数定义和使用方法也是很重要的。

在 JavaScript 的函数定义和使用中，我们通常会使用普通的函数或者箭头函数。

这两种函数的功能十分相似，但是在使用方法和细节上还是有一些区别。

今天，我们就来了解一下 js箭头函数和普通函数的特点和区别。

一、普通函数普通函数是一种常见的 JavaScript 函数定义方式。

它的语法结构如下：function functionName(arg1, arg2, ...) {// function body}这种定义方式可以将一段代码封装成一个独立的可重用的模块，从而方便代码编写和调用。

JavaScript 的函数可以接受多个参数，并且可以有返回值。

在函数体内部，我们可以通过 this 关键字来访问对象属性和方法。

普通函数的特点：1. 普通函数可以使用 this 关键字访问当前绑定的对象。

2. 普通函数在执行时会创建一个新的函数上下文环境。

4. 普通函数可以使用 return 关键字返回一个值。

二、箭头函数箭头函数是 ES6 引入的一种新函数语法。

箭头函数使用 => 符号来定义，格式如下：箭头函数适用于一些简单的操作，比如计算单个表达式的结果或者返回一个简单的对象字面量。

在箭头函数体内部，没有 this 关键字，不会创建新的执行上下文环境。

箭头函数的参数可以像普通函数一样使用，但是不能使用 arguments 对象来访问参数，也不能使用 return 语句返回一个值。

1. 箭头函数没有自己的 this 绑定，它的 this 绑定与定义它的上下文环境一致。

2. 箭头函数没有 arguments 对象，但是可以使用 rest 参数。

1. this 绑定普通函数的 this 绑定是动态的，它在函数调用时才会确定。

而箭头函数的 this 绑定是静态的，它的值在函数定义时就已经确定。

2. 函数体普通函数的函数体可以是任意语句块，包括多个表达式和语句。

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