• 创建对象的模式


    创建对象的模式

    1.工厂模式

    工厂模式抽象了创建具体对象的过程,使用一个函数,封装以特定接口创建对象的细节。

    function createPerson(name, age, job){
        var o = new Object();
        o.name = name;
        o.age = age;
        o.job = job;
        o.sayName = function(){
            alert(this.name);
        };    
        return o;
    }
            
    var person1 = createPerson("Nicholas", 29, "Software Engineer");
    var person2 = createPerson("Greg", 27, "Doctor");
            
    person1.sayName();   //"Nicholas"
    person2.sayName();   //"Greg"
    

    缺点:无法知道一个对象的类型。

    2.构造函数模式

    function Person(name, age, job){
        this.name = name;
        this.age = age;
        this.job = job;
        this.sayName = function(){
            alert(this.name);
        };
    }
            
    var person1 = new Person("Nicholas", 29, "Software Engineer");
    var person2 = new Person("Greg", 27, "Doctor");
            
    person1.sayName();   //"Nicholas"
    person2.sayName();   //"Greg"
    

    缺点:无法达到函数复用,每实例化一个新对象,就会创建一个新的函数对象。

    function Person(name, age, job){
        this.name = name;
        this.age = age;
        this.job = job;
        this.sayName = sayName;
    }
            
    function sayName(){
        alert(this.name);
    }
    

    把函数单独放在外面,每次调用函数时,只是相当于指针调用,但是不符合全局作用域,因为它只是单独为实例对象服务的。

    3.原型模式

    function Person(){
    }
            
    Person.prototype.name = "Nicholas";
    Person.prototype.age = 29;
    Person.prototype.job = "Software Engineer";
    Person.prototype.sayName = function(){
        alert(this.name);
    };
            
    var person1 = new Person();
    person1.sayName();   //"Nicholas"
            
    var person2 = new Person();
    person2.sayName();   //"Nicholas"
    

    上面每天添加一个属性和方法,就要敲一遍Person.prototype。为减少输入,也为了从视觉上更好封装原型的功能。更常用的做法是用一个包含所有属性和方法的对象字面量来重写怎个原型对象

    function Person(){
    }
            
    Person.prototype = {
        name : "Nicholas",
        age : 29,
        job: "Software Engineer",
        sayName : function () {
            alert(this.name);
        }
    };
    
    var friend = new Person();
    alert(friend instanceof Object);  //true
    alert(friend instanceof Person);  //true
    alert(friend.constructor == Person);  //false
    alert(friend.constructor == Object);  //true
    

    但是上面的方法还存在一个问题,那就是constructor属性不在指向Person()了。每创建一个函数,就会同时创建它的prototype对象,这个对象也会自动获得constructor属性。而我们在这里重写了默认的prototype对象,constructor属性作为prototype对象的属性,在这也就被改写了,没有写就认为是Object()这个原始构造函数。

    function Person(){
    }
            
    var friend = new Person();
                    
    Person.prototype = {
        constructor: Person,
        name : "Nicholas",
        age : 29,
        job : "Software Engineer",
        sayName : function () {
            alert(this.name);
        }
    };
            
    friend.sayName();   //error
    

    重写原型对象切断了现有原型与任何之前已经存在的对象实例之间的联系

    原型模式缺点:

    (1)首先,这个构造函数没有参数,省略了为构造函数初始化参数这一环节,结果所有实例在默认情况下都取得相同的属性值。使用原型方式,不能通过给构造函数传递参数来初始化属性的值,这意味着必须在对象创建后才能改变属性的默认值,这点很令人讨厌。

    function Car() {
    }
    
    Car.prototype.color = "blue";
    Car.prototype.doors = 4;
    Car.prototype.mpg = 25;
    Car.prototype.showColor = function() {
      alert(this.color);
    };
    
    var oCar1 = new Car();
    var oCar2 = new Car();
    

    (2)真正的问题出现在属性指向的是对象,而不是函数时。函数共享,基本属性值共享不会造成问题,但对象却很少被多个实例共享。因为对象是属于引用类型值,在原型里面的是它的指针,当修改它的值时,不会创建副本,而是直接修改原来的值

    function Car() {
    }
    
    Car.prototype.color = "blue";
    Car.prototype.doors = 4;
    Car.prototype.mpg = 25;
    Car.prototype.drivers = new Array("Mike","John");//引用类型值
    Car.prototype.showColor = function() {
      alert(this.color);
    };
    
    var oCar1 = new Car();
    var oCar2 = new Car();
    
    oCar1.drivers.push("Bill");
    
    alert(oCar1.drivers);	//输出 "Mike,John,Bill"
    alert(oCar2.drivers);	//输出 "Mike,John,Bill"
    
    function Person(){
    }
    
    Person.prototype = {
        constructor: Person,
        name : "Nicholas",
        age : 29,
        job : "Software Engineer",
        friends : ["Shelby", "Court"],//引用类型值
        sayName : function () {
            alert(this.name);
        }
    };
            
    var person1 = new Person();
    var person2 = new Person();
            
    person1.friends.push("Van");//friends是引用类型值,这里是它的一个指针,所以修改它,在下面两个实例对象上都会体现出来
            
    alert(person1.friends);    //"Shelby,Court,Van"
    alert(person2.friends);    //"Shelby,Court,Van"
    alert(person1.friends === person2.friends);  //true
    

    4.混合的构造函数/原型方式

    混合模式是最常见的模式

    function Person(name, age, job){
        this.name = name;
        this.age = age;
        this.job = job;
        this.friends = ["Shelby", "Court"];
    }
            
    Person.prototype = {
        constructor: Person,
        sayName : function () {
            alert(this.name);
        }
    };
            
    var person1 = new Person("Nicholas", 29, "Software Engineer");
    var person2 = new Person("Greg", 27, "Doctor");
            
    person1.friends.push("Van");
            
    alert(person1.friends);    //"Shelby,Court,Van"
    alert(person2.friends);    //"Shelby,Court"
    alert(person1.friends === person2.friends);  //false
    alert(person1.sayName === person2.sayName);  //true
    

    5.动态原型模式

    动态原型方法的基本想法与混合的构造函数/原型方式相同,即在构造函数内定义非函数属性,而函数属性则利用原型属性定义。唯一的区别是赋予对象方法的位置。

    function Car(sColor,iDoors,iMpg) {
      this.color = sColor;
      this.doors = iDoors;
      this.mpg = iMpg;
      this.drivers = new Array("Mike","John");
      
      if (typeof Car._initialized == "undefined") {
        Car.prototype.showColor = function() {
          alert(this.color);
        };
    	
        Car._initialized = true;
      }
    }
    

    直到检查 typeof Car._initialized 是否等于 "undefined" 之前,这个构造函数都未发生变化。这行代码是动态原型方法中最重要的部分。如果这个值未定义,构造函数将用原型方式继续定义对象的方法,然后把 Car._initialized 设置为 true。如果这个值定义了(它的值为 true 时,typeof 的值为 Boolean),那么就不再创建该方法。简而言之,该方法使用标志(_initialized)来判断是否已给原型赋予了任何方法。该方法只创建并赋值一次,传统的 OOP 开发者会高兴地发现,这段代码看起来更像其他语言中的类定义了。

    总结

    目前使用最广泛的是混合的构造函数/原型方式。此外,动态原始方法也很流行,在功能上与构造函数/原型方式等价。可以采用这两种方式中的任何一种。不过不要单独使用经典的构造函数或原型方式,因为这样会给代码引入问题。

  • 相关阅读:
    windows服务器下安装APC
    (经验)在CSS中定义超链接样式a:link、a:visited、a:hover、a:active的顺序
    网站访问计数器
    网站计数器代码(jsp版本)
    .NET2.0隐形的翅膀,正则表达式搜魂者
    PHP中array数组教程
    [Python] py2exe先知其然
    [Python] Ubuntu12.04LTS
    [Python] 中文
    [linux] is not in the sudoers file
  • 原文地址:https://www.cnblogs.com/YeChing/p/6346390.html
Copyright © 2020-2023  润新知