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

创建对象

Object构造函数或对象字面量创建对象的缺点是使用同一个接口创建很多对象。

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("Icey",25,"Softerware Engineer");
var person2 = createPerson("Root",21,"Softerware Engineer");
2.构造函数模式

构造函数可以用来创建特定类型的对象。

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

var person1 = new Person("Icey",25,"Softerware Engineer");
var person2 = new Person("Root",21,"Softerware Engineer");
  • 没有显示的创建对象;
  • 直接将属性和方法赋给了this对象;
  • 没有return语句。
    按照惯例,构造函数始终都应该以一个大写字母开头。构造函数本身也是函数,只不过是用来创建对象而已。
    要创建Person的新实例,必须使用new操作符:
  • (1) 创建一个新对象
  • (2) 将构造函数的作用域赋给新对象(因此this就指向了这个新对象)
  • (3) 执行构造函数中的代码(为这个新对象添加属性)
  • (4) 返回新对象

person1和person2分别保存这Person的一个不同的实例,这两个对象都有一个constructor(构造函数)属性,该属性指向Person。

alert(person1.constructor == Person); //true
alert(person2.constructor == Person); //true

constructor属性用来表示对象类型,检测对象类型用instanceof操作符更可靠。

alert(person1 instanceof Object);//true
alert(person1 instanceof Person);//true
alert(person2 instanceof Object);//true
alert(person2 instanceof Person);//true

创建自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型;这正式构造函数模式胜过工厂模式的地方。
以这种方式定义的构造函数是定义在Global对象中的。

1.将构造函数当作函数

构造函数与其他函数的唯一区别,就在于调用它们的方式。任何函数,只有通过new操作符来调用,那它就可以作为构造函数。

//当作构造函数使用
var person = new Person("Icey",25,"Softerware Engineer");
person.sayName(); //"Icey"

//作为普通函数调用
Person("Root",24,"Softerware Engineer"); //添加到window 
window.sayName(); //"Root"

//在另一个对象的作用域中调用
var o = new Object();
Person.call(o,"Icey",25,"Softerware Engineer");
o.sayName(); //"Icey"

2.构造函数问题

构造函数的主要问题,就是每个方法都要在每个实例上重新创建一遍。
ECMAScript中的函数是对象,因此每定义一个函数,也就是实例化了一个对象。

function Person(name,age,job) {
    this.name = name;
    this.age = age;
    this.job = job;
    //与声明函数在逻辑上是等价的
    this.sayName = new Function("alert(this.name)"); 
}

每个Person实例都包含一个不同的Function实例。以这种方式创建函数,会导致不同的作用域链和标识符解析,但创建Function的机制任然是相同的。不同实例上的同名函数是不想等的。

alert(person1.sayName == person2.sayName); //false

可以通过把函数定义转移到构造函数外面来解决这个问题。

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

var person1 = Person("Icey",25,"Softerware Engineer");
var person2 = Person("Root",21,"Softerware Engineer");

sayName包含的是一个指向函数的指针,因此person1和person2对象共享了全局作用域中定义的同一个sanName()函数。可是这样,自定义的引用类型就没有封装性可言可,通过原型模式可以解决。

3.原型模式

创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,这个对象的用途是包含可以有特定类型的所有实例共享的属性和方法。
prototype就是通过调用构造函数而创建的那个对象实例的原型对象。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。

function Person() {
}

Person.prototype.name = "Icey";
Person.prototype.age = 25;
Person.prototype.job = "Softerware Engineer";
Person.prototype.sayName = function () {
    alert(this.name);
};

var person1 = new Person();
person1.sayName(); //"Icey"

var person2 = new Person();
person2.sayName(); //"Icey"

alert(person1.sayName == person2.sayName); //true

1.理解原型对象

无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象。在默认情况下,所有原型对象会自动获得一个constructor(构造函数)属性,这个属性是一个指向prototype属性所在函数的指针。Person.prototype.constructor指向Person。通过构造函数,可以继续为原型对象添加属性和方法。
创建了自定义的构造函数之后,其原型对象只会取得constructor属性,至于其他方法都是从Object继承而来。当调用构造函数创建一个新实例后,该实例的内部将包含一个指针(内部属性),指向构造函数的原型对象。ECMA-262第5版管这个指针叫[[Prototype]]。虽然脚本中没哟标准方式访问[[Prototype]],但Firefox、Safari和Chrome在每个对象上都支持一个属性__proto__。这个连接存在与实例与构造函数的原型对象之间,而不是存在与实例与构造函数之间。

原型对象

虽然所有实现中都无法访问到[[Prototype]],但可以通过isPrototypeOf()方法来确定对象之间是否存在这种关系。

alert(Person.prototype.isPrototypeOf(person1));//true
alert(Person.prototype.isPrototypeOf(person2));//true

ECMAScript5增加了,Object.getPrototypeOf(),这个方法返回[[Prototype]]的值。

