（三） ES6 新特性 —— 箭头函数

CSDN话题挑战赛第2期
参赛话题：学习笔记

目录

箭头函数的介绍

this的作用域

不能作为构造实例化对象

不能使用 arguments 变量

箭头函数的简写

箭头函数实践

---

箭头函数的介绍

ES6 允许使用「箭头」（=>）定义函数。

声明一个函数

// let fn = function(){

// }
let fn = () => {
            
}

let fn = (a,b) => {
    return a + b;
}
let result = fn(1, 2);
console.log(result);

this的作用域

箭头函数中的this 是静态的. this 始终指向函数声明时所在作用域下的 this 的值

function getName(){
	console.log(this.name);
}
let getName2 = () => {
	console.log(this.name);
}

//设置 window 对象的 name 属性
window.name = '尚硅谷';
const school = {
	name: "ATGUIGU"
}
  
//直接调用
getName();  //尚硅谷
getName2();    //尚硅谷

getName.call(school);  //ATGUIGU
getName2.call(school);  //尚硅谷

不能作为构造实例化对象

let Person = (name, age) => {
    this.name = name;
    this.age = age;
}
let me = new Person('xiao', 30);
console.log(me);  //Uncaught TypeError: Person is not a constructor

不能使用 arguments 变量

let fn = () => {
     console.log(arguments);
}
fn(1,2,3);//Uncaught ReferenceError: arguments is not defined

箭头函数的简写

1) 省略小括号, 当形参有且只有一个的时候

        (单一参数) => {函数声明}

        单一参数 => {函数声明}

    没有参数的函数应该写成一对圆括号:

        () => {函数声明}

// let add = (n) => {
//     return n + n;
// }

let add = n => {
    return n + n;
}
console.log(add(9));

2) 省略花括号, 当代码体只有一条语句的时候, 此时 return 必须省略而且语句的执行结果就是函数的返回值

// var x = function(x, y) {
//      return x * y;
// }

const x = (x, y) => x * y;

let pow = n => n * n;
console.log(pow(8));

箭头函数实践

1. 点击 div 2s 后颜色变成『粉色』

• 传统写法

<div id="ad"></div>
<script>
    //获取元素
    let ad = document.querySelector('#ad');
    //绑定事件
    ad.addEventListener("click", function(){
        //保存 this 的值
        // let _this = this;
        //定时器
        setTimeout(function(){
            // this.style.background = 'pink';//error  Cannot set properties of undefined
            // 因为setTimeOut中this指向的是window 
            // console.log(this);
            // _this.style.background = 'pink';
            // 解决方法可以在外层就保存this的值
            ad.style.background = 'pink';
        }, 2000);
    }
    </script>

✨不能在setTimeOut()中使用this来使盒子变色，因为setTimeOut中this指向的是window

setTimeout(function(){
    // this.style.background = 'pink'; //error  Cannot set properties of undefined
    // 因为setTimeOut中this指向的是window 
    // console.log(this);
    ad.style.background = 'pink';
},2000);

解决方法：可以在setTimeOut外面就保存this的值

ad.addEventListener("click", function(){
    //保存 this 的值
    // let _this = this;
    //定时器
    setTimeout(function(){
        _this.style.background = 'pink';
        // 解决方法可以在外层就保存this的值
    }, 2000);
}

• 箭头函数写法

setTimeout(() => {
    // 因为箭头函数下this指向的是在函数声明时所在的作用域下的值
    // setTimeout函数是在点击事件函数里面声明的，所以setTimeout里面的this指向的作用于就是点击函数事件,也就指向事件源ad
    this.style.background = 'pink';
}, 2000);

2. 从数组中返回偶数的元素

• 传统写法

const arr = [1,6,9,10,100,25];
const result = arr.filter(function(item){
    if(item % 2 === 0){
        return true;
    }else{
        return false;
    }
});

• 箭头函数写法

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

👉== 与 === 1、===：称为等同符，当两边值的类型相同时，直接比较值，若类型不相同，直接返回 false； 2、==：称为等值符，当等号两边的类型相同时，直接比较值是否相等，若不相同，则先转化为类型相同的值，再进行比较； 类型转换规则： 1）如果等号两边是boolean、string、number三者中任意两者进行比较时，优先转换为数字进行比较。 2）如果等号两边出现了 null 或 undefined , null 和 undefined 除了和自己相等，就彼此相等 注意：NaN == NaN //返回false，NaN 和所有值包括自己都不相等。

总结：

箭头函数适合与 this 无关的回调.：定时器, 数组的方法回调

箭头函数不适合与 this 有关的回调：事件回调, 对象的方法