不能使用箭头函数声明构造函数的真正原因!!!

我们都知道,箭头函数的this的指向在函数声明时即已经确定了,所以不能够使用箭头函数来声明构造函数。

let Person;
Person = (name, age) => {
  this.name = name;
  this.age = age;
}
new Person('frx', 20);

运行结果:

报错:Person is not a constructor
有没有思考过为什么会报错呢?真的只是this的指向的问题吗?
疑惑???

        实际上,js里面每个非箭头函数都有两个内部方法,一个是[[call]],另一个是[[construct]],在不是用new进行调用函数时,函数会调用内部的[[call]]方法,而使用new调用时,函数会调用内部的[[construct]]方法。
 
        而对于箭头函数来说,箭头函数是没有[[construct]]的内部方法的,这个才是箭头函数不能作为构造函数的真正原因。

另外,我们还要注意的是,在使用class关键字声明的类中声明的方法同样没有[[construct]]

 class Person {
 	constructor(name, age) {
 	this.name = name;
 	this.age = age;
 	}
	
	sayName() {
		console.log(this.name);
	}
 }
 var person = new Person();
 new person.sayName();
 /*
  *Uncaught TypeError: person.sayName is not a constructor
  */

好了,你get到我说的内容了吗?希望能帮助到你哦o( ̄▽ ̄)ブ!

### 箭头函数嵌套普通函数的语法与规则 在 JavaScript 中,箭头函数确实可以嵌套其他类型的函数,包括普通函数(常规函数声明或函数表达式)。这种嵌套不会影响箭头函数本身的特性,但需要注意的是,箭头函数没有自己的 `this`、`arguments` 和 `prototype` 属性[^2]。因此,在设计嵌套结构时需特别注意这些特性的继承方式。 以下是关于箭头函数嵌套普通函数的一些重要规则: #### 1. **箭头函数内部定义普通函数** 当在一个箭头函数内部定义一个普通的函数时,普通函数的行为不受箭头函数的影响。这是因为普通函数始终有自己的 `this` 上下文,而箭头函数则依赖外部作用域来决定其 `this` 的值[^4]。 ```javascript const arrowFunc = () => { function normalFunc() { console.log("Normal function's this:", this); } normalFunc(); }; arrowFunc(); // 输出取决于调用环境 ``` 在这个例子中,`normalFunc()` 是一个标准的普通函数,它的 `this` 取决于它是如何被调用的。如果是在浏览器环境中直接运行,则默认指向全局对象(即 `window`),而在严格模式下会是 `undefined`。 --- #### 2. **普通函数内部定义箭头函数** 相反地,也可以在普通函数内部定义箭头函数。此时,箭头函数仍然遵循捕获外层作用域 `this` 的原则。 ```javascript function outerFunction() { const innerArrow = () => { console.log("Inner Arrow Function's this:", this); }; innerArrow(); } outerFunction.call({ key: "value" }); // Inner Arrow Function's this: {key: 'value'} ``` 这里的关键在于,尽管 `innerArrow` 被定义在普通函数 `outerFunction` 内部,但它依然从最近的作用域获取 `this` 值。由于 `call` 方法改变了 `outerFunction` 的上下文,所以 `innerArrow` 的 `this` 同样受到影响。 --- #### 3. **嵌套多层函数的情况** 即使有多个层次的嵌套,每种函数都会按照自身的规则处理 `this` 或者参数绑定等问题。例如: ```javascript const topLevelArrow = () => { function firstLevelNormal() { const secondLevelArrow = () => { console.log("Second Level Arrow's this:", this); }; secondLevelArrow(); } firstLevelNormal(); }; topLevelArrow.call({ name: "Test Object" }); // Second Level Arrow's this: {name: "Test Object"} ``` 上述代码展示了三层嵌套关系:最外面是一个箭头函数 (`topLevelArrow`),中间一层是普通函数 (`firstLevelNormal`),最后里面又有一个箭头函数 (`secondLevelArrow`)。最终的结果表明,无论有多少层嵌套,箭头函数总是基于顶层作用域中的 `this` 来工作。 --- #### 4. **注意事项** - 如果尝试将箭头函数作为构造函数使用并与 `new` 运算符配合,将会抛出错误,因为箭头函数无法用于实例化对象。 - 使用箭头函数时应避免混淆其缺乏独立 `this` 的特点,尤其是在复杂的回调场景或者事件处理器中[^1]。 --- ### 示例总结 下面提供了一个综合示例,展示不同情况下各种函数之间的交互效果: ```javascript const example = () => { function nestedRegular() { const deeplyNestedArrow = () => { console.log("Deeply Nested Arrow's this:", this); }; deeplyNestedArrow(); } nestedRegular(); }; example.call({ label: "Example Context" }); // Deeply Nested Arrow's this: {label: "Example Context"} ``` 此片段再次验证了箭头函数对于 `this` 的独特行为及其与其他类型函数共存的可能性。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值