ES6之箭头函数

什么是箭头函数

提起箭头函数,我们不免不想,普通函数用的好好的,为什么es6新增了箭头函数?箭头函数的语法是什么?与普通函数对比,有哪些区别?接下来,就让我们一起康康吧

起因:es5中如果函数中嵌套或调用其他的函数,在控制台中就会出现 ...is not a function的报错,这时就是由于this的指向的问题

诞生的原因:箭头函数的出现就是为了解决es5中的this指向的问题

注意:值得一提的是,箭头函数中没有this,它的this来自父级上下文,并且永远指向父级上下文;

1
2
3
4
5
6
7
8
9
10
11
let obj={
fn:fucntion(){
console.log(this) //this指向的是obj
}
fn1:()=>{
console.log(this)//this指向的是window,window就是它的父级上下文
}
}
obj.fn()
//普通函数,谁调用this指向谁
obj.fn1()//访问对象中的fn1属性,得到的是一个箭头函数,前面没人调用的话,就指向window

箭头函数的this并不会在调用的时候被改变,因为箭头函数在声明的时候,this指向就已经被永久的确定了,这也是对上面的注意点的进一步解释

箭头函数的语法

1.箭头函数只有一个参数的时候,可以省略形参参数的()

1
2
3
4
5
6
7
//普通函数
fucntion fn(data){
return data
}
//箭头函数
//只需要返回一个数据,并且这个数据时函数的参数
var fn=data=>data

2.箭头函数只有一句代码的时候,可以省略{}

3.箭头函数有且只有一句代码的时候,可以省略return;箭头函数会直接将这句代码的执行结果作为返回值

1
2
3
4
5
6
//普通函数
function fn(a,b){
return a+b
}
//箭头函数,只返回一个简单的逻辑语句
var fn=(a,b)=>a+b

4.常规写法

1
var fn=(形参1,...形参)=>{函数体}

JS中的this指向

复制代码1.方法中,谁调用,this指向谁(.前是谁,this指向谁).前默认window

1
1.方法中,谁调用,this指向谁(.前是谁,this指向谁).前默认window

复制代码2.如果没有人调用时,this默认指向window

1
2.如果没有人调用时,this默认指向window

复制代码3.构造函数中的this;指向的是通过这个构造函数创建出来的实例;如果是直接执行的话,指向的是window

1
3.构造函数中的this;指向的是通过这个构造函数创建出来的实例;如果是直接执行的话,指向的是window

复制代码  构造函数---ES5中的类

1
 构造函数---ES5中的类

复制代码  普通函数和构造函数的区别: 构造函数首字母需要大写   构造函数上的方法 写在构造函数的prototype上面

1
2
 普通函数和构造函数的区别: 构造函数首字母需要大写
  构造函数上的方法 写在构造函数的prototype上面

复制代码4.强制改变this的指向

1
4.强制改变this的指向

复制代码  call(this的指向,function的参数)//传入的参数,以逗号的形式隔开

1
 call(this的指向,function的参数)//传入的参数,以逗号的形式隔开

复制代码  apply(this指向,function的参数)//传入的参数,以数组的形式进行传参

1
 apply(this指向,function的参数)//传入的参数,以数组的形式进行传参

复制代码  bind()本身不执行要改变this指向的函数,因为返回的是改变this指向的新方法,需要手动调用 //要想函数执行 在bind()后面加()

1
 bind()本身不执行要改变this指向的函数,因为返回的是改变this指向的新方法,需要手动调用 //要想函数执行 在bind()后面加()

箭头函数和普通函数的区别

复制代码1.箭头函数是匿名函数,不能作为构造函数,不能使用new(否则报出的错为:fn is not a constructor)

1
1.箭头函数是匿名函数,不能作为构造函数,不能使用new(否则报出的错为:fn is not a constructor)

复制代码2.箭头函数没有原型属性

1
2.箭头函数没有原型属性

复制代码3.箭头函数没有arguments(参数集合),可以使用展开运算符...(若在箭头函数fn里面使用arguments,就会报以下错:arguments is not defined at fn)

1
3.箭头函数没有arguments(参数集合),可以使用展开运算符...(若在箭头函数fn里面使用arguments,就会报以下错:arguments is not defined at fn)

复制代码4.箭头函数不能通过call() apply() bind()方法,改变this指向,但是能够正常传参

1
4.箭头函数不能通过call() apply() bind()方法,改变this指向,但是能够正常传参

复制代码5.箭头函数中没有this,它的this来自父级上下文 并且永远指向父级上下文

1
5.箭头函数中没有this,它的this来自父级上下文 并且永远指向父级上下文

arguments

arguments是一个参数集合,也是一个伪数组,当普通函数中要接收的参数很多时,可以直接使用arguments接收所有的形参

既然提到了伪数组,那不妨大家一起探讨以下我们平时常见的伪数组又有那些呢?

常见的伪数组有：

1.document.getElementsByTagName和document.childNodes,返回NodeList对象的都是伪数组。 2.function的arguments对象。

3.上传文件时选择的file对象也是伪数组。

伪数组的特点:

1、伪数组是一个对象。

2、这个对象必须要有length属性。且必须是number类型。

3、如果这个对象的length不为0，那么必须要有按照下标存储的数据。

4、伪数组不可以使用数组中的方法（.forEach）。

5、但是伪数组的长度不可变。真数组的长度是动态可变的。

6.伪数组的[[Prototype]]: Object 真数组的[[Prototype]]: Array

如果伪数组要使用真数组中的一些方法,就要想办法转化为真数组

两种方式如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
1. Array.from(数组名)
2. Array.prototype.slice.call(数组名)// 此法的this指向的是 实例后的对象
//实现过程
Array.prototype.slice=function(index1,index2){
   
let newArr=[]  
 
for(let i=index1;i<index2;i++){
       
newArr.push(this[i])  
}  
 return newArr
}

最后

以上就是朴素黄蜂最近收集整理的关于ES6之箭头函数的全部内容，更多相关ES6之箭头函数内容请搜索靠谱客的其他文章。