JavaScript箭头函数

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>

相关阅读:
【JavaSE】图书管理系统之MySQL版本
Ruby on Rails 实践：课程导读
Opencv进行图像处理基础模板
西门子PLC-224XP国产替代详细软硬件方案（附全套方案下载链接！）
conda取消自动进入base环境
【文件传输】查找等相关命令
STM32中SPI通信的完整C语言代码范例
磷酸除杂回用去除铁、铝、氟
90---Python 直角坐标系下绘制椭圆形
风储VSG-基于虚拟同步发电机的风储并网系统Simulink仿真

原文地址：https://blog.csdn.net/m0_68633696/article/details/125891996