【箭头函数】

什么是箭头函数

箭头函数就是把function去掉，在小括号后面加=>

箭头函数的特点

1、如果有一个参数可以省略小括号
2、如果函数返回值只有一条语句，可以省略{}和return
3、箭头函数没有augrments内置对象
4、箭头函数不能用于创建构造函数
5、箭头函数没有prototype属性
6、call，apply可以调用箭头函数，但是不能改变this指向
7、箭头函数的this指向父作用域，（调用它的地方）

代码段解析

1、如果有一个参数可以省略小括号

let demo = x => {
  console.log(x);
}
demo(1)
1
2
3
4

2、如果函数返回值只有一条语句，可以省略{}和return

let demo = x => x
console.log(demo(1));
1
2

3、箭头函数没有augrments内置对象

let demo = () => {
  console.log(arguments);
}
demo()
1
2
3
4

4、箭头函数不能用于创建构造函数

let Person = () => {

    }
    let p1 = new Person()
    console.log(p1); // Person is not a constructor
1
2
3
4
5

5、箭头函数没有prototype属性

let Person = () => {};
    Person();
    console.log(Person.prototype);
1
2
3

6、call，apply可以调用箭头函数，但是不能改变this指向

var name = "win";
    let demo = function () {
      console.log(this.name);
      console.log("箭头");
    };
    var obj = {
      name: "obj",
    };
    demo();
    demo.call(obj);
    demo.apply(obj);

    let fn = () => {
      console.log(this.name);
      console.log("箭头");
    };
    fn();
    fn.call(obj);
    fn.apply(obj);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

7、箭头函数的this指向父作用域，（调用它的地方）

var obj = {
      say: () => {
        console.log(this);
        var demo = () => {
          console.log(this);
        };
        demo();
      },
    };
    obj.say();
1
2
3
4
5
6
7
8
9
10

document.getElementsByTagName("div")[0].onclick = function () {
      setInterval(() => {
        console.log(this);
      }, 1000);
    };
1
2
3
4
5