es6中的箭头函数 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

ES6中的箭头函数

前言今天记录一下函数之中的比较重要而且经常使用的箭头函数箭头函数基本用法 ES6 允许使用“箭头”（=>）定义函数。...上面四点中，最重要的是第一点。对于普通函数来说，内部的this指向函数运行时所在的对象，但是这一点对箭头函数不成立。它没有自己的this对象，内部的this就是定义时上层作用域中的this。...()方法中，使用了箭头函数，这导致这个箭头函数里面的this，总是指向handler对象。...const cat = { lives: 9, jumps: () => { this.lives--; } } 上面代码中，cat.jumps()方法是一个箭头函数，这是错误的。...嵌套的箭头函数箭头函数内部，还可以再使用箭头函数。下面是一个 ES5 语法的多重嵌套函数。

6082 0

ES6中的箭头函数=>

ES6标准新增了一种新的函数：Arrow Function（箭头函数）。为什么叫Arrow Function？...因为它的定义用的就是一个箭头： x => x * x 相当于： function(x){ return x*x; } 箭头函数相当于匿名函数，并且简化了函数定义。...箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。...{ ... }有语法冲突，所以要改为： // ok: x => ({ foo: x }) this 箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this...： // 空的箭头函数返回 undefined let empty = () => {}; (() => 'foobar')(); // Returns "foobar" // (这是一个立即执行函数表达式

6094 1

您找到你想要的搜索结果了吗？

是的

没有找到

ES6箭头函数中this指向谁？

ES6箭头函数中this （1）默认指向定义它时，所处上下文的对象的this指向。...即ES6箭头函数里this的指向就是上下文里对象this指向，偶尔没有上下文对象，this就指向window （2）即使是call，apply，bind等方法也不能改变箭头函数this的指向一些实例加深印象...console.log(this); // window }); } } obj.hello(); （4）hello直接调用者是obj，第一个this指向obj，setTimeout箭头函数...，this指向最近的函数的this指向，即也是obj const obj = { num: 10, hello: function () { console.log(this);...perimeter是箭头函数，this应该指向上下文函数this的指向，这里上下文没有函数对象，就默认为window，而window里面没有radius这个属性，就返回为NaN。

1.8K1 0

ES6——箭头函数

ES6之后，允许使用箭头=>来定义函数。首先我们来总结一下箭头函数存在的意义，之后再来细细的看它的使用方法。...在箭头函数出现之前，每个新定义的函数都有它自己的this值。而箭头函数体内的this值，就是定义时所在的对象，而不是使用时所在的对象。...setTimeout的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时的，而它的真正执行要等到100毫秒之后，如果是普通函数，执行时this应该指向全局函数window，这时应该输出21。...但是箭头函数导致this总是指向函数定义生效时所在的对象，所以输出的是50。通过call或者apply也可以调用箭头函数。...建议参考阮一峰老师的ES6的这本书。

6822 0

ES6箭头函数

ES6（ECMAScript 2015）引入了箭头函数（Arrow Functions），它是一种更简洁和更具表达力的函数定义方式。...箭头函数具有更短的语法形式，隐式绑定了this，并且没有自己的this、arguments、super 或 new.target。基本语法：箭头函数使用箭头(=>)来分隔参数和函数体。...在上面的示例中，我们定义了一个简单的箭头函数hello，它不带参数，并在函数体中打印了一条消息。隐式返回：箭头函数还具有隐式返回的特性。...let add = (a, b) => a + b;console.log(add(3, 5)); // 输出 8在上面的示例中，箭头函数greet接受一个参数name，并在函数体中使用该参数打印一条问候消息...箭头函数add接受两个参数a和b，并返回它们的和。this 绑定：与常规函数不同，箭头函数没有自己的this值，它继承了包含它的父级作用域的this值。

2184 0

Es6箭头函数

箭头函数是Es6新增加的一个语法特性，在简化编码方面，有着巨大亮点。下文就是我对于箭头(=>)函数的定义与实用说明。...function(a, b){return a + b;} console.log(add(1, 1)) 运行结果用法三（箭头函数的代码块大于一行...b; } console.log(add(1,2)); 运行结果用法四（返回的是对象...定于语法 // 这个正常写法需要写到上面不然语法报错 [1,2,3].map(function (x) { return x + x; }); // =>函数写法...> // 这个正常写法需要写到上面不然语法报错 [1,2,3].map(function (x) { return x + x; }); // =>函数写法

360 0

es6箭头函数详解

