箭头函数和普通函数的区别、作用域

156 阅读2分钟

箭头函数是匿名函数,不能作为构造函数,不能使用new

箭头函数不绑定arguments,应使用...扩展运算符解决

箭头函数不绑定this,会捕获其上下文(所在的函数作用域)的this值,作为自己的this

var obj = {
  a: 10,
  b: () => {
    console.log(this.a); // undefined
    console.log(this); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
  },
  c: function() {
    console.log(this.a); // 10
    console.log(this); // {a: 10, b: ƒ, c: ƒ}
  },
  d: function(){
    console.log(this.a); //10
  },
  e: function() {
     return ()=>{
           console.log(this.a); //10
     }
  }
}
obj.b(); obj.c();obj.d(); obj.e();

箭头函数通过call()apply()方法调用一个函数时,只传入了一个对象,对this并没有影响

let obj2 = {
    a: 10,
    b: function(n) {
        let f = (n) => n + this.a;
        return f(n);
    },
    c: function(n) {
        let f = (n) => n + this.a;
        let m = {
            a: 20
        };
        return f.call(m,n);
    }
};
console.log(obj2.b(1));  // 11
console.log(obj2.c(1)); // 11

箭头函数没有原型属性,不能当做Generator函数,不能使用yield关键字

函数的作用域是什么?js的作用域有几种?

什么是作用域?

作用域是在运行时代码中的某些特定部分中变量,函数和对象的可访问性。即:作用域决定了代码区块中变量和其他资源的可见性。
作用域是一个独立的地盘,让变量不会外泄,暴露出去。即:作用域最大的用处是隔离变量,不同作用域下同名变量不会有冲突。
es6之前js没有块级作用域(使用let和const生成块级作用域),只有全局作用域和函数作用域。

全局作用域和函数作用域

全局作用域:在代码中任何地方都能访问到的对象拥有全局作用域,包括集中情形: - 最外层函数和在外层函数外面定义的最外层变量拥有全局作用域

  • 所有未定义直接赋值的变量自动声明为拥有全局作用域(直接绑定到window下)
  • 所有window对象的属性拥有全局作用域
    函数作用域:(局部作用域)
    指声明在函数内部的变量,只在固定的代码片段内可访问到。

注意:
块语句:花括号中间的语句,if和switch条件语句和for和while循环语句,不像函数,不会创建新的作用域,在块语句中定义的变量将保留在他们已经存在吃的作用域中

块级作用域

可以通过let和const声明,所声明的指定块的作用域外无法被访问