JavaScript箭头函数

最新推荐文章于 2024-03-07 20:44:12 发布

余月初贰

最新推荐文章于 2024-03-07 20:44:12 发布

阅读量180

点赞数 3

文章标签：前端 html es6

mkbk

本文链接：https://blog.csdn.net/m0_68633696/article/details/125891996

版权

本文详细介绍了ES6中新增的箭头函数的使用方式，包括基础语法、单行与多行函数的区别、参数处理以及this的特殊行为。在全局函数和对象方法中，箭头函数的this与普通函数不同，它会继承上下文的this。此外，通过示例展示了箭头函数在构造函数和事件处理中的应用，以及在异步操作中this的指向问题。

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

ES6中新增的定义函数的方式

基础语法

语法

()=>{}//():函数=>:必须的语法，指向代码块{}：代码块Const myFun=()=>{};//把函数赋值给myFun

举例

//原js写法
function myFun(k,v){
	return k+v;
}
//es6 写法
const myFun1 = (k,v) =>{
	return k+v;
}
console.log(myFun(1,2));
onsole.log(myFun1(10,20));

function sum(a,b){
    return a+b;
}
sum(1,2);
			
//1.箭头函数的写法
const sum = (a,b)=>{
    return a+b;
}
let res = sum(1,2);
console.log(res);
			
//2.箭头函数
//代码块注意一句话省略{}和return
const sum = (a,b)=> a+b;
let res = sum(1,2);
console.log(res);
			
//3.只有一个参数 小括号可以忽略
const sum = a => a+3;
let res = sum(1);
console.log(res);

1.全局函数的this

1.1普通函数this 跟调用者有关
function global(){
    console.log(this);
}
global();
1.2箭头函数的this 箭头函数this this静态根据上下文的this
const global = ()=>{
    console.log(this);
}
global();
2.对象方法里面的this
const Person = {
    realname:'张三',age:19,
    say:function(){
        console.log(this);
    }
}
Person.say();//Person实例
2.2对象箭头函数的this
const Person = {
    realname:'张三',age:19,
    say:()=>{
        console.log(this);
    }
}
Person.say();//windows
3.构造函数的this 构造函数的this就是当前实例

箭头函数的this一旦定义了就不允许改变
function Person(realname,age){
	this.realname = realname;
    this,age = age;
	this.say = ()=>{
	console.log(this);//这个this不会 当时new 实例是谁就是谁
}
	this.say1 = function(){
		console.log(this);
    }
}
	const P1 = new Person('张三',19);
	const P2 = new Person('王武',20);
	P1.say.call(P2);
	P1.say1.call(P2);

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" id="btn">未点击</button>
		<script type="text/javascript">
			let btnObj = document.querySelector('#btn');
			let flag =false;
			btnObj.addEventListener('click',function(){
				flag = !flag;
				if (flag) {
					setTimeout(()=>{
						console.log(this);
						this.innerText = '已点击';
					},1000)
				}else{
					this.innerText = '未点击';
				}
			})
		</script>
	</body>
</html>