所谓的箭头函数,是函数的另一种语法形式。将匿名函数的部分,从 function(){} 写成 ()=>{} 的形式
const fun = function(){}
普通函数
const fun = ()=>{}
箭头函数
如果函数只有一个参数,可以不写()
const fun = function(e){}
普通函数
const fun = e =>{}
箭头函数
如果执行体中只有一行代码,可以不写{}
const fun = e =>{console.log(e)}
普通箭头函数
const fun = e => console.log(e)
不写{}箭头函数
const oDiv = document.querySelector('div');
// 普通函数
oDiv.addEventListener('click' , function(){
console.log('我是div标签')
})
// 箭头函数
oDiv.addEventListener('click' , ()=>{
console.log('我是div标签');
})
// 只有一个参数,可以不写(),直接定义一个参数
oDiv.addEventListener('click' , e=>{
console.log(e);
})
// 只有一行代码,可以不写{}
oDiv.addEventListener('click' , e=>console.log(e) )
箭头函数中的this指向:
在箭头函数中,this指向父级程序的this指向
如果父级程序有this指向,那么箭头函数指向的就是父级程序的this
如果父级程序没有this指向,那么指向的就是window
普通函数的this指向:
声明式,赋值式/匿名函数,对象中函数,绑定的事件处理函数,this都是指向调用函数时之前定义的内容
①声明式 — 指向的是window
function fun1(){
console.log(this);
}
fun1();
②匿名函数/赋值式 — 指向的是window
const fun2 = function(){
console.log(this);
}
fun2();
③定义在对象中的函数 — 指向的是对象
const obj = {
fun3 : function(){
console.log(this);
}
}
obj.fun3();
④绑定的事件处理函数 — 指向的是绑定事件处理函数的标签
const oDiv = document.querySelector('div');
oDiv.onclick = function(){
console.log(this);
}
//oDiv.addEventListener('click' , function(){
//console.log(this);
//})
箭头函数的this指向与普通函数的this指向是有区别的
箭头函数中,this的指向是父级程序的this指向当前的程序,箭头函数的父级程序没有this指向的就是window
const oDiv = document.querySelector('div');
oDiv.addEventListener('click' , ()=>{
console.log(this);
})
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
// 对li进行操作
const oLis = document.querySelectorAll('li');
oLis.forEach(function(item,key){
console.log(this); // 输出的是forEach的函数的this指向
// 箭头函数的this是父级程序forEach()的this,是window
item.addEventListener('click' , ()=>{
console.log(key,this);
})
})
</script>
const obj = {
// 普通函数this指向对象
fun1 : function(){console.log(this)}
// 箭头函数this指向是父级程序,父级程序是对象。只有函数有this,obj对象没有this,父级程序没有this,指向的是window
fun2 : ()=>{console.log(this)},
// fun3是一个普通函数,this指向的是obj对象
fun3 : function(){
// fun4是一个箭头函数,this指向的是父级程序的this指向
// 父级程序是fun3,fun3的this是对象,fun4箭头函数的this也是对象
const fun4 = ()=>{console.log(this)};
fun4();
}
}
obj.fun1();
obj.fun2();
obj.fun3();
关于this的总结:
普通的function函数
声明式 — window
赋值式 — window
forEach循环 — window
定时器,延时器 — window
对象中的函数 — 对象本身
事件绑定事件处理函数 — 绑定事件的标签
箭头函数的this指向:父级程序的this指向
如果父级程序有this指向(父级程序也是函数),this指向的就是父级程序的this指向
如果父级程序没有this指向(数组,对象…),this指向的是window
改变this指向:
箭头函数不能改变this指向,只有普通function函数能改变this指向
①call()方法
语法:函数.call(参数1,其他参数…可以是多个或者没有 )
作用:调用并且执行函数,同时将函数的this指向定义为指定的内容(参数1)
参数1是改变的this的指向
其他参数是原始函数的实参,原始函数有几个形参,此时就要对应的输入几个实参。没有形参就没有实参
②apply()方法
语法: 函数.apply(参数1,参数2) 只有两个参数
参数1:改变的this的指向内容
参数2:原始函数的实参必须是一个数组的形式,将实参定义成数组的单元
其他用法和作用与call是相同的
③bind()方法
语法: const 变量 = 函数.bind(参数1);
不是立即执行函数
生成一个新的函数,这个新的函数是改变this指向之后的新的函数
参数1定义的要改变的的this指向
其他参数一般不定义,使用函数原有的形参
总结: call方法与apply方法作用效果都是完全一致的,只是对于原始函数的参数赋值方法不同。call方法是通过其他多个参数来实现,apply方法是通过一个数组参数来实现。两个方法没有本质的区别,爱用哪个用那个
call方法与apply方法都是立即执行函数,参数1都是改变的this指向,其他参数是原始函数的形参(可以有,也可以没有)
bind不是立即执行函数,是生成一个新的函数。参数1是改变的this指向,就使用原始函数的形参
const obj1 = {
name:'张三',
age:18,
sex:'男',
}
const obj2 = {
name:'李四',
fun2 : function(){
console.log(this);
}
}
// 对象中的函数this指向的是这个对象,obj2
obj2.fun2();
// 改变this指向,指向的是obj1这个对象
// 代用,并且执行fun2这个函数,同时将fun2的this指向从原始的obj2改变为obj1
obj2.fun2.call(obj1);
// 带有参数的函数this指向的改变
// 定义的带有参数的普通函数
function fun3(name,age,sex){
console.log(name,age,sex,this);
}
// 执行时输出实参,此时this指向是window
fun3('张三',18,'男');
// 改变this指向,call方法
fun3.call(obj1,'李四',20,'女');
// 改变this指向,apply方法
fun3.apply(obj1 , [ '王五' , 20 , '不知道' ])
const fun4 = fun3.bind(obj1);
fun4('王二麻子' , 100 , '不详');