Javascript(笔记33) - ES6特性 - 箭头函数

Javascript(笔记33) - ES6特性 - 箭头函数

箭头函数

之前声明一个函数：

let fn = function(){
}

现在可以这样声明：

不带参数的：

let fn = () => {
}

带形参的：

let fn = (a,b) =>{
    return a + b;
}
console.log(fn(3, 6));      //  9

特性1：this 是静态的，this 始终指向函数声明时所在作用域下的 this 的值；

先写两个函数：

function getName1(){                // 常规写法
    console.log(this.name);
}
let getName2 = () =>{               // 箭头函数写法
    console.log(this.name);
}

window.name = "Jacky";              // 定义全局变量
const ZXY ={                        // 定义个对象
    name : "zhang xueyou"
}

getName1();                         // Jacky 调用全局变量 name
getName2();                         // Jacky 调用全局变量 name 

getName1.call(ZXY);                 // zhang xueyou 改变 this 指向，调用了ZXY内的 name
getName2.call(ZXY);                 // Jacky 声明时 this 的作用域就在全局

特性2：箭头函数不能作为构造函数实例化对象；

先看个常规的构造函数实例化对象：

function Car(brand,color){
    this.brand = brand;
    this.color = color;
}
let car = new Car('BMW','black');
console.log(car.brand);             // BMW

再看箭头函数的写法，能不能实例化对象：

let Car = (brand,color) =>{
    this.brand = brand;
    this.color = color;
}
let car = new Car('BMW','black');   // 报错 
console.log(car.brand);

类型错误： Car 不是构造器；

特性3：箭头函数不能使用 arguments 变量；

常规函数里，可以使用 arguments 来保存实参：

function sum(a,b){
    console.log(arguments)      // [2,3]
}
sum(2,3);

改用箭头函数：不能使用 arguments 

sum = (a,b) =>{
    console.log(arguments);    // 报错  arguments  未定义
}
sum(2,3);

特性4：箭头函数的简写

4.1 省略小括号；当形参有且只有一个的时候，可以省略形参小括号；

let add = n =>{       //  形参的小括号可以省略
    return n+=n;
}
console.log(add(5));  //  10

4.2 省略花括号；当代码只有一条语句的时候，可以省略花括号，return 也必须省了，而且语句的执行结果就是函数的返回值；

let pow = n => n*n;
console.log(pow(6));    // 36

和完整写法对比一下：

let pow = (n) => {
    return n * n ; 
}
console.log(pow(6));    // 36

和以前写法对比一下：

function pow(n){
    return n * n ; 
}
console.log(pow(6));    // 36

箭头函数实践

案例1：点击 div 2S 后，颜色变成粉色；

HTML和CSS

<style>
    div {
        display: inline-block;
        margin: 0 4px;
        width: 100px;
        height: 100px;
        border: 1px solid #CAE5E6;
        background-color: #C8E2E3;
    }
</style>

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

看原来的写法：

let ad = document.getElementsByTagName('div')[0];
ad.addEventListener('click', function(){  // 这里不能换箭头函数，不然事件源的 this 就不再指向 ad 而去指向外层作用域了
    let _this = this;        // 把这层函数的 this 保存下来，留给 setTimeout；
    setTimeout(function(){
        _this.style.backgroundColor = 'pink';
    },2000);
});

看箭头函数的写法：

let ad = document.getElementsByTagName('div')[0];
ad.addEventListener('click',function(){
    setTimeout(()=>{
        this.style.backgroundColor = 'pink';
    },2000);
});

案例2：声明数组，从数组中返回偶数的元素；

看下原来的写法：

const arr = [2,3,5,8,21,24];
let result = arr.filter(function(item){
    if (item % 2 === 0){
        return true;
    }else{
        return false;
    }
});
console.log(result);    // [2, 8, 24]

用箭头函数的写法：一行就搞定了，不是很难读；

const arr = [2,3,5,8,21,24];
let result = arr.filter(item => item % 2 === 0 );  // 是 true 就返回了
console.log(result);   // [2, 8, 24]

箭头函数总结

适合的场景： 与 this 无关的回调，如：定时器，数组的方法回调；

不适合的场景：与 this 有关的回调；如：事件回调，像上面的监听里的回调；对象的方法也不适合（但不是说不能）；

obj = {
    name: "Jack",
    getName: function() {
        console.log(this.name);
    },
}
obj.getName();        //  Jack

obj = {
    name: "Jack",
    getName: () => {
        console.log(this.name);
    },
}
obj.getName();        //  无输出