javascript-js对象的构造方法

lamirs2021年2月26日大约 3 分钟

Failure is the condiment that gives success its flavor. — Truman Capote

本系列关注前端部分,根据学习路线图达到学习Vue.js的目的
developer路线图developer-roadmap/translations/chinese at master · kamranahmedse/developer-roadmap
本系列笔记的源代码GitHub项目地址:learning-area/front-end-learning at master · YJ2CS/learning-area

快速跳转

目录:前端学习路线-目录

使用new关键字

将下面的代码加在您之前的代码下面：

var person1 = new Person('Bob');
var person2 = new Person('Sarah');

Object()构造函数

首先, 您能使用[Object()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)构造函数来创建一个新对象。是的，一般对象都有构造函数，它创建了一个空的对象。

尝试在您浏览器中的Javascript控制台中输入以下代码：
```
var person1 = new Object();
```
这样就在person1变量中存储了一个空对象。然后, 可以根据需要, 使用点或括号表示法向此对象添加属性和方法；试试这个例子：
```
person1.name = 'Chris';
person1['age'] = 38;
person1.greeting = function() {
  alert('Hi! I\'m ' + this.name + '.');
}
```

还可以将对象文本传递给Object() 构造函数作为参数，以便用属性/方法填充它。请尝试以下操作：

var person1 = new Object({
  name : 'Chris',
  age : 38,
  greeting : function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
});

使用create()方法

JavaScript有个内嵌的方法[create()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create), 它允许您基于现有对象创建新的对象。

在 JavaScript 控制台中尝试此操作：
```
var person2 = Object.create(person1);
```
现在尝试这个：
```
person2.name
person2.greeting()
```

您可以看到，person2是基于person1创建的，它们具有相同的属性和方法。这非常有用，因为它允许您创建新的对象而无需定义构造函数。缺点是比起构造函数，浏览器在更晚的时候才支持create()方法（IE9, IE8 或甚至以前相比），加上一些人认为构造函数让您的代码看上去更整洁 —— 您可以在一个地方创建您的构造函数，然后根据需要创建实例，这让您能很清楚地知道它们来自哪里。

但是, 如果您不太担心对旧浏览器的支持，并且您只需要一个对象的一些副本，那么创建一个构造函数可能会让您的代码显得过度繁杂。这取决于您的个人爱好。有些人发现create() 更容易理解和使用。

例如，在 JavaScript 控制台中输入：
```
var person2 = Object.create(person1);
```
create() 实际做的是从指定原型对象创建一个新的对象。这里以 person1 为原型对象创建了 person2 对象。在控制台输入：
```
person2.__proto__
```

结果返回对象person1。

通过constructor 属性构造

每个实例对象都从原型中继承了一个constructor属性，该属性指向了用于构造此实例对象的构造函数。

例如，在控制台中尝试下面的指令：
```
person1.constructor
person2.constructor
```
都将返回 Person() 构造器，因为该构造器包含这些实例的原始定义。
一个小技巧是，你可以在 constructor 属性的末尾添加一对圆括号（括号中包含所需的参数），从而用这个构造器创建另一个对象实例。毕竟构造器是一个函数，故可以通过圆括号调用；只需在前面添加 new 关键字，便能将此函数作为构造器使用。

在控制台中输入：

var person3 = new person1.constructor('Karen', 'Stephenson', 26, 'female', ['playing drums', 'mountain climbing']);

现在尝试访问新建对象的属性，例如：
```
person3.name.first
person3.age
person3.bio()
```

正常工作。通常你不会去用这种方法创建新的实例；但如果你刚好因为某些原因没有原始构造器的引用，那么这种方法就很有用了。

此外，[constructor](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor) 属性还有其他用途。比如，想要获得某个对象实例的构造器的名字，可以这么用：

instanceName.constructor.name

具体地，像这样：

person1.constructor.name