7 个有趣的已弃用 JavaScript 功能
自 26 年前在 Netscape 诞生以来，JavaScript 已经取得了长足的发展。最初它仅用于与 Java 小程序交互和进行简单的 DOM 操作，如今已广泛应用于后端开发以及桌面和移动应用程序的编写。其生态系统和社区也得到了极大的发展。与其他任何语言一样，JavaScript 过去（现在仍然）存在一些缺陷和怪癖。由于向后兼容性，我们不得不接受其中一些缺陷。而另一些缺陷，令人遗憾地，已经基本或完全消失。虽然其中一些缺陷仍然可以使用，但我们强烈不建议这样做。
Object.prototype.watch和Object.prototype.unwatch方法
从前有一种简单的方法可以观察物体的属性变化。
var cat = {};
cat.watch("name", function (propertyName, previousValue, newValue) {
return "Mr. " + newValue;
});
cat.name = "Oswald";
console.log("Hello " + cat.name + "!"); // Hello Mr. Oswald!
cat.unwatch("name");
cat.name = "Luna";
console.log("Hello " + cat.name + "!"); // Hello Luna!
选择
如今你可以用它Proxy来达到这个目的。
const handler = {
set: (obj, prop, value) => {
if (prop === 'name') {
obj[prop] = `Mr. ${value}`;
}
}
};
let cat = new Proxy({}, handler);
cat.name = "Oswald";
console.log("Hello " + cat.name + "!"); // Hello Mr. Oswald!
cat = { ...cat }; // this will remove behavior imposed by Proxy
cat.name = "Luna";
console.log("Hello " + cat.name + "!"); // Hello Luna!
with陈述
我们都知道处理冗长的房产链有多么麻烦。幸运的是，有办法解决这个问题。不幸的是——你不应该使用它。
const cat = {
details: {
passport: {
location: {
city: 'New York'
}
}
}
};
with (cat.details.passport.location) {
city = 'Meowyork';
}
你不应该使用语句的原因有两个with。
- 其中没有优化的空间，因为你无法预测变量是指向属性还是外部变量。
- 它违反了词法范围，使得程序分析变得非常困难甚至不可行。
此外，在 ES6 及更高版本（或启用严格模式的 ES5）中，您将无法使用它。严格模式禁止使用它。
选择
最好的办法是声明一个变量来保存属性链。
const cat = {
details: {
passport: {
location: {
city: 'New York'
}
}
}
};
const catLocation = cat.details.passport.location;
catLocation.city = 'Meowyork';
表达式闭包
早在箭头函数被提上日程之前，就已经有了表达式闭包。它们允许你完全省略方法定义中的花括号和返回语句。
var cat = function() "Luna";
var favorites = {
food: function() "Tuna"
};
选择
已移除此功能，转而使用标准 ES 语法。
var cat = function() { return "Luna"; }
var favorites = {
food: function() { return "Tuna"; }
};
现在你也可以使用箭头函数和方法定义（两者都是在 ES6 中引入的）。
const cat = () => "Luna";
const favorites = {
get food() { return "Tuna"; }
};
Object.observe和Object.unobserve方法
以前还有一种很容易就能获取物体任何变化信息的方法。
var cat = {
name: "Oswald"
};
Object.observe(cat, function(changes) {
console.log(changes);
});
cat.name = "Luna";
// [{ name: 'name', object: <obj>, type: 'update', oldValue: 'Oswald' }]
Object.unobserve(cat);
cat.name = "Max";
数组也有类似的方法——Array.observe和Array.unobserve。
选择
你也可以这样做Proxy。
const cat = new Proxy({ name: "Oswald" }, {
get: (target, prop) => {
console.log({ type: "get", target, prop });
return Reflect.get(target, prop);
},
set: (target, prop, value) => {
console.log({ type: "set", target, prop, value });
return Reflect.set(target, prop, value);
}
});
cat.name = "Luna";
// { type: 'set', target: <obj>, prop: 'name', value: 'Luna' }
cat.name;
// { type: 'get', target: <obj>, prop: 'name' }
let表达式和let块
ES6 引入了两个用于声明块级作用域变量的语句：`let`let和 ` constlet`。在一段时间内，`let` 语句还存在一些非标准的扩展，例如let表达式和let代码块。
let代码块提供了一种实例化代码块的方法，其中变量可以具有不同的值，而不会影响该代码块之外的同名变量。
var catName = "Oswald";
var catAge = 2.5;
let (catName = "Luna", catAge = 2) {
console.log(catName + "(" + catAge + " years old)"); // Luna (2 years old)
}
console.log(catName + "(" + catAge + " years old)"); // Oswald (2.5 years old)
let表达式也做了类似的事情，但它是在表达式层面上进行的。
var catName = "Oswald";
let(catName = "Luna") console.log(catName); // Oswald
console.log(catName); // Luna
选择
由于let它是块级作用域，你可以在内部作用域中再次声明变量并在那里修改它们。
let catName = "Oswald";
let catAge = 2.5;
{
let catName = "Luna", catAge = 2;
console.log(catName + "(" + catAge + " years old)"); // Luna (2 years old)
}
console.log(catName + "(" + catAge + " years old)"); // Oswald (2.5 years old)
字符串的 HTML 包装方法
它们基本上是一系列方法，可以将你的字符串用诸如、、、、、等标签bold包裹起来blink。fontsmallbigi
"Some teeny-tiny text".fontsize(3); // <font size="3">Some teeny-tiny text.</font>
"Some tiny text.".small(); // <small>Some tiny text.</small>
"Some yuuuge text.".big(); // <big>Some yuuge text.</big>
"Talk to the hand!".bold(); // <b>Talk to the hand!</b>
"You have been terminated.".blink(); // <blink>You have been terminated.</blink>
选择
对于这种骇人听闻的东西，没有其他替代方案。
ParallelArray
这是 Mozilla 在 Firefox（具体来说是 Gecko 引擎的 17 版本）中引入的一项实验性功能。它的目的是通过并行执行多个函数来实现数据并行。如果无法并行执行，则会按顺序执行。
var cats = new ParallelArray(["Oswald", "Luna", "Max"]);
cats.map(function(name) {
return "😸 " + cat;
});
选择
今天你可以用它Promise.all来实现这一点。
结论
看到 JavaScript 在过去 26 年里取得如此巨大的进步，真是令人惊叹。谁能想到，这门仅用 10 天时间编写的语言，如今竟能成为业界最主流的语言之一？我认为，回顾过去，了解事物的发展历程，是一件很有意义的事情。这能让我们避免重蹈覆辙，也能让我们更加珍惜今天所拥有的一切。尽管我对 JavaScript 也有一些批评之声，但我仍然非常期待它在未来二十年的发展。
文章来源：https://dev.to/stojakovic99/7-interesting-deprecated-javascript-features-38op