SOURCE

//箭头函数特性
//1.this是静态的，始终指向当前作用域下的this
/*
function fn1(){
    console.log(this.name)
}

let fn2=()=>{
    console.log(this.name)
}

window.name='这里是window';
const rename={
    name:"这是rename"
}

// fn1.call(rename); //普通函数this指向可以补改变
// fn2.call(rename); //箭头函数this指向不可以改变

//2.不能作为构造实例化对象
// let Person = (name,age) => {
//     this.name=name,
//     this.age=age;
// }   
// let me = new Person('xiaomin',30);
// console.log(me);


//3.不能合用 arguments
//  let fn = () => {
//      console.log(arguments);
//  }
//  fn(1,2,4);
// let fn = function () {
//     console.log(arguments)
// }
//   fn(12,3)

// 4. 简写 - 省略小括号，条件是只有一个参数的时候
let add = n => {
    return n+n
}
    console.log(add(9));
//也可省略花括号(必须省去return )，条件是只有一条语句
let pow = n => n*n;
    console.log(pow(9))
*/

//下面是箭头函数的例子
//指向问题
let ad =document.getElementById('ad');

ad.addEventListener("click",function(){
    console.log(this.nodeName);
    this.style.background = 'red';
    // let _this = this;
    // setTimeout(function(){
    //     _this.style.background = 'green';
    // },2000)
    setTimeout(() => {
        this.style.background = "green"
    },2000) 

})

//省略  简写   过滤（filter)

const arr = [1,4,2,6,4,7,3,]

// const result = arr.filter (function(item){
//     if(item%2 === 0){return true}
//     else{return false}
// })

const result = arr.filter (item => item%2===0)

console.log(arr)
console.log(result)


//总结 箭头数会把this 指向外层的对象，不太适合应用于
//与 this 有关的回调，事件回调整，对象的方法

<div id="ad">
    
</div>

#ad{
    height:50px;
    width:50px;
    border:1px solid;
}