JavaScript函数特性深度解析

# JavaScript 函数特性深度解析 ## 1. 构造函数中 `this` 的检查与 `new.target` 元属性 在 JavaScript 中，我们常常需要判断一个函数是否是通过 `new` 关键字调用的。传统的做法是检查 `this` 是否是构造函数的实例，示例代码如下： ```javascript function Person(name) { if (this instanceof Person) { this.name = name; } else { throw new Error("You must use new with Person.") } } var person = new Person("Nicholas"); var notAPerson = Person.call(person, "Michael"); // works! ``` 在上述代码中，`Person.call(person, "Michael")` 调用时，`this` 被设置为 `person`，函数无法区分是通过 `new` 调用还是通过 `call` 或 `apply` 调用。 为了解决这个问题，ES6 引入了 `new.target` 元属性。当函数的 `[[Construct]]` 方法被调用时，`new.target` 会被填充为 `new` 操作符的目标，通常是新创建对象实例的构造函数；如果执行的是 `[[Call]]`，`new.target` 则为 `undefined`。示例代码如下： ```javascript function Person(name) { if (typeof new.target !== "undefined") { this.name = name; } else { throw new Error("You must use new with Person.") } } var person = new Person("Nicholas"); var notAPerson = Person.call(person, "Michael"); // error! ``` 通过使用 `new.target`，构造函数在未使用 `new` 调用时能正确抛出错误。 我们还可以检查 `new.target` 是否是特定的构造函数，示例如下： ```javascript function Person(name) { if (typeof new.target === Person) { this.name = name; } else { throw new Error("You must use new with Person.") } } function AnotherPerson(name) { Person.call(this, name); } var person = new Person("Nicholas"); var anotherPerson = new AnotherPerson("Nicholas"); // error! ``` 需要注意的是，在函数外部使用 `new.target` 会导致语法错误。 ## 2. 块级函数 ### 2.1 ES3 及更早版本 在 ES3 及更早版本中，在块内声明函数（块级函数）从技术上讲是语法错误，但所有浏览器仍然支持。不过，不同浏览器对这种语法的处理方式略有不同，因此最佳实践是避免在块内声明函数，最好使用函数表达式。 ### 2.2 ES5 严格模式 ES5 严格模式引入了错误机制，当在块内使用函数声明时会抛出语法错误，示例代码如下： ```javascript "use strict"; if (true) { // throws a syntax error in ES5, not so in ES6 function doSomething() { // empty } } ``` ### 2.3 ES6 严格模式 在 ES6 中，块级函数被视为块级声明，可以在定义它的块内访问和调用。示例代码如下： ```javascript "use strict"; if (true) { console.log(typeof doSomething); // "function" function doSomething() { // empty } doSomething(); } console.log(typeof doSomething); // "undefined" ``` 块级函数会被提升到定义它的块的顶部，因此即使 `typeof doSomething` 出现在函数声明之前，也会返回 `"function"`。当块执行完毕后，块级函数就不再存在。 ### 2.4 块级函数与 `let` 函数表达式的区别 块级函数和 `let` 函数表达式类似，当执行流程离开定义它们的块时，函数定义会被移除。关键区别在于块级函数会被提升到包含它的块的顶部，而使用 `let` 的函数表达式不会被提升，示例代码如下： ```javascript "use strict"; if (true) { console.log(typeof doSomething); // throws an error let doSomething = function () { // empty } doSomething(); } console.log(typeof doSomething); ``` 在上述代码中，执行 `typeof doSomething` 时会抛出错误，因为 `let` 语句尚未执行，`doSomething` 处于暂时性死区（TDZ）。我们可以根据是否需要提升行为来选择使用块级函数还是 `let` 表达式。 ### 2.5 ES6 非严格模式 ES6 在非严格模式下也允许使用块级函数，但行为略有不同。这些声明不会被提升到块的顶部，而是会被提升到包含它的函数或全局环境中。示例代码如下： ```javascript // ECMAScript 6 behavior if (true) { console.log(typeof doSomething); // "function" function doSomething() { // empty } doSomething(); } console.log(typeof doSomething); // "function" ``` 在这个例子中，`doSomething()` 被提升到全局作用域，因此在 `if` 块外部仍然存在。ES6 对这种行为进行了标准化，消除了之前不同浏览器之间的不兼容问题。 ## 3. 箭头函数 ### 3.1 箭头函数的特点 箭头函数是 ES6 中一个有趣的新特性，它使用箭头 `=>` 定义，与传统 JavaScript 函数在很多重要方面表现不同： - **无 `this`、`super`、`arguments` 和 `new.target` 绑定**：函数内部的 `this`、`super`、`arguments` 和 `new.target` 的值由最近的非箭头函数决定。 - **不能使用 `new` 调用**：箭头函数没有 `[[Construct]]` 方法，因此不能用作构造函数，使用 `new` 调用会抛出错误。 - **无原型**：由于不能使用 `new`，箭头函数不需要原型，其 `prototype` 属性不存在。 - **不能改变 `this` 值**：函数内部的 `this` 值在整个生命周期内保持不变。 - **无 `arguments` 对象**：箭头函数没有 `arguments` 绑定，必须依靠命名参数和剩余参数来访问函数参数。 - **无重复命名参数**：无论在严格模式还是非严格模式下，箭头函数都不能有重复的命名参数，而非箭头函数只有在严格模式下才不允许有重复命名参数