箭头函数总结

Posted 2022-12-07 iiiLISA

箭头函数的特点：
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

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