JavaScript 【面向对象的程序设计】创建对象

以下为学习《JavaScript 高级程序设计》》(第 3 版) 所做笔记。

目录：

　　1、使用Object构造函数或者对象字面量创建对象

　　2、工厂模式

　　3、构造函数模式

　　　　① 将构造函数当作函数

　　　　② 构造函数的问题

　　4、原型模式

　　　　① 理解原型对象

　　　　② 原型与 in 操作符

　　　　③ 更简单的原型语法

　　　　④ 原型的动态性

　　　　⑤ 原生对象的原型

　　　　⑥ 原型对象的问题

　　5、组合使用构造函数模式和原型模式

　　6、动态原型模式

　　7、寄生构造函数模式

　　8、稳妥构造函数模式

使用Object构造函数或者对象字面量创建对象

缺点：使用同一个接口创建很多对象，会产生大量的重复代码

<script>
    //使用 Object 构造函数创建单个对象
    var person = new Object();
    person.name = "xiaoxu";
    person.age = 20;
    person.a = function(){
        console.log("今tia很开心");
    }
    console.log( person.name ); //输出：xiaoxu
    person.a();                 //输出：今tia很开心
    //使用对象字面量创建单个对象
    var dog = {
        name : "旺财",
         age : 2,
        word : function(){
            console.log("汪汪");
        }
    }
    console.log( dog.name );    //输出：旺财
    dog.word();                 //输出：汪汪
</script>

工厂模式

 优点：解决了创建多个相似对象的问题

 缺点：没有解决对象识别的问题（即怎么知道一个对象的类型）

<script>
    function createPerson(name, age, job){
        var o = new Object();
        o.name = name;
        o.age = age;
        o.sex = sex;
        o.sayName = function(){
            console.log( o.name );
        };
        return o;
    }
    //函数 createPerson() 能够根据接受的参数来构建一个包含所有必要信息的 Person 对象
    var person1 = createPerson( "小许", 20, "male" );
    var person2 = createPerson( "乐乐", 1, "female" );
</script>

构造函数模式

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

<script>
/*
    创建构造函数: 1、没有显示地创建对象
                2、直接将属性和方法赋给了 this 对象
                3、没有 return 语句
                4、构造函数始终以一个大写字母开头
*/
    function Person(name, age, sex){
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.sayName = function(){
            console.log( this.name );
        };
    }
/*
    创建构造函数新实例时，必须使用 new 操作符。使用 new 操作符调用构造函数实际上会经历 4 个步骤：
    1、创建1个新对象
    2、将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）
    3、执行构造函数中的代码（为这个新对象添加属性）
    4、返回新对象
*/
    var person1 = new Person( "xiaoxu", 20, "male" );
    var person2 = new Person( "旺财", 1 ,"female" );

    //函数实例都有一个 constructor（构造函数）属性，该属性指向函数
    console.log( person1.constructor == Person );      //输出：true
    console.log( person2.constructor == Person );      //输出：true

    //本例中创建的所有对象既是 object 的实例，也是 Person 的实例
    //创建自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型（这是胜过工厂模式的地方）
    console.log( person1 instanceof Object );       //输出：true
    console.log( person1 instanceof Person );       //输出：true
    console.log( person2 instanceof Object );       //输出：true
    console.log( person2 instanceof Person );       //输出：true
</script>

将构造函数当作函数

 　　使用 new 操作符调用函数，函数就当作构造函数使用。不使用 new 操作符调用，函数就当作普通函数使用。不使用 new 操作符调用，函数的属性和方法都被添加给 window 对象。

<script>
//以这种方式定义的构造函数是定义在 Global 对象（在浏览器中是 window 对象）中的。
    function Person(name){
        this.name = name;
        this.sayName = function(){
            console.log( this.name );
        }
    }
//使用 new 操作符调用
    //当作构造函数调用
    var person1 = new Person("xiaoxu");
    person1.sayName();      //输出：xiaoxu
//不使用 new 操作符调用
    //当作普通函数调用
    Person("乐乐");
    window.sayName();       //输出：乐乐
    //在另一个对象的作用域中调用
    var o  = new Object();
    Person.call(o, "Sammi");
    o.sayName();            //输出：Sammi
