简单的JavaScript部分:在JavaScript中创建对象的四种方法

智能甄选 2018-02-05 13:21:32

在JavaScript中,有四种方法可用于创建对象:

对象文字

新的运算符或构造函数

Object.create方法

在这篇文章中,我们将学习这些方法。

对象文字

对象字面量也称为对象初始值设定项,是由逗号分隔的一组配对名称和值。您可以创建一个对象文字,如下所示:

var car = { model: 'bmw', color: 'red', price: 2000}console.log(JSON.stringify(car));

您可以在对象中动态添加属性,包括创建对象之后。在这里我们添加动态属性car.type:

var car = { model: 'bmw', color: 'red', price: 2000}console.log(JSON.stringify(car));car.type = 'manual'; // dynamic property console.log(JSON.stringify(car));

对象文字是一个简单的表达式,每次在代码中执行它所出现的语句时,都会创建一个对象。您也可以使用  Object.defineProperty 在对象文字中创建属性,如下所示:

var car = { model: 'bmw', color: 'red', price: 2000}Object.defineProperty(car, "type", { writable: true, enumerable: true, configurable: false, value: 'gas'});console.log(car.type); //gas

使用的主要优点  Object.defineProperty 是可以为对象属性描述符设置值或修改现有属性。您可以在这里了解更多关于对象属性描述符。

新的操作符或构造函数

创建对象的第二种方法是使用构造函数。如果使用new运算符调用函数,则该函数充当构造函数并返回一个对象。考虑下面的代码:

function Car(model, color) { this.model = model; this.color = color;}var c1 = new Car('BMW', 'red');console.log(c1.model);

这种创建对象的方法也称为  构造器调用模式。有两个步骤来处理构造函数:

创建一个函数,它将定义对象类型。

使用新的操作符创建一个对象的实例。

要创建一个Student对象,首先创建一个如下所示的函数。在这个例子中,这表示正在创建的对象,所以名称和年龄将是新创建的对象的属性。

function Student(name, age) { this.name = name; this.age = age;}

接下来,创建Student对象类型的实例,如下所示:

var s1 = new Student('foo', 7);console.log(s1.name);var s2 = new Student('koo', 9);console.log(s2.name);

您可以使用  instanceof 运算符来查找实例的类型,并确定s1是否是Student对象的实例,如下所示:

var s1 = new Student('foo', 9);console.log(s1 instanceof Student);

您也可以使用  Object.defineProperty 在构造函数中创建属性,如下所示:

function Car(model) {    Object.defineProperty(this, "model", {        writable: true,        enumerable: true,        configurable: false,        value: model    });}var myCar = new Car("Audi A3");console.log(myCar.model);    // Audi  A3

使用的主要优点  Object.defineProperty 是可以设置对象属性描述符的值。您可以在这里了解更多关于对象属性描述符。

Object.create方法

您也可以使用该Object.create() 方法创建新的对象,该对象  允许您指定原型对象和属性。例如:

var Car = {    model: 'BMW',    color: 'red'}

您可以使用该  Car 对象作为原型创建另一个对象,如下所示:

var ElectricCar = Object.create(Car);console.log(ElectricCar.model); // BMW

在这个例子中,你已经创建了一个  ElectricCar 使用该  Car  对象作为原型的ElectricCar 对象,所以该对象将具有该  对象的所有属性  Car 。您还可以添加属性,如下所示:

var ElectricCar = Object.create(Car, {    type: {        value: 'Electric',        writable: true,        configurable: false,        enumerable: true    }});console.log(ElectricCar.type); // Electric

属性应该作为对象传递,可以使用属性描述符来设置。您也可以使用该  Object.create 方法在对象之间创建继承。

ECMAScript 6引入了class关键字来创建JavaScript中的类。现在,您可以使用class属性来创建JavaScript代替函数构造函数的类,并使用new运算符来创建实例。考虑下面的代码:

class Car {    constructor(maker, price) {        this.maker = maker;        this.price = price;    }    getInfo() {        console.log(this.maker + " costs : " + this.price);    }}

您可以使用  Car 该类创建对象,如下所示:

var car1 = new Car("BMW", 100);car1.getInfo();var car2 = new Car("Audi", 150);car2.getInfo();

您可以了解更多关于类在这里。

结论

有四种方法可以在JavaScript中创建对象 - 使用对象文字,使用函数构造函数,使用  Object.create 方法以及使用class关键字(与使用函数构造函数几乎相同)。Object.create 当需要使用现有对象作为原型创建对象时,该  方法非常有用。

0 阅读:0
智能甄选

智能甄选

技术交流、资源共享,是程序员的网上乐园。