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"

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

最后编辑于：2017.12.07 17:20:06

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,530评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 86,403评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,120评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,770评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,758评论 5赞 367
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,649评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,021评论 3赞 398
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,675评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,931评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,659评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,751评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,410评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,004评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,969评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,203评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,042评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,493评论 2赞 343