ES6笔记② 箭头函数
特性介绍
箭头函数是ES6新增的特性之一,它为JS这门语言提供了一种全新的书写函数的语法。
//ES5
function fun(x,y){
return x+y;
}
console.log(fun(5,10));//15 //ES6
var fun6 = (x,y) => {return x+y;}
console.log(fun6(6,10));//
ES6简化了声明函数,不需要再写 function
.
好像除了简化代码,并没有什么新奇的对不对,那我们往下慢慢看。
——————————————————————————————————————————————————————————
箭头函数支持两种模式的函数体写法,我们姑且叫他简洁函数体和块级函数体。
// 简洁函数体
var fn = x => x * x; // 块级函数体
var fn = (x, y) => {return x + y;};
简介函数体默认会把表达式的结果返回,块级函数体需要手动 return
。
this指向
用function生成的函数会定义一个自己的 this
,而箭头函数没有自己的 this
,而是会和上一层的作用域共享 this
。
//es5中,内层函数如果想用外层函数的this属性,必须先将this赋值self变量中,然后通过self取值。
function Person(){
this.a = 10;
var self= this;
return function(){
return self.a++;
}
}
var closure = Person();
console.log(closure());//10
console.log(closure());//11
如果使用箭头函数则省事很多,代码如下:
//会和上一层的作用域共享this
//再多套一层
function Person (){ //function Person (){
this.a = 10; this.a = 10;
return () => { return () => {
return this.a++; return () =>{
} return this.a++;
} }
var closure = Person(); }
console.log(closure());//10 }
console.log(closure());//11 var closure = Person();
console.log(closure()());//10
console.log(closure()());//11
apply & call
由于箭头函数已经绑定了 this
的值,即使使用 apply
或者 call
也不能,只能起到传参数的作用,并不能强行改变箭头函数里的 this
。
var adder = {
x: 1,
add1: function (y) {
var fn = v => v + this.x;
return fn(y);
},
add2: function (y) {
var fn = v => v + this.x;
var whatever = {
x: 2
};
return fn.call(whatever, y);//this并不是whatever
} };
console.log(adder.add1(1)); //
console.log(adder.add1(10)); //
ps:this指向的问题js的this比较诡异,谁执行就指向谁
arguments
var fn = (...rest) => rest[2];
console.log(fn(2,0,5)); //
...rest
也是ES6
的一个新特性,之后会介绍。
我们知道JS函数内部有个arguments对象,可以拿到全部实参。现在ES6给我们带来了一个新的对象,可以拿到除开始参数外的参数,即剩余参数
这个新的对象和arguments不一样,它是程序员自定义的一个普通标识符,只是需要在前面加上三个点:...
es6函数中剩余参数 原文地址:http://www.cnblogs.com/snandy/p/4482463.html
不能被new
箭头函数不能与 new
关键字一起使用,会报错
var Fn = () => {
this.a = 1;
};
var f = new Fn(); // Error
ES6笔记② 箭头函数的更多相关文章
- ES6中箭头函数的作用
我们知道在ES6中,引入了箭头函数,其本质就是等同有ES5中的函数.类似于下面的写法: let test1=() => “abc”; let test2=() => { return “a ...
- Es6中箭头函数与普通函数的区别
Es6中箭头函数与普通函数的区别? 普通function的声明在变量提升中是最高的,箭头函数没有函数提升 箭头函数没有属于自己的this,arguments 箭头函数不能作为构造函数,不能被new,没 ...
- es6的箭头函数和es5的function函数区别
一.es6的箭头函数es6箭头函数内部没有this,使用时会上朔寻找最近的this不可以做构造函数,不能使用new命令,因为没有this函数体内没有arguments,可以使用rest参数代替不能用y ...
- es6学习笔记--箭头函数
基本用法 ES6允许使用“箭头”(=>)定义函数. var f = v => v; 上面的箭头函数等同于: var f = function(v) { return v; }; 如果箭头函 ...
- 关于ES6的箭头函数的详解
ok 坑比函数~~箭头函数~~不自己动手写看懂也不行~~~ 当然你也可以一点一点的把函数复制到Babel里面去将ES6转换成ES5 (斗笔行为) 老谢写的笔记教程就是深入(通俗易懂)哈哈~~~ 第 ...
- Es6 之箭头函数 初学
不积跬步,无以至千里;不积小流,无以成江海! // ES5 var selected = allJobs.filter(function (job) { return job.isSelected() ...
- 关于es6的箭头函数使用与内部this指向
特型介绍:箭头函数是ES6新增的特性之一,它为JS这门语言提供了一种全新的书写函数的语法. 'use strcit'; let arr = [1,2,3]; //ES5 let es5 = arr.m ...
- 关于ES6 用箭头函数后的 this 指向问题
最近写完小程序后, 开始学习React, 因为有编译器, 就直接用ES6 新语法了, 中间自然离不开 () => { console.log('箭头函数的this是指向哪的问题')}; var ...
- 进阶路上有你我-相互相持篇之ES6里箭头函数里的this指向问题
首先复习下普通函数里的this指向: function test(){ console.log(this) } test() 你会秒杀的毫无疑问的回答:window,针对普通函数:谁调用了函数 函数 ...
随机推荐
- hdu 5605 geometry(几何,数学)
Problem Description There is a point P at coordinate (x,y). A line goes through the point, and inter ...
- C#基础:事件(一) 【转】
前面简要介绍了委托的基本知识,包括委托的概念.匿名方法.Lambda表达式等,现在讲讲与委托相关的另一个概念:事件. 事件由委托定义,因为事件的触发方(或者说发布方)并不知道事件的订阅方会用什么样的函 ...
- 【最大流之EdmondsKarp算法】【HDU1532】模板题
题意:裸的最大流,什么是最大流,参考别的博客 运用复杂度最高的EK算法 O(M*N),模板来自紫书 #include <cstdio> #include <cstdlib> # ...
- C#整理6——数组的应用
数组的应用:(一).冒泡排序.1.冒泡排序是用双层循环解决.外层循环的是趟数,里层循环的是次数.2.趟数=n-1:次数=n-趟数.3.里层循环使用if比较相临的两个数的大小,进行数值交换. 作业:1. ...
- 详解Linq to SQL
第一部分,什么是Linq to sql Linq to sql(或者叫DLINQ)是LINQ(.NET语言集成查询)的一部分,全称基于关系数据的 .NET 语言集成查询,用于以对象形式管理关系数据,并 ...
- IOS开发 统计XCODE 代码行数
如果要统计ios开发代码,包括头文件的,终端命令进入项目目录下,命令如下 find . -name "*.m" -or -name "*.h" -or -nam ...
- C语言strcmp()函数:比较字符串(区分大小写)
头文件:#include <string.h> strcmp() 用来比较字符串(区分大小写),其原型为: int strcmp(const char *s1, const char *s ...
- CxImage整理(叠加字符/图像合并)
//CxImage叠加字符 void CCxImageTestDlg::OnBnClickedButton1() { CxImage imgJPG; // 定义一个CxImage对象 imgJPG.L ...
- C#.NET Split 的几种使用方法
第一种方法: string s = "abcdeabcdeabcde"; string[] sArray = s.Split('c'); foreach (string i in ...
- debian install & configure(2)-drivers-nvidia
==========================================手动编译卸载受限驱动 :apt-get --purge remove nvidia-*apt-get --purge ...