由预编译来理清普通函数丶立即执行函数和箭头函数的区别

预编译

• 四部曲
  • 创建AO对象
  • 找形参和变量声明，将变量和形参名作为AO属性名，值为undefined。
  • 将实参值和形参统一
  • 在函数体里面找函数声明，值赋予函数体。

箭头函数

• 特点
  • 不用写function关键字
  • 只能作为箭头函数不能new，没有原型
  • 参数不能重复命名
  • 内部的argument丶this由定义时最外一层的非箭头函数的argument和this决定其值
  • 返回值可以不写return，但是有时候需要配合{}
• 作用/好处
  • 箭头的指向更强
    • 箭头函数可以让this指向固定化，这种特性很有利于封装回调函数。
    • this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this，正是因为它没有自己的this，所以不能用作构造函数。
  • 可读性更好
  • 简化代码
  • 提高开发效率
• 使用箭头函数有几个注意点
  • 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

    var name = '张三';
    var person = {
        name: '小马哥',
        fav: function() {
            console.log(this);
            console.log(this.name);
        },
        fav1: () => {
            console.log(this);
            console.log(this.name);
        }
    }
    person.fav();
    person.fav1();
    
    
    function foo() {
        setTimeout(() => {
            console.log('id:' + this.id);
        }, 100);
    }
    var id = 21;
    foo();
    foo.call({id: 42});
    

  • 不可以当做构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
  • 不可以使用argument对象，该对象函数体内不存在，如果要用，可以使用Rest参数代替。

    var add = () => { // 会报错
        console.log(arguments);
    }
    
    var add = (...args) => {
        console.log(args);
    }  
    

  • 不可以使用yeild命令，因此箭头函数不能用作Genetator函数。
• 箭头函数与普通函数的区别？
  • 普通函数的声明在变量提升是最高的，箭头函数没有函数提升的。
  • 箭头函数没有属于自己的this，argument。
  • 箭头函数不能用作构造函数，不能被new。没有property。
  • call和apply方法只有参数，没有作用域。

    var name = 'haha';    
    var obj = {
        name: 'hehe'
    }
    var fn1 = (a, b) => {
        console.log(this.name);
        console.log(a + b);
    };
    fn1.call(obj, 1, 2); 
    

• 普通函数和立即执行函数区别？
  • 立即函数没有声明，在一次执行过后释放，适合做初始化工作。

你的点赞是我持续输出的动力 希望能帮助到大家 互相学习 有任何问题下面留言 一定回复