ES6--箭头函数

爱喝珍珠奶茶

已于 2022-07-12 22:36:34 修改

阅读量257

点赞数

分类专栏： JS--ES6 文章标签： javascript 前端

于 2022-07-12 16:37:03 首次发布

本文链接：https://blog.csdn.net/m0_63774574/article/details/125744996

版权

JS--ES6 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文详细解读了箭头函数的定义，包括函数声明式和定义式，重点比较了箭头函数与普通函数的this指向差异，并通过实例说明了其在作用域和绑定上的特点。此外，讨论了箭头函数的简洁写法以及其在特定场景下的使用限制，如不能创建对象和绑定this的问题。

摘要由CSDN通过智能技术生成

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

1.箭头函数定义

函数的两种写法

1）函数的声明式和定义式

函数定义式：var fn=function(){}

函数声明式：

function fn(){

}

（1）箭头函数语法

参数 => 函数体
(参数) => {函数体}

（2）箭头函数和普通函数的区别

1）this

箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。

举例:

            var fn = (a, b) => {
				console.log(this, 11111111111)
				return a + b
			}

			var fn = function(a, b){
				console.log(this, 222222222)
				return a + b
			}

			var obj={name:"karen",fn}
			var re = fn(100, 200)
			var re2 = obj.fn(100, 200)
			console.log(re, typeof(fn))

运行结果：

由于this 在箭头函数中已经按照词法作用域绑定了，所以施一公call 或者apply() 调用函数的时候，无法对this 进行绑定，即传入的第一个参数被忽略：

var obj={
birth:2018,
getAge:function(year){
var b =this.birth; //2018
var fn = (y)=>y-this.birth //this.birth 仍然是2018
return fn.call({birth:200},year)
}
}
obj.getAge(2020)

this是离它最近的嵌套的 function/方法这个函数的调用者直到顶层都没有就是window

例如：

            var obj={
				name:"karen",
				say:function(){
					var fn=(a)=>{
						console.log(this,123456)
						return 1000
					}
					fn(2)    //fn函数是谁调用者 window
				}
			}
			obj.say()        //调用者

运行结果：

如果箭头函数的执行体只有一个表达式就是返回值那么可以省略大括号

例如：

var fn2=(a,b)=>a*b

var re=fn2(10,20)

如果箭头函数的形参只有一个可以省略参数体小括号

例如：

var fn3=a=>a*a

var re2=fn3(100)

console.log(re2)

运行结果：

个人建议无论箭头函数的执行体的表达式只有一个或者多个，都不要省略大括号

包括形参的小括号也是一样的，都按照箭头函数的标准格式写

箭头函数不能用于创建对象

var fn=(a)=>{

this.a=a

}

var f1=new fn(10)

运行结果：

没有 this、super、arguments 和 new.target 绑定

程序：

        function tool(cb){
				cb()
			}
			var obj={
				name:"karen",
				say:function(){
					console.log(this.name)
					
				},
				makeMoney:function(){									
					tool(()=>{
						console.log(this.name+"赚了钱",111)
					})
				}
			}
			obj.say()
			obj.makeMoney()

运行结果：