JavaScript之创建对象

创建对象的方式:

  • 工厂模式
  • 构造函数模式
  • 原型模式
  • 组合使用构造函数模式和原型模式
  • 动态原型模式
  • 继承构造函数模式
  • 稳妥构造函数模式

1. 工厂模式

创建一个函数,用函数来封装以特定接口创建对象的细节。


   function createPerson(name, age, job) {
        let o = new Object();
        o.name = name;
        o.age = age;
        o.job = job;
        o.sayName = function() {
            console.log(this.name);
        };
        return o;
    }
    
    let person1 = createPerson("wang", 17, "software engineer");
    let person2 = createPerson("dch", 29, "doctor");
    console.log(person1);
    console.log(person2);
    

工厂模式可以解决创建多个相似对象的问题,但没有办法知道一个对象的类型。

2. 构造函数模式

自定义构造函数如下:

 function Person(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
        this.sayName = function() {
            console.log(name);
        };
    }
    let person3 =new Person("wang", 17, "software engineer");
    let person4 =new Person("dch", 29, "doctor");
    person3.sayName();
    console.log(person4);

区别

  • 没有显示的创建对象
  • 没有直接将属性和方法赋给this对象
  • 没有return语句
  • 构造函数开头大写

new操作符调用构造函数实际上会经历以下四个步骤:

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

person3和person4分别保存着Person的一个不同的实例。这两个对象都有一个constructor属性,该属性指向Person。

    console.log(person3.constructor === Person);   // true
    console.log(person4.constructor === Person);   // true
    console.log(person3.constructor === Object);  // false
    console.log(person4.constructor === Object);  // false

constructor最初是用来标识对象类型的,但是检测对象类型还是instanceof操作符更可靠一些。
在这个例子中创建的对象既是Person实例又是Object实例

   console.log(person3 instanceof Person);     // true
    console.log(person4 instanceof Person);    // true
    console.log(person3 instanceof Object);     // true
    console.log(person4 instanceof Object);     // true

缺点: 每个Person实例都包含一个不同的名sayName的function实例

   console.log(person3.sayName == person4.sayName);		// false

3. 原型模式

每个函数都有一个prototype属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。好处是可以让所有的对象实例共享它所包含的属性和方法。

function Person(name) {
    this.name = name || "Oreo" 
}

Person.prototype.age = 18;
Person.prototype.job = 'software engineer';
Person.prototype.sayName = function() {
    console.log(this.name);
}

let person1 = new Person("wang");
person1.sayName(); 			// wang

let person2 = new Person();
person2.sayName();			// Oreo

console.log(person1.sayName === person2.sayName);   		// true

4. 组合使用构造函数模式和原型模式

创建自定义函数最常见方式。
构造函数模式用于定义实例属性,原型模式用于定义方法和共享的属性。结果每个实例都会有自己的一份实例属性的副本,但同时又共享着对方法的引用,最大限度地节省了内存。

 function Person(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
        this.friends = ["wang", "pang", "zi"];
    }

    Person.prototype = {
        constructor: Person,
        sayName: function() {
            console.log("sayName: " + this.name);
        }
    }

    let person1 = new Person("Oreo", 18, "web");
    let person2 = new Person("Oreo2", 18, "ued");

    person1.friends.push("person1's friend");
    console.log(person1.friends);
    console.log(person2.friends);
    console.log(person1.friends === person2.friends);
    console.log(person1.sayName === person2.sayName);

结果在这里插入图片描述

5. 动态原型模式

可以达到和方法4. 组合使用构造函数模式和原型模式同样的效果,并把所有信息都封装到了构造函数中

   function Person(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
        this.friends = ["wang", "pang", "zi"];
        // 方法写之前检验
        if (typeof this.sayName != "function") {
            Person.prototype.sayName = function() {
                console.log(this.name)
            }
        }
    }

ps: 使用这种方法不能用对象字面量重写原型。会切断已经创建的实例和新原型的联系。

6. 寄生构造函数模式

7. 稳妥构造模式

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值