箭头函数总结

箭头函数的特点：
1、箭头函数没有this，如果在箭头函数内部使用this，则this指向函数被定义时所在的作用域所指向的this；
2、不能作为构造函数
3、不能使用new操作符调用
4、没有prototype属性
5、不能使用call、apply、bind去改变this的指向（因为箭头函数没有this）
6、没有属于自己的arguments、super、new.target

不使用箭头函数的情况
1、对象的方法中不使用箭头函数
2、原型链中不使用箭头函数
3、构造函数不能使用箭头函数（原因见注）

注：构造函数通过new字符串生成对象实例
new操作符做的事：
(1)创建了一个新的对象obj
(2)new创建的对象指向了构造函数的原型对象：子对象.proto=父函数.prototype
(3)将构造函数中的this绑定到新建的对象obj上
(4)根据构造类型的返回类型做判断，如果是原始值则被忽略，如果是返回对象，需要正常处理。

附：
prototype与__proto__的区别
1.prototype是函数独有的，而__proto__是每个对象都会拥有的(包括函数)
2.prototype的作用是保存所有实例公共的属性和方法;__proto__的作用是当访问一个对象的属性时,如果内部没有该属性,就会在它的__proto__属性所指的那个父对象去找,父对象没有,再去父对象的父对象里找…直到null,即原型链.
3.s.proto === Student.prototype
prototype还有一个constructor属性,指向该对象的构造函数本身.

function Foo() {
        setTimeout( () => {
            console.log(this.id);
        }, 100);
        }
        var id = 21;
        var obj = { id: 42 }
        Foo();  //21，this指向window
        Foo.call(obj);  //42，this指向对象obj



        // var Foo1 = () => {};
        // var foo1 = new Foo1();  // TypeError: Foo1 is not a constructor



        //对象的方法中不使用箭头函数
        var name1='李峋';
        const obj1 = {
            name1: 'syvia',
            getName() {
                return this.name1;
            },
            getName1: () => {
                return this.name1;
            }
        }
        console.log('普通函数',obj1.getName());//syvia
        console.log('箭头函数',obj1.getName1());//李峋
 


        // 原型方法中不使用箭头函数
        const obj2={
            name2:'李峋'
        };
        var name2='朱韵';
        obj2.__proto__.getName=function(){
            return this.name2;
        };
        obj2.__proto__.getName1=()=>{
            return this.name2;//指向window
        }
        console.log(obj2.getName());//李峋
        console.log(obj2.getName1());//朱韵



        /**
         * 使用 let 在全局作用域中声明的变量不会成为 window 对象的属性，
         * var 声明的变量则会(不过，let 声明仍然是在全局作用域中发生的，
         * 相应变量会在页面的生命周期内存续，所以使用window访问会为undefined)：
         * 
        */
        let num = 11; //换成var num=11；则输出11
        const obj4 = {
            num: 22,
            fn1: () => {
                let num = 33;
                const obj5 = {
                    num: 44,
                    fn2: () => {
                        console.log(this.num);
                    }
                }
                obj5.fn2();
            }
        }
        obj4.fn1();//undefined



        /**箭头函数不能使用arguments参数
         * 但是可以包装在普通函数中传给箭头函数**/
        let sum = function(){
            return arguments.length;
        }
        var len=sum(1,2,3);
        console.log(len);//3

        let foo2=function(){
            let bar=()=>{
                console.log(arguments.length);
            }
            bar();
        };
        foo2(5,5,5,6);//4
        foo2.bar(34,2);//传给bar是错误的。

        let sum1=()=>{
            return arguments.length;
        }
        var len1=sum1(1,2);
        console.log(len1);//Uncaught ReferenceError: arguments is not defined at sum1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

很好的借鉴：https://www.jianshu.com/p/e3e4f2d64aeb