辉太郎看前端(构造函数与箭头函数的区别)

前言

1. 是否能够使用new关键字
2. 是否存在内置对象arguments
3. 两者this指向不同
4. 是否能够通过call()，apply()或bind()方法改变this指向。
5. 是否存在原型。

是否能够使用new关键字

• 构造函数能够使用new关键字定义函数
• 箭头函数是匿名函数，不能使用new关键字定义函数

是否存在内置对象arguments

• 构造函数中存在内置对象arguments，展示上类似于数组。
• 箭头函数中不存在arguments，可以用...变量名代替。

this的指向

• 构造函数中的this谁调用就指向谁。
• 箭头函数中的this始终指向父级的上下文(取决于定义的位置，和使用的位置没有多大关系)

var a=20;
 let obj2 = {
         a: 10,
         b: function (n) {
             let f = (n) => n + this.a; //谁调用就指向谁
             return f(n);
         },
         c: (n)=> {
            return n+this.a;  //this指向父级的上下文
         }
     };
     console.log(obj2.b(1));  // 11
     console.log(obj2.c(1));  //21 

是否通过call(),apply()和bind()改变this指向

• 构造函数 可以改变this指向
• 箭头函数 不能改变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); 
            //f函数为箭头函数无法改变this指向
        }
    };
    console.log(obj2.b(1));  // 11
    console.log(obj2.c(1));  // 11

是否拥有原型

• 构造函数拥有原型。
• 箭头函数没有原型对象。

总结

初出茅庐，多多指教。