javascript-js对象的构造方法

发表于 更新于

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关键字

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

1
2
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)构造函数来创建一个新对象。 是的， 一般对象都有构造函数，它创建了一个空的对象。

  1. 尝试在您浏览器中的Javascript控制台中输入以下代码：

    1
    var person1 = new Object();

  2. 这样就在person1变量中存储了一个空对象。然后, 可以根据需要, 使用点或括号表示法向此对象添加属性和方法；试试这个例子：

    1
    2
    3
    4
    5
    person1.name = 'Chris';
    person1['age'] = 38;
    person1.greeting = function() {
      alert('Hi! I\'m ' + this.name + '.');
    }

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

    1
    2
    3
    4
    5
    6
    7
    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), 它允许您基于现有对象创建新的对象。

  1. 在 JavaScript 控制台中尝试此操作：

    1
    var person2 = Object.create(person1);

  2. 现在尝试这个：

    1
    2
    person2.name
    person2.greeting()

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

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

  1. 例如，在 JavaScript 控制台中输入：

    1
    var person2 = Object.create(person1);

  2. create() 实际做的是从指定原型对象创建一个新的对象。这里以 person1 为原型对象创建了 person2 对象。在控制台输入：

    1
    person2.__proto__

结果返回对象person1。

通过constructor 属性构造

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

  1. 例如，在控制台中尝试下面的指令：

    1
    2
    person1.constructor
    person2.constructor

    都将返回 Person() 构造器，因为该构造器包含这些实例的原始定义。

    一个小技巧是，你可以在 constructor 属性的末尾添加一对圆括号（括号中包含所需的参数），从而用这个构造器创建另一个对象实例。毕竟构造器是一个函数，故可以通过圆括号调用；只需在前面添加 new 关键字，便能将此函数作为构造器使用。

  2. 在控制台中输入：

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

  3. 现在尝试访问新建对象的属性，例如：

    1
    2
    3
    person3.name.first
    person3.age
    person3.bio()

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

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

1
instanceName.constructor.name

具体地，像这样：

1
person1.constructor.name