OveUI博客
老前端的戎码生涯

javascript 面向对象创建对象的几种方式

1、基于Object对象:

var person = new Object();
person.name = 'My Name';
person.age = 18;
person.getName = function(){
    return this.name;
}

2、对象字面量:

使用对象字面量创建一个或多个对象,例如

var obj1 = {
    name: "Alice",
    age: 25
};

var obj2 = {
    name: "Bob",
    age: 30
};

使用Object构造函数或对象字面量创建对象,缺点是创建多个对象时,会产生大量的重复代码

3、工厂函数:

使用工厂函数可以创建多个对象,工厂函数是一个返回对象的函数。例如:

function createPerson(name, age) {
    return {
       name: name,
       age: age
    };
}

var person1 = createPerson("Alice", 25);
var person2 = createPerson("Bob", 30);

创建对象用工厂方法实现,可以传递参数,返回对象的函数,缺点是无法识别对象类型

4、构造函数:

使用构造函数创建一个对象模板,然后使用 new 操作符创建多个对象,例如:

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.getAge = function () {
        return this.age;
    };
}

var person1 = new Person("Alice", 25);
var person2 = new Person("Bob", 30);
console.log(person1.name);  //'Alice'
console.log(person1.age);   //25
console.log(person2["age"]);  // 输出 30
console.log(person1.getAge());  //25
alert(person1 instanceof Person);  //true;
alert(person1 instanceof Object);  //true;
4.1 使用自定义的构造函数(与普通函数一样,只是用它来创建对象),定义对象类型(如:Person)的属性和方法。它与工厂方法区别在于:
  • 没有显式地创建对象
  • 直接将属性和方法赋值给this对象;
  • 没有return语句;

此外,要创建Person的实例,必须使用new关键字,以Person函数为构造函数,传递参数完成对象创建;

4.2 要创建 Person 的新实例,必须使用 new 操作符。以这种方式调用构造函数实际上会经历以下 4个步骤:

(1) 创建一个新对象;
(2) 将构造函数的作用域赋给新对象(因此 this 就指向了这个新对象);
(3) 执行构造函数中的代码(为这个新对象添加属性);
(4) 返回新对象。

在前面例子的最后,person1和person2分别保存着 Person 的一个不同的实例。这两个对象都有一个 constructor (构造函数)属性,该属性指向 Person ,如下所示。
alert(person1.constructor == Person); //true
alert(person2.constructor == Person); //true

对象的 constructor 属性最初是用来标识对象类型的。

创建自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型;而这正是构造函数模式胜过工厂模式的地方。

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.getAge =  new Function ("return this.age"); //和上面是一样的,会重复创建多个函数
}

缺点:上述代码,创建多个实例时,会重复调用new Function();创建多个函数实例,这些函数实例还不是一个作用域中,当然这一般不会有错,但这会造成内存浪费。

5、ES6 类:

使用 ES6 类可以创建多个对象,类是一个对象模板,使用 new 操作符创建多个对象。例如:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
}
}

var person1 = new Person("Alice", 25);
var person2 = new Person("Bob", 30);

无论使用哪种方式创建对象,都可以使用对象的属性和方法来操作和处理数据。

在前端开发中,创建多个对象的方式有很多,包括:

  • 对象字面量:使用 {} 创建一个或多个对象。
  • 构造函数:使用构造函数创建一个对象模板,然后使用 new 操作符创建多个对象。
  • 工厂函数:使用工厂函数创建多个对象,工厂函数是一个返回对象的函数。
  • ES6 类:使用 ES6 类创建多个对象,类是一个对象模板,使用 new 操作符创建多个对象。
赞(0)
未经允许不得转载:UI树欲静 » javascript 面向对象创建对象的几种方式