</script>

构造函数的问题

　　使用构造函数的主要问题是每个方法都要在每个实例上都要创建一遍。不同实例上的同名函数是不相等的，但是没有必要创建 2 个完成相同任务的 Function对象。可以通过把函数定义转移到构造函数外部来解决这个问题，但是这样又有2个缺点：①在全局作用域中定义的函数实际上只能被某个对象调用 ②如果对象需要定义很多方法，那么需要定义很多全局函数，那么这个自定义的引用类型就毫无封装性可言了。这个问题可通过使用原型模式来解决。

<script>
    //使用构造函数的主要问题是每个方法都要在每个实例上都要创建一遍。
    function Person(name, age, job){
        this.name = name;
        this.age = age;
        this.job = job;
        /*
        this.sayName = function(){
            console.log( this.name );
        }*/
        //下面与上面声明函数在逻辑上是等价的
        //ECMAScript 中的函数是对象，因此每定义一个函数也就是实例化了一个对象，
        this.sayName = new Function( "console.log(this.name)" );
    }
    //不同实例上的同名函数是不相等的
    var person1 = new Person();
    var person2 = new Person();
    console.log( person1.sayName == person2.sayName );  //输出：false

    //创建 2 个完成同样任务的 Function 实例没有必要，可以通过把函数定义转移到构造函数外部来解决这个问题。
    function Person2(name, age){
        this.name = name;
        this.age = age;
        //将 sayName 属性设置成等于全局的 sayName 函数
        this.sayName = sayName;
    }
    function sayName(){
        console.log( this.name );
    }
    var person1 = new Person2();
    var person2 = new Person2();
    //由于 sayName 包含的是一个指向函数的指针，因此 person1 和 person2 对象就共享了在全局作用域中定义的 sayName()函数
    console.log( person1.sayName == person2.sayName );   //输出：true
</script>

原型模式

 优点：可以让所有对象实例共享它所包含的属性和方法

<script>
    function Person(){
    }

    /*
        创建的每个函数都有 1 个 prototype（原型）属性，这个属性是一个指针，指向一个对象，
    这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。
        prototype 就是通过调用构造函数而创建的那个对象的实例的原型对象，使用原型对象可以让
    所有对象实例共享它所包含的属性和方法。
    */
    Person.prototype.name = "xiaoxu";
    Person.prototype.age = 22;
    Person.prototype.sayName = function(){
        console.log( this.name );
    };

    var person1 = new Person();
    person1.sayName();      //输出：xiaoxu
    var person2 = new Person();
    person2.sayName();      //输出：xiaoxu
    
    //将 sayName() 方法和所有属性直接添加到了 Person 的 prototype 属性中，构造函数变成了空函数。
    console.log( person1.sayName == person2.sayName );  //输出：true
</script>

理解原型对象

　　以上面使用的 Person 构造函数和 Person.prototype 创建实例的代码为例， 下图展示了各个对象之间的关系。Person.prototype.constructor 指向 Person。

　　在所有实现中都没有办法访问到 [[Prototype]]，但可以通过 isPrototypeOf() 方法来确定对象之间是否存在这种关系。使用 Object.getPrototypeOf() 返回 [[Prototype]] 的值。

    //isPrototypeOf()
    //如果[[Prototype]]指向调用 isPrototype() 方法的对象(Person.prototype), 那么这个方法就返回 true。
    console.log( Person.prototype.isPrototypeOf( person1 ) );   //输出：true
    console.log( Person.prototype.isPrototypeOf( person2 ) );   //输出：true
    //Object.getPrototypeOf()
    console.log( Object.getPrototypeOf[person1] == Person.prototype );  //输出：false
    console.log( Object.getPrototypeOf( person1 ).name );               //输出: xiaoxu

　　当代码读取某个对象的某个属性时，先从对象实例本身开始搜索给定名字的属性，如果找到则返回属性的值，如果找不到则在原型对象属性中查找给定名字的属性，如果找到则返回属性的值。比如：在调用 person1.sayName() 时，先查找实例 person1 有无 sayName 属性，若实例 person1 无, 则继续搜索 person1 的原型有无 sayName 属性。

