From a1e36435f5b4d9fef0ddb13f515080114c5e3d30 Mon Sep 17 00:00:00 2001 From: A1lo Date: Fri, 11 Oct 2024 18:01:10 +0800 Subject: [PATCH] zh-cn: sync the translation of `new.target` (#23951) Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- .../reference/operators/new.target/index.md | 122 +++++++++++++++--- 1 file changed, 101 insertions(+), 21 deletions(-) diff --git a/files/zh-cn/web/javascript/reference/operators/new.target/index.md b/files/zh-cn/web/javascript/reference/operators/new.target/index.md index b62a29879a2630..6ac81f8d55a1ba 100644 --- a/files/zh-cn/web/javascript/reference/operators/new.target/index.md +++ b/files/zh-cn/web/javascript/reference/operators/new.target/index.md @@ -1,9 +1,15 @@ --- title: new.target slug: Web/JavaScript/Reference/Operators/new.target +l10n: + sourceCommit: 8cb0caef8175e1772f13ef7bc761f9616e2c5a4b --- -{{JSSidebar("Operators")}} **`new.target`** 属性允许你检测函数或构造方法是否是通过[new](/zh-CN/docs/Web/JavaScript/Reference/Operators/new)运算符被调用的。在通过[new](/zh-CN/docs/Web/JavaScript/Reference/Operators/new)运算符被初始化的函数或构造方法中，`new.target`返回一个指向构造方法或函数的引用。在普通的函数调用中，`new.target` 的值是{{jsxref("undefined")}}。 +{{jsSidebar("Operators")}} + +**`new.target`** 元属性允许你检测函数或构造函数是否是通过 [`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new) 运算符被调用的。在通过 [`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new) 运算符执行的函数或构造函数中，`new.target` 返回一个指向 `new` 调用的构造函数或函数的引用。在普通的函数调用中，`new.target` 的值是 {{jsxref("undefined")}}。 + +{{EmbedInteractiveExample("pages/js/expressions-newtarget.html")}} ## 语法 @@ -11,6 +17,16 @@ slug: Web/JavaScript/Reference/Operators/new.target new.target ``` +### 值 + +`new.target` 保证是一个可构造的函数值或 `undefined`。 + +- 在类构造函数中，它指向 `new` 调用的类，这可能是当前构造函数的子类，因为子类通过 [`super()`](/zh-CN/docs/Web/JavaScript/Reference/Operators/super) 传递调用了父类的构造函数。 +- 在普通函数中，如果函数是直接通过 [`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new) 构造的，则 `new.target` 指向函数本身。如果函数不是通过 `new` 调用的，则 `new.target` 是 {{jsxref("undefined")}}。函数可以被用作 [`extends`](/zh-CN/docs/Web/JavaScript/Reference/Classes/extends) 的基类，这种情况下 `new.target` 可能指向子类。 +- 如果构造函数（类或者函数）是通过 [`Reflect.construct()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect/construct) 调用的，那么 `new.target` 指向作为 `newTarget` 传递的值（默认为 `target`）。 +- 在[箭头函数](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions)中，`new.target` 是从周围的作用域继承的。如果箭头函数不是在另一个具有 `new.target` {{Glossary("binding", "绑定")}}的类或函数中定义的，则会抛出语法错误。 +- 在[静态初始化块](/zh-CN/docs/Web/JavaScript/Reference/Classes/Static_initialization_blocks)中，`new.target` 是 {{jsxref("undefined")}}。 + ## 描述 `new.target` 语法由关键字 `new`、点和标识符 `target` 组成。由于 `new` 是[保留字](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#保留字)而非标识符；其并不是[属性访问器](/zh-CN/docs/Web/JavaScript/Reference/Operators/Property_accessors)，而是一种特殊的表达式语法。 @@ -21,21 +37,23 @@ new.target ### 函数调用中的 new\.target -在普通的函数调用中（和作为构造函数来调用相对），`new.target`的值是{{jsxref("undefined")}}。这使得你可以检测一个函数是否是作为构造函数通过[new](/zh-CN/docs/Web/JavaScript/Reference/Operators/new)被调用的。 +在普通的函数调用中（和构造函数调用相对），`new.target` 的值是 {{jsxref("undefined")}}。这使得你可以检测一个函数是否是作为构造函数通过 [`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new) 被调用的。 ```js function Foo() { - if (!new.target) throw "Foo() must be called with new"; - console.log("Foo instantiated with new"); + if (!new.target) { + throw new Error("必须通过 new 来调用 Foo()"); + } + console.log("Foo 是通过 new 进行初始化的"); } -Foo(); // throws "Foo() must be called with new" -new Foo(); // logs "Foo instantiated with new" +new Foo(); // 记录“Foo 是通过 new 进行初始化的” +Foo(); // 抛出“必须通过 new 来调用 Foo()” ``` -### 构造方法中的 new\.target +### 构造函数中的 new\.target -在类的构造方法中，`new.target`指向直接被`new`执行的构造函数。并且当一个父类构造方法在子类构造方法中被调用时，情况与之相同。 +在类的构造函数中，`new.target` 指向直接被 `new` 执行的构造函数。如果构造函数位于父类中，并且是由子类的构造函数委托的，情况也是如此。`new.target` 指向被 `new` 所调用的类。例如，当通过 `new B()` 初始化 `b` 时，打印出了 `B` 的名称；类似地，对于 `a`，打印出了类 `A` 的名称。 ```js class A { @@ -50,25 +68,87 @@ class B extends A { } } -var a = new A(); // logs "A" -var b = new B(); // logs "B" +const a = new A(); // 记录“A” +const b = new B(); // 记录“B” +``` -class C { - constructor() { - console.log(new.target); - } +### 使用 Reflect.construct() 的 new\.target + +在 {{jsxref("Reflect.construct()")}} 和类出现之前，通常通过传递 [`this`](/zh-CN/docs/Web/JavaScript/Reference/Operators/this) 的值，并让基类构造函数对其进行更改来实现继承。 + +```js example-bad +function Base() { + this.name = "基类"; } -class D extends C { - constructor() { - super(); - } + +function Extended() { + // 让 Base() 构造函数可在现有的 `this` 值上工作， + // 而不是在 `new` 创建的新对象上工作的唯一方法。 + Base.call(this); + this.otherProperty = "子类"; } -var c = new C(); // logs class C{constructor(){console.log(new.target);}} -var d = new D(); // logs class D extends C{constructor(){super();}} +Object.setPrototypeOf(Extended.prototype, Base.prototype); +Object.setPrototypeOf(Extended, Base); + +console.log(new Extended()); // Extended { name: '基类', otherProperty: '子类' } ``` -从上面类 C 和 D 的例子可以看出来，new\.target 指向的是初始化类的类定义。比如当 D 通过 new 初始化的时候，打印出了 D 的类定义，C 的例子与之类似，打印出的是 C 的类定义。 +然而，{{jsxref("Function/call", "call()")}} 和 {{jsxref("Function/apply", "apply()")}} 实际上是对函数进行*调用*而非*构造*，所以 `new.target` 的值是 `undefined`。这意味着如果 `Base()` 检查它是否是通过 `new` 构造的，将会抛出错误（或者可能表现出其他意外的行为）。例如，你不能通过这种方式扩展 [`Map`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map/Map)，因为 `Map()` 构造函数不能在不使用 `new` 的情况下调用。 + +所有内置构造函数都通过读取 `new.target.prototype` 直接构造新实例的整个原型链。因此，为了确保（1）`Base` 是通过 `new` 构造的，以及（2）`new.target` 指向子类而不是 `Base` 本身，我们需要使用 {{jsxref("Reflect.construct()")}}。 + +```js +function BetterMap(entries) { + // 调用基类构造函数，但将 `new.target` 设置为子类， + // 因此创建的实例具有正确的原型链。 + return Reflect.construct(Map, [entries], BetterMap); +} + +BetterMap.prototype.upsert = function (key, actions) { + if (this.has(key)) { + this.set(key, actions.update(this.get(key))); + } else { + this.set(key, actions.insert()); + } +}; + +Object.setPrototypeOf(BetterMap.prototype, Map.prototype); +Object.setPrototypeOf(BetterMap, Map); + +const map = new BetterMap([["a", 1]]); +map.upsert("a", { + update: (value) => value + 1, + insert: () => 1, +}); +console.log(map.get("a")); // 2 +``` + +> [!NOTE] +> 实际上，由于缺少 `Reflect.construct()`，在转译为 ES6 以前的代码时，无法正确地对内置对象进行子类化（例如 [`Error` 子类化](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Error#自定义错误类型)）。 + +但是，如果你正在编写 ES6 代码，最好使用类和 `extends`，因为它更易读且更少出错。 + +```js +class BetterMap extends Map { + // 构造函数被省略，因为它只是默认的 + + upsert(key, actions) { + if (this.has(key)) { + this.set(key, actions.update(this.get(key))); + } else { + this.set(key, actions.insert()); + } + } +} + +const map = new BetterMap([["a", 1]]); +map.upsert("a", { + update: (value) => value + 1, + insert: () => 1, +}); +console.log(map.get("a")); // 2 +``` ## 规范