关于es6的箭头函数使用与内部this指向
特型介绍:箭头函数是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指向的更多相关文章
- ES6学习--箭头函数
		
1. 箭头函数基本形式 let func = (num) => num; let func = () => num; let sum = (num1,num2) => num1 + ...
 - es6的箭头函数和es5的function函数区别
		
一.es6的箭头函数es6箭头函数内部没有this,使用时会上朔寻找最近的this不可以做构造函数,不能使用new命令,因为没有this函数体内没有arguments,可以使用rest参数代替不能用y ...
 - 关于ES6 用箭头函数后的 this 指向问题
		
最近写完小程序后, 开始学习React, 因为有编译器, 就直接用ES6 新语法了, 中间自然离不开 () => { console.log('箭头函数的this是指向哪的问题')}; var ...
 - ES6中箭头函数的作用
		
我们知道在ES6中,引入了箭头函数,其本质就是等同有ES5中的函数.类似于下面的写法: let test1=() => “abc”; let test2=() => { return “a ...
 - ES6之箭头函数中的this
		
在讲箭头函数中的this之前我们先介绍一下普通函数中的this. 普通函数中的this: (1)this指向它的直接调用者 (2)默认的,非严格模式下,没找到直接调用者则指向window ( ...
 - Es6中箭头函数与普通函数的区别
		
Es6中箭头函数与普通函数的区别? 普通function的声明在变量提升中是最高的,箭头函数没有函数提升 箭头函数没有属于自己的this,arguments 箭头函数不能作为构造函数,不能被new,没 ...
 - ES6中箭头函数与普通函数this的区别
		
普通函数中的this: 1. this总是代表它的直接调用者, 例如 obj.func ,那么func中的this就是obj 2.在默认情况(非严格模式下,未使用 'use strict'),没找到直 ...
 - ES6笔记②  箭头函数
		
特性介绍 箭头函数是ES6新增的特性之一,它为JS这门语言提供了一种全新的书写函数的语法. //ES5 function fun(x,y){ return x+y; } console.log(fun ...
 - 初步探究ES6之箭头函数
		
今天要介绍的是ES6中的箭头函数. 语法 我们先来看看箭头函数的语法: ([param] [, param]) => { statements } param => expression ...
 
随机推荐
- Data guard RAC配置【二】
			
2. 利用duplicate配置容灾端 1.配置容灾端oracle用户的环境变量,这里以192.166.1.61为例. export ORACLE_BASE=/opt/oracle export OR ...
 - xcode 环境,多工程联编设置【转】
			
http://blog.csdn.net/vienna_zj/article/details/8467522 一.xcode4中的环境变量 $(BUILT_PRODUCTS_DIR) build成功后 ...
 - java4中创建内对象的方法
			
在java程序中,对象可以被显式地或者隐式地创建.四种显式的创建对象的方式: ● 用new语句创建对象 ● 运用反射手段,调用java.lang.Class 或者 java.lang. ...
 - Linux硬链接与软连接
			
1.Linux链接概念 Linux链接分两种,一种被称为硬链接(Hard Link),另一种被称为符号链接(Symbolic Link).默认情况下,ln命令产生硬链接. [硬连接]硬连接指通过索引节 ...
 - linux 设置命令行属性,背景色,前景色等
			
我的博客:www.while0.com 主要是命令setterm.
 - Oracle RAC的五大优势及其劣势
			
Oracle RAC的五大优势及其劣势 不同的集群产品都有自己的特点,RAC的特点包括如下几点: 双机并行.RAC是一种并行模式,并不是传统的主备模式.也就是说,RAC集群的所有成员都可以同时接收客户 ...
 - Node.js权威指南 (9) - 进程与子进程
			
9.1 Node.js中的进程 / 225 9.1.1 进程对象的属性 / 225 9.1.2 进程对象的方法与事件 / 2279.2 创建多进程应用程序 / 235 9.2.1 使用spawn方法开 ...
 - eclipse常见错误
			
1.The superclass “javax.servlet.http.httpservlet” is not found in the build path 原因:未添加server librar ...
 - HTMLTestRunner生成空白resault.html
			
发现一奇葩问题,用idle或pyscripter执行脚本,生成的是空白html,通过cmd,进入脚本目录执行python xx.py,却能生成测试报告. HTMLTestRunner 例子 #codi ...
 - ORA-12541: TNS: 无监听程序 怎么解决
			
ORA-12541: TNS: 无监听程序 怎么解决? 刚学 oracle ORA-12541: TNS怎么回事,已经打开了所有的服务 fzxs 2008-3-14 下载知道客户端,10分钟内有问必答 ...