<script>
    function Person(){
    }
    Person.prototype.name = "xiaoxu";
    var person1 = new Person();
    var person2 = new Person();
    //可以通过对象实例访问保存在原型中的值，但是不能通过对象实例重写原型中的值。
    //在实例中添加一个属性，该属性与实例原型中的一个属性同名，那么实例的属性将会屏蔽原型中的属性
    person1.name = "zeng";
    console.log( person1.name );    //输出：zeng
    console.log( person2.name );    //输出：xiaoxu
    //使用 delete 操作符可以完全删除实例属性，删除之后可以重新访问原型中的属性
    delete person1.name;
    console.log( person1.name );    //输出：xiaoxu
</script>

　　使用 hasOwnProperty() 可以判断访问的是实例属性还是原型属性。

<script>
    function Person(){
    }
    Person.prototype.name = "xiaoxu";
    var person1 = new Person();
    var person2 = new Person();
    person1.name = "zeng";
    //实例属性返回 true
    console.log( person1.hasOwnProperty("name"));   //输出：true
    //原型属性返回 false
    console.log( person2.hasOwnProperty("name"));   //输出：false
</script>

原型与 in 操作符

<script>
    function Person(){
    }
    Person.prototype.name = "xiaoxu";
    Person.prototype.age = 22;
    Person.prototype.sayName = function(){
        console.log( this.name );
    };
    var person1 = new Person();
    var person2 = new Person();
    person1.name = "li";

//单独使用 in 操作符
    //in 操作符只要通过对象能够访问到属性就返回 true，无论是实例属性还是原型属性
    //下面person1.name是实例属性，person2.name是原型属性
    console.log( "name" in person1 );               //输出：true
    console.log( person1.hasOwnProperty("name") );  //输出: true
    console.log( "name" in person2 );               //输出：true
    console.log( person2.hasOwnProperty("name") );  //输出: false
    //同时使用 hasOwnProperty（）方法和 in操作符可以确定属性是存在对象中还是存在原型中
    function hasPrototypeProperty( object, name ){
        //为原型属性则返回 true, 否则返回 false
        return !object.hasOwnProperty(name) && (name in object);
    }
    console.log( hasPrototypeProperty( person1, "name" ) ); //输出：false
    console.log( hasPrototypeProperty( person2, "name" ) ); //输出：true

//在 for-in 循环中使用 in 操作符
    //返回所有能够通过对象访问的、可枚举（enumerated）属性
    //所有开发人员定义的属性都是可枚举的
    //屏蔽了原型中不可枚举属性（即将 [[Enumerable]]）标记为 false 属性）的实例属性也会在 for-in 循环中返回
    var o = {
        //原型的 toSrting() 方法的不可枚举属性[[Enumerable]]为false, 这里创建同名为toString()的实例属性，屏蔽了原型中的同名属性
        toString : function(){
            return "My Object";
        }
    };
    for( var prop in o ){
        if( prop == "toString" ){
            console.log( "Found toString" );
        }
    }   //输出：Found toString
    
    //Object.keys()
    //取得对象上所有可枚举的实例属性，返回一个数组
    var keys = Object.keys( Person.prototype);  //取得原型对象上所有可枚举的属性
    console.log( keys );        //输出：(3) ["name", "age", "sayName"]
    var person3 = new Person();
    person1.name = "dongxu";
    var person1Keys = Object.keys( person1 );   //取得实例对象person1上所有可枚举的属性
    console.log( person1Keys ); //输出：["name"]

    //Object.getOwnPropertyNames()
    //得到所有实例属性，无论其是否可枚举
    var keys = Object.getOwnPropertyNames( Person.prototype );
    console.log( keys );        //输出：(4) ["constructor", "name", "age", "sayName"]
    //注意：结果中包含不可枚举的 constructor 属性

    //Object.keys() 跟 Object.getOwnPropertyNames() 方法都可以用来替代 for-in 循环
</script>

更简单的原型语法

