The Only Widely Recognized JavaScript Feature Ever Deprecated

[innocces]

The original blog info

subject	content
title	The Only Widely Recognized JavaScript Feature Ever Deprecated
url	blog url
author	Trevor Lasn

[innocces]

The Only Widely Recognized JavaScript Feature Ever Deprecated

The 'with' statement is the only feature ever deprecated in JavaScript

Deprecating features in JavaScript is rare. Only one feature in the language’s history has been officially deprecated: ‘with’ statements.

The ‘with’ statement was introduced early in JavaScript’s history. Its purpose was to simplify working with objects by providing a shortcut to access object properties.

const car = {
  make: 'Toyota',
  model: 'Corolla',
  year: 2020
};

with (car) {
  console.log(make);   // Toyota
  console.log(model);  // Corolla
  console.log(year);   // 2020
}

The ‘with’ statement allows you to access the properties of the car object directly, without needing to type car.make, car.model, and car.year.

Why Was with Deprecated?

The main issue was ambiguity. Because the with statement modifies the scope, it became difficult for both developers and JavaScript engines to know which variables or properties were being referred to.

What will this code print?

const car = {
  make: 'Toyota'
};

function showMake() {
  const make = 'Honda';
  with (car) {
    console.log(make);
  }
}

showMake();

Will it print ‘Toyota’ from the car object, or ‘Honda’ from the showMake function’s scope? The ambiguity here is the problem. It could easily lead to bugs that are hard to track down.

The answer: ‘Toyota’

The with statement extends the scope chain, so when with (car) is used, it effectively puts the properties of the car object into the scope.

In the showMake function, when console.log(make) is called inside the with (car) block, JavaScript first looks for make within the car object. Since car has a make property with the value ‘Toyota’, it finds this first and prints ‘Toyota’.

If the car object did not have a make property, JavaScript would then look for make in the surrounding scope, where it would find the ‘Honda’ value. But in this case, because car has a make property, ‘Toyota’ is printed.

Where We Stand Today (2024)

The with statement is still part of JavaScript today, but it’s considered bad practice. It can cause confusing and unpredictable behavior.

This happens because it changes the scope chain, making it hard to tell which variables are being used. This ambiguity can lead to bugs that are tough to find.

For these reasons, it’s best to avoid using with in your code.

How to Avoid Using with

Instead of using with, you should reference object properties directly. If you’re trying to shorten the syntax, consider using destructuring:

const car = {
  make: 'Toyota',
  model: 'Corolla',
  year: 2020
};

// Destructuring assignment
const { make, model, year } = car;

console.log(make);   // Toyota
console.log(model);  // Corolla
console.log(year);   // 2020

This code achieves a similar effect to the ‘with’ statement but without the pitfalls. Destructuring is clear, unambiguous, and widely supported in JavaScript.

The ‘with’ statement is often cited as the only feature ever deprecated in JavaScript, but that’s not entirely true.

While it’s one of the most prominent and well-known deprecated features, it’s not alone. Other features, such as arguments.callee in strict mode and certain uses of eval(), have also faced deprecation or strong discouragement.

[innocces]

唯一被广泛认可的 JavaScript 功能已被弃用

“with”语句是 JavaScript 中唯一被弃用的功能

弃用 JavaScript 中的功能的情况很少见。该语言历史上只有一个功能已被正式弃用：‘with’ 语句。

‘with’ 语句在 JavaScript 历史的早期就被引入了。其目的是通过提供访问对象属性的快捷方式来简化对象的使用。

const car = {
  make: 'Toyota',
  model: 'Corolla',
  year: 2020
};

with (car) {
  console.log(make);   // Toyota
  console.log(model);  // Corolla
  console.log(year);   // 2020
}

‘with’ 语句允许您直接访问汽车对象的属性，而无需键入 car.make、car.model 和 car.year。

为什么 with 被弃用？

主要问题是含糊不清。由于 with 语句修改了范围，因此开发人员和 JavaScript 引擎都很难知道正在引用哪些变量或属性。

######这段代码会打印什么？

const car = {
  make: 'Toyota'
};

function showMake() {
  const make = 'Honda';
  with (car) {
    console.log(make);
  }
}

showMake();

它会从汽车对象打印“Toyota”，还是从 showMake 函数的范围打印“Honda”？这里的歧义就是问题所在。它很容易导致难以追踪的错误。

答案：“丰田”

with 语句扩展了作用域链，因此当使用 with (car) 时，它有效地将 car 对象的属性放入作用域中。

在 showMake 函数中，当在 with (car) 块内调用 console.log(make) 时，JavaScript 首先在 car 对象内查找 make。由于 car 有一个值为“Toyota”的 make 属性，因此它首先找到它并打印“Toyota”。

如果 car 对象没有 make 属性，JavaScript 将在周围范围内查找 make，并在其中找到“Honda”值。但在本例中，由于 car 有 make 属性，因此会打印“Toyota”。

我们今天的处境 (2024)

with 语句今天仍然是 JavaScript 的一部分，但它被认为是不好的做法。它可能会导致令人困惑和不可预测的行为。

发生这种情况是因为它改变了作用域链，使得很难判断正在使用哪些变量。这种模糊性可能会导致难以发现的错误。

由于这些原因，最好避免在代码中使用 with。

如何避免使用 with

您应该直接引用对象属性，而不是使用 with。如果您想缩短语法，请考虑使用解构：

const car = {
  make: 'Toyota',
  model: 'Corolla',
  year: 2020
};

// Destructuring assignment
const { make, model, year } = car;

console.log(make);   // Toyota
console.log(model);  // Corolla
console.log(year);   // 2020

此代码实现了与 ‘with’ 语句类似的效果，但没有缺陷。解构在 JavaScript 中是清晰、明确且广泛支持的。

‘with’ 语句经常被认为是 JavaScript 中唯一被弃用的功能，但这并不完全正确。

虽然它是最突出和最知名的已弃用功能之一，但它并不孤单。其他功能，例如严格模式下的 arguments.callee 和 eval() 的某些使用，也面临着弃用或强烈反对。