专门对 匿名函数 function(){} 使用的简化语法
凡是写匿名函数的地方都可以使用 箭头函数 替换
function(){} --- ()=>{}
箭头函数的简化语法
如果只有一个参数,可以不写()
function(e){} --- e => {}
如果{}中,只有一行代码,可以不写 {}
function(e){console.log(e)} --- e => console.log(e)
实例
// 是函数的另一种语法形式
var fun = function(){} //普通函数
var fun = ()=>{} //箭头函数
// 将匿名函数的部分,从 function(){} 写成 ()=>{} 的形式
// 如果函数只有一个参数,可以不写()
var fun = function(e){} //普通函数
var fun = e => {} //箭头函数
// 如果执行体中只有一行代码,可以不写{}
var fun = e=>{console.log(e)} //普通箭头函数
var fun = e=> console.log(e) //不写{}箭头函数
var 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指向的就是window
htmlcssjs
<div class="div" id="id">111</div>
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>随便写写 var oDiv = document.querySelector('div');
oDiv.addEventListener('click' , ()=>{
console.log(this); //window
})
// 对li进行操作
var oLis = document.querySelectorAll('li');
oLis.forEach(function(item,key){
console.log(this); // 输出的是forEach的函数的this指向(window)
// 箭头函数的this,是父级程序,forEach()的this,是window
item.addEventListener('click' , ()=>{
console.log(key,this);
})
})
// forEach()中 函数的this指向,就是window
var arr = [1,2,3,4,5,6];
arr.forEach(function(){
console.log(this);
})
var 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也是对象
var fun4 = ()=>{console.log(this)};
fun4();
}
}
obj.fun1();
obj.fun2();
obj.fun3();
Comments | NOTHING