📜  在 JavaScript 中创建对象(4 种不同的方式)

📅  最后修改于: 2022-05-13 01:58:09.658000             🧑  作者: Mango

在 JavaScript 中创建对象(4 种不同的方式)

在语法方面,JavaScript 是一种灵活的面向对象语言。在本文中,我们将看到在 JavaScript 中实例化对象的不同方法。
在我们继续之前,重要的是要注意 JavaScript 是一种基于原型的基于对象的语言,而不是基于类的语言。由于这种不同的基础,JavaScript 如何允许您创建对象层次结构以及继承属性及其值可能不太明显。

使用构造函数创建对象:

在 JavaScript 中实例化对象的最简单方法之一。构造函数只不过是一个函数,在 new 关键字的帮助下,构造函数允许创建多个相同风格的对象,如下所示:

//simple function
function vehicle(name,maker,engine){
    this.name = name;
    this.maker = maker;
    this.engine = engine;
}
//new keyword to create an object
let car  = new vehicle('GT','BMW','1998cc');
//property accessors
console.log(car.name);
console.log(car.maker);
console.log(car['engine']);

输出:

解释: OOP 中的一个类有两个主要组成部分,一些参数和几个成员函数。在这个方法中我们声明了一个类似类的函数,有三个参数,name、maker、engine( this关键字用来区分类的name、maker、engine和参数的name、maker、engine)正在提供。)。然后我们简单地创建一个车辆的对象 obj,初始化它并调用它的方法。

使用对象字面量:

字面量量是定义对象的更小更简单的方法。我们简单地在花括号内定义属性和值,如下所示:

//creating js objects with object literal
let car = {
    name : 'GT',
    maker : 'BMW',
    engine : '1998cc'
};
//property accessor
console.log(car.name); //dot notation
console.log(car['maker']); //bracket notation

输出:

在上面的代码中,我们在对象字面量的帮助下创建了一个名为 car 的简单对象,具有名称、制造商、引擎等属性。然后我们使用属性访问器方法(点表示法、括号表示法)来控制台记录这些值。
现在让我们看看如何向已定义的对象添加更多属性:

let car = {
    name : 'GT',
    maker : 'BMW',
    engine : '1998cc'
};
//adding property to the object
car.brakesType = 'All Disc';
console.log(car);

我们向上面定义的汽车对象添加了名为brakesType 的新属性,当我们控制台记录整个对象时,我们得到:
输出:

方法也可以在创建时成为对象的一部分,或者可以稍后添加,如下所示:

//adding methods to the car object
let car = {
    name : 'GT',
    maker : 'BMW',
    engine : '1998cc',
    start : function(){
        console.log('Starting the engine...');
    }
};
car.start();
// Adding method stop() later to the object
car.stop = function() {
    console.log('Applying Brake...');  
}
car.stop();

输出:

说明:在上面的代码中,start 方法被添加到 car 对象中,然后由car.start()调用,并且在对象已经声明后也添加了 stop 方法。

使用 Object.create() 方法创建对象:

Object.create() 方法创建一个新对象,使用现有对象作为新创建对象的原型。
例子:

const coder = {
    isStudying : false,
    printIntroduction : function(){
        console.log(`My name is ${this.name}. Am I studying?: ${this.isStudying}`);
    }
};
const me = Object.create(coder);
me.name = 'Mukul';
me.isStudying = true;
me.printIntroduction();

输出:

使用 es6 类:

ES6 像任何其他静态类型或面向对象的语言一样支持类概念。因此,可以从 javascript 中的类中创建对象,如下所示:

//using es6 classes
class Vehicle {
  constructor(name, maker, engine) {
    this.name = name;
    this.maker =  maker;
    this.engine = engine;
  }
}
  
let car1 = new Vehicle('GT', 'BMW', '1998cc');
  
console.log(car1.name);  //GT

输出: