• Javascript之创建对象(工厂模式与构造函数模式)


        虽然Object构造函数或对象字面量都可以创建单个对象,但是这些方式有个明显的缺点:使用同一个接口创建很多对象,会产生大量重复的代码。为了解决这个问题,就可以使用工厂模式来创建对象。

    1、工厂模式

        在ECMAScript中是无法创建类的,开发人员就发明了一种函数,用函数来封装特定接口创建对象的细节

    function createPerson(name, age, job) {
        var o = new Object();
        o.name = name;
        o.age = age;
        o.job = job;
        sayName = function () {
            alert(this.name);
        };
        return o;
    }
    var person1 = createPerson('zxj', 23, "Software Engineer");
    var person2 = createPerson('sdf', 25, "Software Engineer");
        在示例中我们可以看到,工厂模式虽然解决了创建多个相似对象的问题,但没有解决对象识别的问题(在示例中,得到的都是o对象,对象的类型都是Object)。

    2、构造函数模式

        我们知道,ECMAScript中的构造函数可以用来创建特定类型的对象。像Object和Array的原生的构造函数,在运行时会自动出现在执行环境中。此外,也可以创建自定义的构造函数,从而定义自定义对象类型的属性和方法。代码如下所示:
    function createPerson(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
        sayName = function () {
            alert(this.name);
        };
    }
    var person1 = new Person('zxj', 23, "Software Engineer");
    var person2 = new Person('sdf', 25, "Software Engineer");
        在这个例子中,Person()函数取代了createPerson()函数。我们注意到, Person()中的代码除了和createPerson()中相同的部分外,还存在以下不同之处:
    • 没有显式的创建对象;
    • 直接将属性和方法赋给了this对象;
    • 没有return语句;
        此外,函数名Person使用的是大写字母P。按照惯例,构造函数始终都应该以一个大写字母开头,而非构造函数应该以一个小写字母开头。主要为了区别与ECMAScrit中的其他函数;因为构造函数本身也是函数,只不过可以用来创建对象。
        要创建Person对象的新势力,必须使用new操作符。以这种方式调用构造函数实际上会经历以下4个步骤:
    1. 创建一个新对象;
    2. 将构造函数的作用域赋给新对象(因此this就指向这个新对象);
    3. 执行构造函数中的代码(为这个新对象添加属性和方法);
    4. 返回新对象;
        所以,person1和person2分别保存着Person的一个不同的实例。这两个对象都有一个constructor(构造函数)属性,该属性指向Person,如下所示:
    alert(person1.constructor == Person); //true
    alert(person2.constructor == Person); //true
        对于contructor属性最初是用来标识对象类型的。但是,提到检测对象类型,还是instanceof操作符更可靠一点,如下所示:
    alert(person1 instanceof Object); //true
    alert(person1 instanceof Person); //true
    alert(person2 instanceof Object); //true
    alert(person2 instanceof Person); //true
        创建自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型,这正是构造函数模式胜过工厂模式的地方。在这个例子中,peron1和person2之所以同时是Object的实例,是因为所有对象都继承于Object。

        将构造函数当作函数

        构造函数和普通函数唯一的区别在于调用它们的方式不同。任何函数,只要通过new操作符调用的,那么它就是构造函数,如果不通过new操作符调用,那它就是普通函数。如下所示:
    // 当作构造函数
    var person = new Person('zxj', 23, "Software Engineer");
    person.sayName(); //zxj
     
    // 当作普通函数
    Person('sdf', 25, "Software Engineer"); //添加到window
    window.sayName(); //saf
     
    // 在另一个对象的作用域中调用
    var o = new Object();
    Person.call(o, "qwe", 25, "Nurse");
    o.sayName(); //qwe

        构造函数的问题

        构造函数的缺点在于每个方法都要在每个实例上重新创建一遍。在前面例子中,person1和person2都有一个名为sayName的方法,但是这两个方法不属于同一个对象。
    alert(person1.sayName == person.sayName()); // false
        那么我们能不能共享一个sayName()方法。如果想要完成这种需求,大可像下面代码一样,通过把函数定义转移到构造函数的外部。
    function Person(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
        this.sayName = sayName;
    }
    function sayName() {
        alert(this.name);
    };
    var person1 = new Person('zxj', 23, "Software Engineer");
    var person2 = new Person('sdf', 25, "Software Engineer");
        当两个实例需要公共属性或方法时,就需要将其在构造函数外定义,然后在构造函数内部引用它们。
        上面例子中的做法,确实解决了两个函数做同一件事的问题,可是问题又来了:在全局作用域中定义的函数实际上只能被某个对象调用,这让全局作用域有点名不副实。但这些公共方法多了的时候,也就要定义多个全局函数,于是我们这个自定义的引用类型就丝毫没有封装性可言了。
        好在,这些问题可以通过原型模式来解决。
  • 相关阅读:
    相对布局(下)
    html5-微格式-时间的格式
    html5-新元素新布局模板
    html5-section元素
    html5-article元素
    html5-新布局元素header,footer
    html5-基本知识小结及补充
    html5-常用的通用元素
    html5-div布局
    html5-块元素和内联元素
  • 原文地址:https://www.cnblogs.com/zxj159/p/3087576.html
Copyright © 2020-2023  润新知