JavaScript高级之对象创建的几种方式-摩杜云开发者社区

第一种，Object构造函数模式

方法：先创建空Object对象，再动态添加属性和方法。
适用场景：初始时不确定对象内部数据。
问题：创建语句太多。

<script type="text/javascript"> // 先创建空Object对象 var p = new Object(); console.log(p);// 此时内部数据是不确定的 // 再动态添加属性和方法 p.name = '张三';// 添加name属性 p.age = 12;// 添加age属性 p.setName = function (name) {
      
        // 添加setName方法 this.name = name; }; // 测试创建的对象 console.log(p.name, p.age);// 张三 12 p.setName('李四'); console.log(p.name, p.age);// 李四 12 </script>

第二种，对象字面量

方法：使用{ }创建对象，同时指定属性和方法。
适用场景：初始时对象内部数据的确定的。
问题：如果创建多个对象，会有重复代码。

<script type="text/javascript"> var p = {
      
         name: '张三', age: 12, setName: function (name) {
      
         this.name = name; } }; // 测试创建的对象 console.log(p.name, p.age);// 张三 12 p.setName('李四'); console.log(p.name, p.age);// 李四 12 // 如果创建多个对象则会代码很重复 var p2 = {
      
         name: '王五', age: 15, setName: function (name) {
      
         this.name = name; } } </script>

第三种，工厂模式

方法：通过工厂函数动态创建对象并返回创建成功的对象。
适用场景：需要创建多个对象。
问题：对象没有一个具体的类型，都是Object类型的。

<script type="text/javascript"> // 创建一个工厂函数，通过函数来动态创建对象，然后将创建的对象返回 function createPerson(name, age) {
      
         var obj = {
      
         name: name, age: age, setName: function (name) {
      
         this.name = name; } }; return obj; } // 通过函数创建两个不同的对象，但p1和p2都是Object类型的 var p1 = createPerson('张三', 12); var p2 = createPerson('李四', 15); function createFood(name, price) {
      
         var obj = {
      
         name: name, price: price }; return obj; } // 但f1也是Object类型的 var f1 = createFood('西红柿', 3.5); </script>

第四种，自定义构造函数模式

方法：自定义构造函数，通过new关键字来创建对象。
适用对象：需要创建多个类型确定的对象。
问题：每个对象都有相同的数据，浪费内存。

<script type="text/javascript"> // 使用构造函数创建声明对象类型 function Person(name, age) {
      
         this.name = name; this.age = age; this.setName = function (name) {
      
         this.name = name; } } // 使用new关键字来创建对象 var p1 = new Person('张三', 12); p1.setName('李四'); console.log(p1.name, p1.age); // 如果再创建一个p2，那么p1对象和p2对象都有setName方法，但它们应该是公共的，而不是每个对象都占用一块内存空间 var p2 = new Person('王五', 13); // 创建另一种类型的对象 function Food(name, price) {
      
         this.name = name; this.price = price; } var f1 = new Food('西红柿', 3.5); console.log(f1.name, f1.price); console.log(p1 instanceof Person);// true console.log(f1 instanceof Food);// true </script>

第五种，构造函数与原型组合的模式

方法：自定义构造函数，属性在构造函数中初始化，而方法通过原型来进行添加。
适用场景：需要创建多个类型确定的对象。

<script type="text/javascript"> // 在构造函数中初始化属性 function Person(name, age) {
      
         this.name = name; this.age = age; } // 通过原型来设置方法 Person.prototype.setName = function (name) {
      
         this.name = name; }; var p1 = new Person('张三', 14); var p2 = new Person('李四', 15); console.log(p1, p2); </script>