alert(Object.getPrototypeOf(person1) == Person.prototype);//true
alert(Object.getPrototypeOf(person).name);//"Icey"

这在利用原型实现继承的情况下非常重要。

每当代码读取某个对象的属性是,都会执行一次搜索,目标是具有给定名字的属性。搜索首先从对象实例本身开始,如果实例中找到了,具有给定名字的属性,则返回该属性的值,如果没有找到,则继续搜索指针指向的原型对象,在原型对象中查找具有给定名字的属性。如果原型对象中找到了,则返回该属性的值。
原型最初值包含constructor属性。

function Person() {
}

Person.prototype.name = "Icey";
Person.prototype.age = 25;
Person.prototype.job = "Softerware Engineer";
Person.prototype.sayName = function () {
    alert(this.name);
};

var person1 = new Person();
var person2 = new Person();
person1.name = "Greg";
person1.sayName(); //"Greg" 来自实例
person2.sayName(); //"Icey" 来自原型

当为对象实例添加一个属性时,这个属性就会屏蔽原型对象中保存的同名属性。

function Person() {
}

Person.prototype.name = "Icey";
Person.prototype.age = 25;
Person.prototype.job = "Softerware Engineer";
Person.prototype.sayName = function () {
    alert(this.name);
};

var person1 = new Person();
var person2 = new Person();
person1.name = "Greg";
person1.sayName(); //"Greg" 来自实例
person2.sayName(); //"Icey" 来自原型、

delete person1.name;
alert(person1.name); //"Icey" 来自原型

使用delete操作符可以完全删除实例属性,能够重新访问原型中的属性。

hsaOwnProperty()方法可以检测属性存在与实例中,还是存在与原型中。

function Person() {
}

Person.prototype.name = "Icey";
Person.prototype.age = 25;
Person.prototype.job = "Softerware Engineer";
Person.prototype.sayName = function () {
    alert(this.name);
};

var person1 = new Person();
var person2 = new Person();

alert(person1.hasOwnProperty("name")); //false

person1.name = "Greg";
alert(person1.name);//"Greg" 来自实例
alert(person1.hasOwnProperty("name")); //true

alert(person1.name); //"Icey" 来自原型
alert(person1.hasOwnProperty("name")); //false

delete person1.name;
alert(person1.name);//"Icey" 来自原型
alert(person1.hasOwnProperty("name")); //false
实例与原先的关系

2.原型与in操作符
有两种方式使用in操作符:单独使用和在for-in循环中使用。在单独使用时,in操作符会在通过对象能够访问给定属性是返回true,无论改属性存在于实例中还是原型中。

function Person() {
}

Person.prototype.name = "Icey";
Person.prototype.age = 25;
Person.prototype.job = "Softerware Engineer";
Person.prototype.sayName = function () {
    alert(this.name);
};

var person1 = new Person();
var person2 = new Person();

alert(person1.hasOwnProperty("name")); //false
alert("name" in person1);//true

person1.name = "Greg";
alert(person1.name);//"Greg" 来自实例
alert(person1.hasOwnProperty("name")); //true
alert("name" in person1);//true

alert(person1.name); //"Icey" 来自原型
alert(person1.hasOwnProperty("name")); //false
alert("name" in person1);//true

delete person1.name;
alert(person1.name);//"Icey" 来自原型
alert(person1.hasOwnProperty("name")); //false
alert("name" in person1);//true

···

确定属性是原型中的属性

function hasPrototypeProperty(object,name) {
    return !object.hasOwnProperty(name) && (name in object);
}
function Person() {
}

Person.prototype.name = "Icey";
Person.prototype.age = 25;
Person.prototype.job = "Softerware Engineer";
Person.prototype.sayName = function () {
    alert(this.name);
};

var person = new Person();
alert(hasPrototypeProperty(person,"name")); //true
person.name = "Greg";
alert(hasPrototypeProperty(person,"name")); //false

使用for-in循环时,返回的是所有能够通过对象访问的、可枚举的属性,既包括存在与实例中的属性,也包括存在于原型中的属性。屏蔽了原型中不可枚举的属性([[Enumerable]]标记为false的属性)的实例也会在for-in循环中返回。

Object.keys()方法接收一个对象作为参数,返回一个包含所有可枚举属性的字符串数组

function Person() {
}

Person.prototype.name = "Icey";
Person.prototype.age = 25;
Person.prototype.job = "Softerware Engineer";
Person.prototype.sayName = function () {
    alert(this.name);
};

var keys = Object.keys(Person.prototype);
alert(keys);//"name,age,job,sayName"

var p1 = new Person();
p1.name = "Rob";
p1.age = 22;
var p1keys = Object.keys(p1);
alert(p1keys);//"name,age"

Object.getOwnPropertyNames()可以得到所有实例属性。

