【JavaScript语法】箭头函数及其this指向

最新推荐文章于 2023-03-15 10:36:34 发布

原创最新推荐文章于 2023-03-15 10:36:34 发布 · 232 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

JavaScript 语法专栏收录该内容

10 篇文章

订阅专栏

本文介绍了JavaScript中箭头函数的使用方法，包括不同参数情况下的语法格式，并详细解释了箭头函数中this关键字的特殊行为及应用实例。

1、箭头函数，function () { }

箭头前面：

如果没有参数: ( )=>
如果一个参数: (x)=> 或者 x=>
如果多个参数 : (参数1，参数2)=> 必须有括号

箭头后面

如果是某个变量：相当于return 这个变量。
如果是代码块： {代码块}

//箭头前面没有参数，箭头后面是返回变量
let func = ()=>5;     //相当于 function(){return 5;}
console.log(func());  //输出 5

//箭头前面没有参数，箭头后面是返回对象
let func = ()=>({a:1});  //相当于 function(){return {a:1};}
console.log(func());     //输出 {a:1}

//箭头前面没有参数，箭头后面是代码块
let func = ()=>{console.log(1111);}  //相当于  function(){console.log(1111);}
func();  //输出 1111

//箭头前面一个参数，箭头后面是返回变量
let func = x=>x;      //相当于  funtion(x){return x;}
console.log(func(5));  //输出 5

// 箭头前面两个参数，箭头后面是代码块
let compare = (a,b)=>{
	return a>b?a:b;
}
console.log(compare(10,20));   //输出 20

2、箭头函数的this指向：
箭头函数是没有自己的this的，箭头函数的this在定义的时候就确定了指向。

var name = '地哥';  //定义了name
let student = {
	id:1001,
	name:'张三',
	age:19,
	//getName:function(){}
	getName:()=>{
		return this.name;
	}
}
console.log(student.getName()); //输出 地哥

let student1 = {
	id:1002,
	name:'李四',
	age:18
}
student1.getName = student.getName;
console.log(student1.getName());//输出 地哥
	
window.name ='小红';   //修改了name
let getName = student.getName;
console.log(getName());  //输出 小红