在 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
输出: