箭头函数为什么不能当做构造函数

定义：

构造函数：

专门用来生成实例对象的函数（本质还是一个函数）

箭头函数：

ES6的一种新语法，允许使用 “=>” 定义函数

例如：

let func = (a,b) =>{return a + b;
}
func(1,2);
可简写为
let func = (a,b) => a + b;

那么，普通函数和箭头函数有什么区别呢

最大的区别在于this的指向问题（严格来说，其实箭头函数没有自己的this）

一、

1、普通函数的this，是谁调用这个函数，这个函数的this就指向谁
2、箭头函数没有this，this始终沿着作用域链向上找（定义时决定，而不是执行时决定）

二、

箭头函数没有绑定arguments对象，可以使用rest代替

function A(a) {console.log(arguments);// [1, 2, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]}
A(1, 2, 3, 4, 5);let B = (b) => {console.log(arguments);// Uncaught ReferenceError: arguments is not defined
}
B(1, 2, 3, 4, 5);let C = (...c) => {console.log(c);// [1, 2, 3, 4, 5]}
C(1, 2, 3, 4, 5);

三、

不能执行yield语句，不能作为generator函数

四、

箭头函数没有原型

var a = ()=>{return 1;
}
function b(){return 2;
}
console.log(a.prototype);  // undefined
console.log(b.prototype);   // {constructor: ƒ}

五、

箭头函数不能通过call()或apply改变this指向

var obj1 = {w:10}
var w = 69;
let f = ()=>{console.log(this.w)}
f();
f.call(obj1);

解释——箭头函数为什么不能当做构造函数：

一句话解释：

因为箭头函数没有 [ [Construct] ] 方法
和ES6的类的概念有点像，如果一个类没有定义constructor，直接new也会报错

进一步解释：

没有caller，就无法确定上下文
没有arguments
没有prototype

下面模拟一下new的过程：

function myNew(fn, ...args) {// 创建一个空对象const obj = {};// 将该对象的 __proto__ 属性链接到构造函数原型对象// 缺少fn.prototypeobj.__proto__ = fn.prototype;// 将该对象作为 this 上下文调用构造函数并接收返回值// 没有自己的this// call()函数无法改变箭头函数的指向const res = fn.apply(obj, args);// 如果返回值存在并且是引用数据类型，返回构造函数返回值，否则返回创建的对象return typeof res === "object" ? res : obj;
}

可见缺少三个中的一个都不行，而刚好箭头函数都没有

箭头函数为什么不能当做构造函数相关推荐

ES6精解：箭头函数
基本用法在ES6中允许使用 => 来定义函数,如下: var f = a => a;console.log(f(1)); //1 就等同于 var f = function(a){ret ...
java 箭头函数_箭头函数丶Java教程网-IT开发者们的技术天堂
基本用法在ES6中允许使用 => 来定义函数,如下: var f = a => a; console.log(f(1)); //1 就等同于 var f = function(a){ r ...
箭头函数和普通函数有什么区别？
箭头函数和普通函数有什么区别? 1:写法不一样 2:普通函数存在变量提升的现象 3:箭头函数不能作为构造函数使用 4:两者this的指向不同 5:箭头函数的arguments指向它的父级函数所在作用域 ...
箭头函数，匿名函数，为什么用？怎么用？有什么不一样？使用场景是什么？
箭头函数的使用和一些特性 JS中的箭头函数用=>来标识.箭头函数有两个主要的优点: 更简短的函数: 更直观的作用域和this的绑定(不绑定this) 因为这些优点,箭头函数比起其他形式的函数声明 ...
js map 箭头_JS异常函数之箭头函数
来源:logrocket作者:Maciej Cieślar 译者:前端小智为了保证的可读性,本文采用意译而非直译. 在JS中,箭头函数可以像普通函数一样以多种方式使用.但是,它们一般用于需要匿名函数 ...
js map 箭头_JS异常函数之-箭头函数
来源:logrocket 作者:Maciej Cieślar 译者:前端小智为了保证的可读性,本文采用意译而非直译. 在JS中,箭头函数可以像普通函数一样以多种方式使用.但是,它们一般用于需要匿名函 ...
ES5-拓展箭头函数的this、this的优先级
让内部函数的this指向和父函数的this,可以显示改变this指向,也可以使用箭头函数箭头代替了function关键字箭头函数内部没有this指向,箭头函数的this是稳定引用父作用域的.因为它 ...
深入理解this机制系列第三篇——箭头函数
前面的话 this机制与函数调用有关,而作用域则与函数定义有关.有没有什么是可以将this机制和作用域联系起来的呢?本文将介绍ES6新增的内容--箭头函数痛点对于闭包的痛点在于,闭包的this默认 ...
箭头函数：this的指向问题
关于typescript中函数的定义,有提到过它的定义方式(详见:函数的定义及特性),当时提到typescript中的'=>'不是ES6中的箭头函数的意思.什么是ES6的箭头函数?代码如下: v ...

箭头函数为什么不能当做构造函数

箭头函数为什么不能当做构造函数

定义：

那么，普通函数和箭头函数有什么区别呢

解释——箭头函数为什么不能当做构造函数：

箭头函数为什么不能当做构造函数相关推荐

最新文章

热门文章