('我是箭头函数') fun1() // 只有一个形参的时候,可以省略小括号 let fun2 = a => console.log(a) fun2('我是a') // 两个及两个以上 let fun3...console.log(x, y) return x + y } fun5(30, 31) 箭头函数的this: 箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的...this 箭头函数的this看外层是否有函数，如果有，外层函数的this就是内部箭头函数的this，如果没有，则this是window let btn1 = document.getElementById...箭头函数中要想接收不定参数，应该使用rest参数...解决。...let a = { foo: 1, bar: () => console.log(this.foo) } a.bar() //undefined bar函数中的this指向父作用域，而a对象没有作用域

2833 0

ES6箭头函数总结

箭头函数基本形式 wdnda 箭头函数基本特点「1.箭头函数this为父作用域的this，不是调用时的this」箭头函数的this永远指向其父作用域，任何方法都改变不了，包括call，apply...上例中，init为箭头函数，其内部的this为全局window，onclick的this也就是init函数的this，也是window，得到的this.name就为undefined。...箭头函数中要想接收不定参数，应该使用rest参数...解决。...箭头函数返回对象时，要加一个小括号」 var func = () => ({ foo: 1 }); //正确 var func = () => { foo: 1 }; //错误「8.箭头函数在ES6...sayName方法，比demo1需要更多的内存空间「因此，在class中尽量少用箭头函数声明方法。」

3722 0

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 仓库的传送门，

3231 0

Es6新特性——箭头函数

---- theme: channing-cyan 这是我参与8月更文挑战的第9天，活动详情查看：8月更文挑战什么是箭头函数箭头函数是Es6新增的一种定义函数表达式的语法，它简化了我们之前写的函数书写方式...箭头函数书写方式 //Es5 let sum = function(a,b){ return a + b; } // Es6 let sum1...箭头函数中的参数箭头函数不能使用关键字arguments来访问，只能通过定义的命名参数来访问。我们简单说一下arguments：arguments是一个对应于传递给函数的参数的类数组对象。...如果该函数是一个对象的方法，则它的this指针指向这个对象。但在箭头函数中，箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。...在对象上定义函数在原型上定义函数动态上下文中的回调函数构造函数中太简短的（难以理解）函数

3641 0

ES6 箭头函数 Arrow Function