var keys = Object.getOwnPropertyNames(Person.prototype);
var keys = Object.getOwnPropertyNames(Person.prototype);
alert(keys);//"constructor,name,age,job,sayName"

3.更简单的原型语法
用一个包含所有属性和方法的对象字面量来重写整个原型对象。

       function Person() {}
        Person.prototype = {
            name: "Icey",
            age: 25,
            job: "Softerware Engineer",
            sayName: function() {
                alert(this.name);
            }
        }

constructor属性不再指向Person了。

      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真的很重要,可以特意将它设置回适当的值。

        function Person() {}
        Person.prototype = {
            constructor: Person,
            name: "Icey",
            age: 25,
            job: "Softerware Engineer",
            sayName: function() {
                alert(this.name);
            }
        }

这种方式重设constructor属性会导致它的[[Enumerable]]特性被设置为true。默认情况下,原生的construcor属性是不可枚举的。

        //重设构造函数,只是用于ECMAScript兼容的浏览器
        Object.defineProperty(Person.prototype,"constructor",{
            enumerable: false,
            value: Person
        });

4.原型的动态性

        var friend = new Person();
        Person.prototype.sayHi = function () {
            alert('hi');
        };
        friend.sayHi();//"hi"

实例中的指针指向原型, 而不指向构造函数。

        function Person() {}
        
        var friend = new Person();

        Person.prototype = {
            constructor: Person,
            name: "Icey",
            age: 25,
            job: "Softerware Engineer",
            sayName: function() {
                alert(this.name);
            }
        };

        friend.sayName();//error

先创建Person的一个实例,有重写了其原型对象。

重写原型对象

重写原型对象切断了现有原型与任何之前已经存在的对象实例之间的联系;它们引用的任然是最初的原型。

5.原生动态原型
原生的引用类型也采用这种原型模式创建,所有原生引用类型(Object、Array、String等)都在其构造函数的原型上定义了方法。

        alert(typeof Array.prototype.sort);//"function"
        alert(typeof String.prototype.substring);//"function"

可以通过原生对象的原型定义新方法。

        String.prototype.satrtsWith = function (text) {
            return this.indexOf(text) == 0;
        };

        var msg = "Hello world!";
        alert(msg.satrtsWith("Hello"));//true

当前环境中所有字符串都可以调用它。

6.原型对象的问题
原型中的共享对于包含引用类型值的属性来说,问题比较突出。

function Person() {}

        Person.prototype = {
            constructor: Person,
            name: "Icey",
            age: 25,
            job: "Softerware Engineer",
            friends:["Shelby","Court"],
            sayName: function() {
                alert(this.name);
            }
        };

        var person1 = new Person();
        var person2 = new Person();

        person1.friends.push("Van");

        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 = ["Shellby","Court"];
        }

        Person.prototype = {
            constructor: Person,
            sayName: function () {
                alert(this.name);
            }
        };
        
        var person1 = new Person("Icey",25,"Softerware Engineer");
        var person2 = new Person("Root",22,"Softerware Engineer");

        person1.friends.push("Van");
        alert(person1.friends);//"Shelby,Count,Van"
        alert(person2.friends);//"Shelby,Count"
        alert(person1.friends === person2.friends);//false
        alert(person1.sayName == person2.sayName); //true
5.动态原型模式

通过检测某个应该存在的方法是否有效,来决定是否需要初始化原型。

        function Person(name,age,job) {
            //属性
            this.name = name;
            this.age = age;
            this.job = job;
            //方法
            if (typeof this.sayName != "function") {
                Person.prototype.sayName = function () {
                    alert(this.name);
                };
            }
        }

        var friend = new Person("Icey",25,"Softerware Engineer");
        friend.sayName();
6.寄生构造函数模式

创建一个函数,封装创建对象的代码,再返回新创建的对象。

        function Person(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 friend = new Person("Icey",25,"Softerware Engineer");
        friend.sayName();//"Icey"

通过在构造函数的末尾添加一个return语句,可以重写调用构造函数时的返回值。
这个模式可以在特殊情况下用来为对象创建构造函数。假设我们像创建一个具有额外方法的特殊数组,由于不能直接修改Array构造函数,可以使用这个模式。

function SpecialArray() {
            //创建数组
            var values = new Array();
            //添加值
            values.push.apply(values,arguments);
            //添加方法
            values.toPipedString = function () {
                return this.join("|");
            };

            return values;
        }

        var colors = new SpecialArray("red","blue","green");
        alert(colors.toPipedString());//"red|blue|green"
7.稳妥构造函数模式

稳妥对象没有公共属性,新创建的实例方法不引用this,不使用new操作符调用构造函数。

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

在以这种模式创建的对象中,除了使用sayName()方法之外,没有其他办法访问name的值。

          var friend = Person("Icey",25,"Softerware Engineer");
          friend.sayName();//"Icey"

它非常适合在某些安全执行环境。

推荐阅读更多精彩内容