<script>
    function Person(){
    }
    /*
    Person.prototype.name = "xiaoxu";
    Person.prototype.age = 22;
    Person.prototype.sayName = function(){
        console.log( this.name );
    };
    */
    //如上，每添加一个属性和方法都要敲一遍 Person.prototype， 为减少输入，可将 Person.prototype 设置为等于一个对象字面量形式的新对象
    Person.prototype = {
        name : "xiaoxu",
        age : 22,
        sayName : function(){
            console.log( this.name );
        }
    };
    //此时本质上完全重写了默认的 prototype 对象，因此 constructor 属性变成了新对象的 constructor 属性，constructor 属性不再指向 Person
    var person1 = new Person();
    console.log( person1 instanceof Object );   //输出：true
    console.log( person1 instanceof Person );   //输出：true
    console.log( person1.constructor instanceof Object );   //输出：true
    console.log( person1.constructor instanceof Person );   //输出：false
</script>

如果 constructor 的值很重要，可以特意将它设置回适当的值。

<script>
    function Person(){
    }
    Person.prototype = {
        constructor : Person,
        name : "xiaoxu",
        age : 22,
        sayName : function(){
            console.log( this.name );
        }
    };
    //重设 constructor 属性会导致它的 [[Enumerable]]特性被设置为 true，默认情况下原生的constructor 属性是不可枚举的。
    //如果使用兼容 ECMAScript 5 的 JavaScript 引擎，可以用 Object.defineProperty() 重设 constructor
    Object.defineProperty( Person.prototype, "constructor",{
        enumerable : false,
        //重设 constructor 属性指向 prototype 所在函数的指针
        value : Person
    });
</script>

重设之前的 constructor

重设之后的 constructor

 

原型的动态性

 可以随时为原型添加属性和方法，并且修改能够立即在所有对象实例中反映出来。

<script>
    function Person(){}
    var p1 = new Person();
    Person.prototype.sayHi = function(){
        console.log( "hi" );
    };
    p1.sayHi();     //输出：hi
</script>

但是，如果是重写整个原型对象，情况就不一样了，重写相当于将原型改为另一个对象就等于切断了构造函数与最初原型之间的联系。实例中的指针仅指向原型，而不指向构造函数。

<script>
    function Person(){}
    var p1 = new Person();
    Person.prototype = {
        constructor : Person,
        name : "xiaoxu",
        sayName : function(){
            console.log( this.name );
        }
    }
    p1.sayName();   //报错 Uncaught TypeError: p1.sayName is not a function
</script>

重写原型对象之前：

 

 重写原型对象之后：

原生对象的原型

 所有原生引用类型（Object、Array、String，等等）都在其构造函数的原型上定义了方法。

<script>
    console.log( Array.prototype.sort );        //输出：ƒ sort() { [native code] }
    console.log( String.prototype.substring );  //输出：ƒ substring() { [native code] }
</script>

通过原生对象的原型，不仅可以取得所有默认方法的引用，而且可以定义新方法。还可以修改原生对象的原型。但是不建议在产品化的程序中修改原生对象的原型。

<script>
    //给基本包装类型 String 添加一个名为 someFn() 的方法
    String.prototype.someFn = function( text ){
        return this+text;
    };
    var msg = "hello";
    console.log(msg.someFn("123")); //输出：hello123
</script>

原型对象的问题

 所有实例在默认情况下都取得相同的属性。原型中所有属性是被很多实例共享的。因此，很少有人单独使用原型模式。

<script>
    function Person(){}
    Person.prototype = {
        constructor : Person,
        name : "xiaoxu",
        age : 22,
        friends : ["mona", "nana"],
        sayName : function(){
            console.log( this.name );
        }
    }
    var p1 = new Person();
    var p2 = new Person();
    //修改了 p1.friends 引用的数组之后 p2.friends 引用的数组也被修改了，因为实例共享一个数组
    p1.friends.push( "zeng" );
    console.log( p1.friends );  //输出：(3) ["mona", "nana", "zeng"]
    console.log( p1.friends );  //输出：(3) ["mona", "nana", "zeng"]
    console.log( p1.friends == p2.friends );    //输出:true
</script>

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