ES6 前定义函数 2. ES6 箭头函数语法 3. ES6 箭头函数返回值 4. 箭头函数中的 this 到底是谁 ?...前言 ---- ES6 新增了一种新的函数: 箭头函数 Arrow Function 箭头函数相当于匿名函数，简化了函数定义，将原函数的 function 关键字和函数名都删掉，并使用 => 连接参数和函数体...ES6 箭头函数语法 ---- 当没有参数时, 可以定义为以下形式 const test = () => { } 当只有一个参数时，括号可以省略。...=> ({ name: 'liang' }), 箭头函数直接返回一个数据的写法，多用于 vue，uniapp 开发中 export default { name: "my-search", props:...箭头函数中的 this 到底是谁 ? ---- 箭头函数中的 this 指向问题标准答案: 向外层作用域中一层层查找 this，直到有 this 的定义

2571 0

ES6 系列之箭头函数

回顾我们先来回顾下箭头函数的基本语法。...ES6 增加了箭头函数： let func = value => value; 相当于： let func = function (value) { return value; }; 如果需要给函数传入多个参数...没有 this 箭头函数没有 this，所以需要通过查找作用域链来确定 this 的值。这就意味着如果箭头函数被非箭头函数包含，this 绑定的就是最近一层非箭头函数的 this。...确实可以这样做，但是在实际的开发中，我们可能会在 setBgColor 中还调用其他的函数，比如写成这种： Button.prototype.setBgColor = function() {...对象属性中的函数就被称之为 method，那么 non-mehtod 就是指不被用作对象属性中的函数了，可是为什么说箭头函数更适合 non-method 呢？

4642 0

通过vue.js 学习来总结es6语法中的箭头函数，箭头函数原理分析。

--------------------- ES6标准新增了一种新的函数：Arrow Function（箭头函数）。...因为它的定义用的就是一个箭头： x => x * x 上面的箭头函数相当于： function (x) { return x * x; } 箭头函数相当于匿名函数，并且简化了函数定义。...{ ... }有语法冲突，所以要改为： // ok: x => ({ foo: x }) this —— 笔者认为this是重点需要关注的学习目标箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别...由于this在箭头函数中已经按照词法作用域绑定了，所以，用call()或者apply()调用箭头函数时，无法对this进行绑定，即传入的第一个参数被忽略： var obj = { birth:...） // } //---总结--- //箭头函数一般用于函数嵌套时，防止this指向变化，在箭头函数 //中this的指向一直是外层对象，即廖雪峰大神说的“箭头函数完全

1.7K2 0

JavaScript ES6 箭头函数的使用

语法为：参数 => 函数体基本用法： var f = v => v; //等价于 var f = function(a){ return a; } f(1); //1 当箭头函数没有参数或者有多个参数...var f = (a,b) => a+b; f(6,2); //8 当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回...var f = (a,b) => { let result = a+b; return result; } f(6,2); // 8 当箭头函数要返回对象的时候，为了区分于代码块，要用 () 将对象包裹起来

4691 0

ES6的箭头函数的详细介绍

基本用法 ES6 允许使用“箭头”（=>）定义函数。...上面四点中，第一点尤其值得注意。this对象的指向是可变的，但是在箭头函数中，它是固定的。...setTimeout的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，而它的真正执行要等到100毫秒后。...方法中，使用了箭头函数，这导致这个箭头函数里面的this，总是指向handler对象。...嵌套的箭头函数箭头函数内部，还可以再使用箭头函数。下面是一个 ES5 语法的多重嵌套函数。

4364 0

ES6系列笔记-箭头函数

ES6相关概念就不多解释啦，语法也成为了前端的主流，平时在很多场景开发中都会遇到，一下是关于ES6系列笔记的一些记录~ 1：普通写法和箭头函数 //箭头函数...//箭头函数数组排序 let arr = [1, 23, 45, 67, 3, 2, 22]; arr.sort((n1, n2) => { return...，{}可以省略 //箭头函数数组排序,省略花括号 let arr = [1, 23, 45, 67, 3, 2, 22]; arr.sort(..."utf-8"> //箭头函数

3741 0

ES6特性之：箭头函数

在ES6的所有新特性中，箭头函数(Arrow Fucntion)算是我用的最频繁的特性之一了。它是函数那什么是箭头函数呢？首先，它得有“函数”的功能。...在一个对象的成员函数中的内嵌函数，它的this对象并不是指向成员函数所指向的this对象（也就是这个例子中的person对象），而是指向当前执行上下文的顶层对象（在浏览器中运行的话，就是Window对象...我们可以像如下代码一样，在成员函数中定义一个变量，把成员函数的this缓存下来，然后在内嵌函数中使用成员函数中的这个变量，这样就达到成员函数和内嵌函数中拿到的数据都是一样的： var person =..._name; }; return getMyIntro(); } }; person.intro(); //My name is Kevin 在ES6中，我们也可以通过箭头函数来轻松解决这个问题...getMyIntro定义成了一个箭头函数，这样的话，箭头函数中的this是和当前上下文中的this是一致的了。

3051 0

浅浅的分析下es6箭头函数

前言箭头函数作为es6重点的语法内容之一，很多开发者对其爱不释手，当也要注意其可能存在的问题，其正确的使用场景，否则会引起不必要的bug。...不适用场景定义对象方法一般情况下如果想定义对象下的函数，是多少涉及使用对象中的其他属性的，如果用箭头函数会因为对象无法形成作用域，没有相关上下文，导致this指向全局。...特别需要说明的一点是，如果你对象属性方法中需要定义方法，同时想使用对象属性，那么此时建议使用箭头函数。...比如以下场景： 1 业务或者语法判断过于复杂 2 返回值情况很复杂建议尽管箭头函数和let、const以及一些es6语法变得风行，甚至于有些人觉得用箭头函数就觉得自己的技术进阶了，其实不然，大多人人还是停留在了它写法上的便利...参考文档什么时候不能使用箭头函数 arowFun,我的codepen案例 mdn链接深入浅出箭头函数不能滥用箭头函数

3561 0

ES6 语法详解(箭头函数(重点))

: * 多用于定义回调函数 * * 箭头函数的特点 * 1....箭头函数没有自己的this, 箭头函数的this不是调用的时候决定的,而是在定义的时候处在的对象就是它的this * 普通函数是,谁调用这个函数,函数内的this就是谁,箭头函数是在谁的内部定义的...扩展题解: 箭头函数的this看外层是否有函数 * 如果有,外层函数的this就是内部箭头函数的this * 如果没有,则this就是window.../** * 箭头函数分为两个部分 * => 左边的形参 * 左边的形参对应函数的形参 * => 右边的执行体...* 右边的执行体对应函数的执行体也就是{}包裹的代码 */ // 左侧形参 // 没有参数需要写

2662 0

ES6 箭头函数： () => {} 与匿名函数 function() {}

function foo() { setTimeout( () => { console.log("id:", this.id); },...

3012 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