理解JavaScript构造函数（翻译）
原文：https://css-tricks.com/understanding-javascript-constructors/
理解构造函数对于真正理解JavaScript语言至关重要。从技术上讲，JavaScript没有类，但是它用构造函数和原型来为JavaScript带来类似的功能。实际上，在ES2015中引入的类声明只是作为现有的基于原型继承的语法糖，并没有真正为语言添加任何额外的功能。
在本教程中，我们将详细讨论构造函数，并了解JavaScript如何利用它们来创建对象。
创建和使用构造函数
构造函数与常规函数类似，但我们将它们与new关键字一起使用。有两种类型的构造函数:内置的构造函数，如数组和对象，这些构造函数在运行时在执行环境中自动可用;以及自定义构造函数，它为您自己的对象类型定义属性和方法。
当您希望创建具有相同属性和方法的多个类似对象时，构造函数非常有用。将构造函数的名称大写以区别于常规函数是一种惯例。考虑以下代码：
function Book() {
// unfinished code
}
var myBook = new Book();
代码的最后一行创建了Book的一个实例并将其赋值给一个变量。虽然Book构造函数不做任何事情，但myBook仍然是它的一个实例。正如您所看到的，这个函数与常规函数之间没有区别，除了它是用new关键字调用的，而且函数名是大写的。
决定实例的类型
为了查明一个对象是否是另一个对象的实例，我们使用instanceof操作符：
myBook instanceof Book // true
myBook instanceof String // false
注意，如果instanceof操作符的右边不是一个函数，它将抛出一个错误：
myBook instanceof {};
// TypeError: invalid 'instanceof' operand ({})
另一种查找实例类型的方法是使用构造函数属性。考虑以下代码片段：
myBook.constructor === Book; // true
myBook的构造函数属性指向Book，因此严格的相等运算符返回true。JavaScript中的每个对象都从其原型继承一个构造函数属性，该属性指向创建对象的构造函数：
var s = new String("text");
s.constructor === String; // true
"text".constructor === String; // true
var o = new Object();
o.constructor === Object; // true
var o = {};
o.constructor === Object; // true
var a = new Array();
a.constructor === Array; // true
[].constructor === Array; // true
但是请注意，使用constructor属性检查实例的类型通常被认为是不好的做法，因为它可能被覆盖。
自定义构造函数
构造函数就像一个饼干切刀，用来制作具有相同属性和方法的多个对象。考虑以下示例：
function Book(name, year) {
this.name = name;
this.year = '(' + year + ')';
}
Book构造函数需要两个参数:name和year。使用new关键字调用构造函数时，它将接收到的参数分配给当前实例的name和year属性，如下所示：
var firstBook = new Book("Pro AngularJS", 2014);
var secondBook = new Book("Secrets Of The JavaScript Ninja", 2013);
var thirdBook = new Book("JavaScript Patterns", 2010);
console.log(firstBook.name, firstBook.year);
console.log(secondBook.name, secondBook.year);
console.log(thirdBook.name, thirdBook.year);
此代码将以下内容记录到控制台：
image.png
可以看到，通过使用不同的参数调用book构造函数，我们可以快速构建大量不同的book对象。这与JavaScript在其内置构造函数(如Array()和Date()中使用的模式完全相同。
Object.defineProperty() 方法
可以在构造函数中使用Object.defineProperty()方法来帮助执行所有必要的属性设置。考虑以下构造函数：
function Book(name) {
Object.defineProperty(this, "name", {
get: function() {
return "Book: " + name;
},
set: function(newName) {
name = newName;
},
configurable: false
});
}
var myBook = new Book("Single Page Web Applications");
console.log(myBook.name); // Book: Single Page Web Applications
// we cannot delete the name property because "configurable" is set to false
delete myBook.name;
console.log(myBook.name); // Book: Single Page Web Applications
// but we can change the value of the name property
myBook.name = "Testable JavaScript";
console.log(myBook.name); // Book: Testable JavaScript
这段代码使用Object.defineProperty()来定义访问器属性。访问器属性不包括任何属性或方法，但它们定义了在读取属性时要调用的getter和在写入属性时要调用的setter。
getter将返回一个值，而setter将接收赋给属性的值作为参数。上面的构造函数返回一个实例，该实例的name属性可以设置或更改，但不能删除。当我们获得name的值时，getter将字符串Book:添加到名称并返回它。
对象字面量（Object literal）优于构造函数
JavaScript语言有9个内置的构造函数：Object()、Array()、String()、Number()、Boolean()、Date()、Function()、Error()和RegExp()。在创建值时，我们可以自由地使用对象字面量（Object literal）或构造函数。但是，对象字面量不仅更容易读取，而且运行速度更快，因为它们可以在解析时进行优化。因此，对于简单的对象，最好使用对象字面量。
// a number object
// numbers have a toFixed() method
var obj = new Object(5);
obj.toFixed(2); // 5.00
// we can achieve the same result using literals
var num = 5;
num.toFixed(2); // 5.00
// a string object
// strings have a slice() method
var obj = new String("text");
obj.slice(0,2); // "te"
// same as above
var string = "text";
string.slice(0,2); // "te"
正如您所看到的，对象字面量和构造函数之间几乎没有任何区别。更有趣的是，仍然可以在字面量上调用方法。当对字面量调用方法时，JavaScript会自动将文字转换为临时对象，以便该方法可以执行操作。一旦不再需要临时对象，JavaScript就会丢弃它。
使用new关键字是必须的
一定要记住在所有构造函数之前使用new关键字。如果您不小心忘记了new，您将修改全局对象而不是新创建的对象。考虑以下示例：
function Book(name, year) {
console.log(this);
this.name = name;
this.year = year;
}
var myBook = Book("js book", 2014);
console.log(myBook instanceof Book);
console.log(window.name, window.year);
var myBook = new Book("js book", 2014);
console.log(myBook instanceof Book);
console.log(myBook.name, myBook.year);
下面是这段代码记录到控制台的内容：
image.png
当我们调用没有new的Book构造函数时，实际上是在调用没有返回语句的函数。因此，在构造函数中，它指向window(而不是myBook)，并创建两个全局变量。但是，当我们使用new调用函数时，上下文将从全局(窗口)切换到实例。这个正确地指向myBook。
注意，在严格模式下，这段代码会抛出一个错误，因为严格模式的设计是为了防止程序员不小心调用没有new关键字的构造函数。
范围安全的构造函数
正如我们所看到的，构造函数只是一个函数，因此可以在不使用new关键字的情况下调用它。但是，对于没有经验的程序员来说，这可能是bug的来源。作用域安全的构造函数被设计成返回相同的结果，而不管调用它时是否带有new，因此它不会遇到这些问题。
大多数内置构造函数(如Object、Regex和Array)都是作用域安全的。它们使用一种特殊的模式来确定如何调用构造函数。如果没有使用new，它们将通过使用new再次调用构造函数来返回对象的适当实例。考虑以下代码：
function Fn(argument) {
// if "this" is not an instance of the constructor
// it means it was called without new
if (!(this instanceof Fn)) {
// call the constructor again with new
return new Fn(argument);
}
}
因此，我们的构造函数的作用域安全版本应该是这样的：
function Book(name, year) {
if (!(this instanceof Book)) {
return new Book(name, year);
}
this.name = name;
this.year = year;
}
var person1 = new Book("js book", 2014);
var person2 = Book("js book", 2014);
console.log(person1 instanceof Book); // true
console.log(person2 instanceof Book); // true
结论
重要的是要理解ES2015中引入的类声明只是作为现有的基于原型的继承的语法糖，并没有向JavaScript添加任何新东西。构造函数和原型是JavaScript定义相似和相关对象的主要方式。
在本文中，我们已经很好地了解了JavaScript构造函数的工作方式。我们了解到构造函数与常规函数类似，但是它们与new关键字一起使用。我们了解了构造函数如何使我们能够快速创建具有相同属性和方法的多个类似对象，以及为什么instanceof操作符是确定实例类型的最安全方法。最后，我们讨论了作用域安全的构造函数，可以使用new或不使用new来调用它们。