是在ECMAScript中使用最广泛、认同度最高的一种创建自定义类型的方法。这是用来定义引用类型的一种默认模式。

<script>
    //构造函数用于定义实例属性
    function Person(name, age){
        this.name = name;
        this.friends = ["mona", "nana"];
    }
    //原型模式用于定义方法和共享的属性
    Person.prototype = {
        constructor : Person,
        sayName : function (){
            console.log( this.name );
        }
    }
    var p1 = new Person("xiaoxu", 22);
    var p2 = new Person("Sammi", 33);
    //数组friends是在构造函数中定义的，所以实例之间不共享数组friends, p1.friends跟p2.friends分别引用不同的数组。
    p1.friends.push("miko");
    console.log( p1.friends );  //输出：(3) ["mona", "nana", "miko"]
    console.log( p2.friends );  //输出：(2) ["mona", "nana"]
    console.log( p1.friends == p2.friends );    //输出：false
    //方法 sayName() 是用原型模式定义的，所以实例之间共享方法 sayName()
    console.log( p1.sayName == p2.sayName );    //输出：true
</script>

动态原型模式

动态原型模式把所有信息都封装在构造函数中，通过在构造函数中初始化原型保持了同时使用构造函数和原型的优点。

<script>
    function Person(name, age){
        this.name = name;
        this.age = age;
        //下面这段代码仅仅在初次调用构造函数时才会执行，此后原型已经完成初始化。
        if( typeof this.sayName != "function" ){
            //如果对原型进行修改，能够立即在所有实例中得到反映
            //注意：不能使用对象字面量重写原型，否则会切断现有实例与新原型之间的联系。
            Person.prototype.sayName = function(){
                console.log( this.name );
            };
        }
    }
    var friend = new Person("xiaoxu", 22);
    //第一次调用 sayName() 时会初始化构造函数里的原型
    friend.sayName();   //输出：xiaoxu
</script>

寄生构造函数模式

该函数的作用仅仅是封装创建对象的代码，然后再返回新创建的对象。返回的对象与构造函数外部创建的对象没有什么不同，所以在可以使用其他模式的情况下，不要使用这种模式。

<script>
    function Person(name, age){
        //创建一个函数，该函数的作用仅仅是封装创建对象的代码
        var o = new Object();
        o.name = name;
        o.age = age;
        o.sayName = function(){
            console.log( this.name );
        };
        //返回新创建的对象
        return o;
    }
    var p1 = new Person( "xiaoxu", 22 );
    p1.sayName();   //输出：xiaoxu

    //这个模式可以在特殊的情况下为对象创建构造函数，如果想创建一个具有额外方法的特殊数组，由于不能直接修改 Array 构造函数，因此可以使用这个模式。
    //创建一个名为 NameArray 的构造函数
    function NameArray(){
        //创建数组
        var values = new Array();
        //添加值。用push()方法(用构造函数接收到的所有参数)初始化数组的值
        values.push.apply(values, arguments);
        //添加方法
        values.toPipedString = function(){
            return values.join('|');
        }
        //返回数组。以函数的形式返回数组
        return values;
    }
    var names = new NameArray('xiaoxu', 'mona');    
    console.log( names.toPipedString());    //输出：xiaoxu|mona
</script>

稳妥构造函数模式

 稳妥对象指的是没有公共属性，其方法也不引用 this 的对象。稳妥对象最适合放在一些安全的环境中（这些环境禁用 this 跟 new）, 或者在防止数据被其他应用程序改动时使用。

<script>
    function Person(name, age){
        //创建要返回的对象
        var o = new Object();
        
        //可以在这里定义私有变量和函数
        //添加方法
        o.sayName = function(){
            console.log( name );
        };

        //返回对象
        return o;
    }

    //变量 friend 中保存的是一个稳妥对象，除了调用 sayName() 方法外，没有别的方法可以访问传入够早函数中的原始数据。
    //稳妥构造函数与寄生构造函数有2点不同:
    //1. 新创建对象的实例方法不引用 this
    //2. 不使用 new 操作符调用构造函数
    var friend = Person( "xiaoxu", 22 );
    friend.sayName();   //输出：xiaoxu
</script>