JavaScript之new与箭头函数

引言

众所周知箭头函数不可以使用new实例化的,这是因为因为箭头函数没有prototype也没有自己的this指向并且不可以使用arguments。

new运算符是什么

new运算符会创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一

new运算符示例

function objectFactory(){
    var obj = new Object();
    Constructor = [].shift.call(arguments);
    obj.__proto__= Constructor.prototype;
    var ret = Constructor.apply(obj,arguments);
    return typeof ret === 'object' ? ret : obj;
};
function Otaku (name,age){
    this.name = name;
    this.age = age;
    this.habit = 'Games';
}
Otaku.prototype.strength = 60;
Otaku.prototype.sayYourName = function(){
    console.log('I am' + this.name);
}
var person = objectFactory(Otaku, 'Kevin', '10');
console.log(person.name);
console.log(person.habit);
console.log(person.strength);
console.log(person.age);
console.log(person.sayYourName())
new运算符示例.png

new运算符操作过程

如上所述new操作实质上是定义一个具有构造函数内置对象的实例。其运行过程如下:
1.创建一个javascript空对象 {};
2.将要实例化对象的原形链指向该对象原形。
3.绑定该对象为this的指向
4.返回该对象。

箭头函数是什么

箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。(MDN)
因为箭头函数没有function关键字所以

箭头函数语法

(param1, param2, …, paramN) => { statements } 
(param1, param2, …, paramN) => expression
//相当于:(param1, param2, …, paramN) =>{ return expression; }

// 当只有一个参数时,圆括号是可选的:
(singleParam) => { statements }
singleParam => { statements }

// 没有参数的函数应该写成一对圆括号。
() => { statements }

箭头函数和普通函数的区别

1.箭头函数没有单独的this

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。(MDN)

代码示例

var obj = {
  a: 10,
  b: function(){
    console.log(this.a); //10
  },
  c: function() {
     return ()=>{
           console.log(this.a); //10
     }
  }
}
obj.b(); 
obj.c()();
箭头函数this指向.png

2.通过 call 或 apply 调用

由于 箭头函数没有自己的this指针,通过 call() 或 apply() 方法调用一个函数时,只能传递参数(不能绑定this---译者注),他们的第一个参数会被忽略。(这种现象对于bind方法同样成立---译者注)(MDN)

代码示例

var adder = {
  base : 1,
    
  add : function(a) {
    var f = v => v + this.base;
    return f(a);
  },

  addThruCall: function(a) {
    var f = v => v + this.base;
    var b = {
      base : 2
    };
            
    return f.call(b, a);
  }
};

console.log(adder.add(1));         // 输出 2
console.log(adder.addThruCall(1)); // 仍然输出 2

3.不绑定arguments

箭头函数无法使用arguments,而普通函数可以使用arguments。如果要使用类似于arguments获取参数,可以使用rest参数代替。

代码示例

let fun = (a, s) => { console.log(arguments) }; 
console.dir(fun); // --- >没有prototype 没有自己的this指向 不可以使用arguments 不可以new
// fun(1,2) // Uncaught ReferenceError: arguments is not defined

let func = function(a, s) { console.log(arguments) }; 
console.dir(func);
func(1,2) // Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]

let funa = (...arg) => { console.log(...arg) }; 
funa(1,2)  // 1 2
 
let funca = function(a, s) { console.log(arguments) }; 
funca(1,2) // Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]
箭头函数没有arguments.png

4.箭头函数不能作为构造器,和new一起使用会抛出错误

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

##5.箭头函数没有prototype属性
>```
var Foo = () => {};
console.log(Foo.prototype); // undefined

6.箭头函数不能当做Generator函数,不能使用yield关键字

参考资料

https://blog.csdn.net/qq_40146880/article/details/99940648

MDN

你可能感兴趣的:(JavaScript之new与箭头函数)