特型介绍:箭头函数是ES6新增的特性之一,它为JS这门语言提供了一种全新的书写函数的语法。

'use strcit';
let arr = [1,2,3];
//ES5
let es5 = arr.map(function(n){
return n*2;
});
//ES6
let es6 = arr.map(n => n*2);
console.log(es5); //[2,4,6]
console.log(es6); //[2,4,6]

箭头函数简化了原先的函数语法,不需要再写 function ,如果函数体只有一行代码的话连 return 都不用写,这个特性对于热衷于简化流程和工作的程序员来说相当对胃口。

箭头函数支持两种模式的函数体写法,我们姑且叫他简洁函数体和块级函数体。

'use strcit';
// 简洁函数体
let fn = x => x * x; // 块级函数体
let fn = (x, y) => {return x + y;};

简介函数体默认会把表达式的结果返回,块级函数体需要手动 return 。如果想要返回一个对象又想使用简洁函数体的话,需要这么写:

'use strcit';
let fn = () => ({});
fn(); // {}

如果写成 var fn = () => {} ,那么执行 fn() 只能返回 undefined 。

'use strict';
//第一种
let Person = function(){
this.age = 2;
let that = this;
setTimeout(function(){
     that.age++;
console.log(that.age);
},1000);
}; //第二种
let Person = function(){
this.age = 2;
setTimeout(function(){
     this.age++;
console.log(this.age);
}.bind(this),1000);
};
new Person();

之前我们想操作setTimeout参数function内部的this可能会用上述两种方法,看上去不错了, 但是现在有了箭头函数就不一样了,代码如下:

'use strict';
let Person = function(){
this.age = 2;
setTimeout(() => {
     this.age++;
console.log(this.age);
},1000);
};
new Person();  

由于箭头函数已经绑定了this 的值,即使使用apply或者call也不能只能起到传参数的作用,并不能强行改变箭头函数里的this。

'use strict';
let obj = {
x:1,
show1:function(y){
let fn = y => y+this.x;
return fn(y);
},
show2:function(y){
let fn = v => v + this.x;
let whatever = {
x: 2
};
return fn.call(whatever, y);
}
};
console.log(obj.show1(1)); //
console.log(obj.show2(2)); //

箭头函数不能与new 关键字一起使用,会报错

'use strict';
let Fn = () => {
this.a = 1;
};
let f = new Fn(); // Error

关于es6的箭头函数使用与内部this指向的更多相关文章

  1. ES6学习--箭头函数

    1. 箭头函数基本形式 let func = (num) => num; let func = () => num; let sum = (num1,num2) => num1 + ...

  2. es6的箭头函数和es5的function函数区别

    一.es6的箭头函数es6箭头函数内部没有this,使用时会上朔寻找最近的this不可以做构造函数,不能使用new命令,因为没有this函数体内没有arguments,可以使用rest参数代替不能用y ...

  3. 关于ES6 用箭头函数后的 this 指向问题

    最近写完小程序后, 开始学习React, 因为有编译器, 就直接用ES6 新语法了, 中间自然离不开  () => { console.log('箭头函数的this是指向哪的问题')}; var ...

  4. ES6中箭头函数的作用

    我们知道在ES6中,引入了箭头函数,其本质就是等同有ES5中的函数.类似于下面的写法: let test1=() => “abc”; let test2=() => { return “a ...

  5. ES6之箭头函数中的this

    在讲箭头函数中的this之前我们先介绍一下普通函数中的this.      普通函数中的this: (1)this指向它的直接调用者 (2)默认的,非严格模式下,没找到直接调用者则指向window ( ...

  6. Es6中箭头函数与普通函数的区别

    Es6中箭头函数与普通函数的区别? 普通function的声明在变量提升中是最高的,箭头函数没有函数提升 箭头函数没有属于自己的this,arguments 箭头函数不能作为构造函数,不能被new,没 ...

  7. ES6中箭头函数与普通函数this的区别

    普通函数中的this: 1. this总是代表它的直接调用者, 例如 obj.func ,那么func中的this就是obj 2.在默认情况(非严格模式下,未使用 'use strict'),没找到直 ...

  8. ES6笔记② 箭头函数

    特性介绍 箭头函数是ES6新增的特性之一,它为JS这门语言提供了一种全新的书写函数的语法. //ES5 function fun(x,y){ return x+y; } console.log(fun ...

  9. 初步探究ES6之箭头函数

    今天要介绍的是ES6中的箭头函数. 语法 我们先来看看箭头函数的语法: ([param] [, param]) => { statements } param => expression ...

随机推荐

  1. 使用ListItem给DropDownList填充数据

    global::日积月累啥的啊.DBhelper db = new 日积月累啥的啊.DBhelper(); ListItem[] item=]; DataTable dt=db.GetDataTabl ...

  2. poj 2778 DNA Sequence AC自动机

    DNA Sequence Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 11860   Accepted: 4527 Des ...

  3. 实现pushViewController:animated:的不同页面转换特效

    1. 首先要明确的是,不使用pushViewController的默认动画,所以在调用这个函数时,要将animated设置为NO.2. 使用普通的来CATransition实现转换效果,代码如下:CA ...

  4. uva 10130 SuperSale

    一个01背包问题: 刚刚开始把题目看错了,以为物品的数目是有限的,然后让你求一个家庭里最多能够拿多个价值的东西: 这样一来的话,这个题目就有点意思了: 但是后来发现竟然是个简单的01背包问题 =  = ...

  5. API通常的url语法

    ?后面带的是get方式传递的值,如果有多个值,用 & 号分割.另外正式项目一般不用get方式传递,容易被人sql注入,即所谓的入侵. 详细看这篇http://www.cnblogs.com/k ...

  6. HDU 4430 Yukari's Birthday (二分+枚举)

    题意:给定一个n(18 ≤ n ≤ 10^12),一个等比数列k + k^2 + .......+ k^r = n 或者 = n-1,求出最小的k*r,如果最小的不唯一,则取r更小的 分析:两个未知数 ...

  7. Android网络框架Volley(实战篇)

      之前讲了ym—— Android网络框架Volley(体验篇),大家应该了解了volley的使用,接下来我们要看看如何把volley使用到实战项目里面,我们先考虑下一些问题: 从上一篇来看 mQu ...

  8. 2015第44周六tomcat集群了解

    对于WEB应用集群的技术实现而言,最大的难点就是如何能在集群中的多个节点之间保持数据的一致性,会话(Session)信息是这些数据中最重要的一块.要实现这一点,大体上有两种方式,一种是把所有Sessi ...

  9. HDU 5924 Mr. Frog’s Problem 【模拟】 (2016CCPC东北地区大学生程序设计竞赛)

    Mr. Frog's Problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Other ...

  10. Matlab中常用操作

    (1)换行操作: 末尾加上“...”,然后加enter:有时候多条语句重起一行,这时shift+enter >> 4*sin(0.3)*...8 (2)一些快捷键: Ctrl+R 可多行同 ...