JavaScript面向对象(高程六章)

6.2 创建对象

1.工厂模式   2.构造函数模式   3.原型模式

6.2.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);
    }
}
var person1 = createPerson("Nicholas",29,"Software Engineer");
var person2 = createPerson("Greg",27,"Doctor");

函数createPerson()能够根据接受的参数来构建一个包含所有必要信息的Person对象。没有解决对象识别的问题，即怎么知道一个对象的类型。

6.2.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,"Soft");
var person2 = new  Person("Greg",27,"Doctor");

这个例子中，Person()函数取代了createPerson()函数。
不同之处：

1.没有显式地创建对象；
2.直接将属性和方法赋给了this对象;
3.没有return语句。

按照惯例，构造函数应该始终以大写字母开头！

在前面的例子中，person1和person2分别保存着Person的一个不同的实例。这两个对象都有一个constructor（构造函数）属性，该属性指向Person,如下所示：

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

注：构造函数也是函数

如果不通过new操作符来调用，那他和普通函数一样。属性和方法都被添加给window对象了。

构造函数的缺点

每个方法都要在每个实例上重新创造一遍。

前面的例子中，person1和person2都有一个名为sayName()的方法，但这两个方法不是同一个Function的实例。

因为函数是对象，因此每定义一个函数，也就是实例化了一个对象。

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

6.2.3 原型模式

我们创建的每个函数都有一个prototype（原型）属性，这个属性是一个指针，指向一个对象，这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。

prototype就是通过调用构造函数而创建的那个对象实例的原型对象。

好处是让所有的对象实例共享原型所包含的属性和方法。

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”

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

1.理解原型：

只要创建一个新函数，就会根据一组特定的规则为该函数创建一个prototype属性，这个属性指向函数的原型对象。

默认情况下，所有原型对象都会自动获得一个constructor（构造函数）属性，这个属性包含一个指向prototype属性所在函数的指针。

Person.prototype.constructor指向构造函数Person.

创建自定义构造函数之后，其原型对象默认只会取得constructor属性；其他方法都是从object继承而来。

调用构造函数创建一个新实例之后，该实例内部将包含一个指针（内部属性），指向构造函数的原型对象。这个指针叫做 [[Prototype]](chrome浏览器中实现为_proto_)。

重要的一点是，这个链接存在于实例和构造函数的原型之间，而不存在与实例和构造函数之间。

6-1.jpg

如图6-1，Person.prototype指向原型对象，而Person.prototype.cnsrtuctor又指回了Person。
原型对象中除了包含constructor属性之外，还包括后来添加的其他属性。Person的每个实例person1和person2都包含一个内部属性，该属性仅指向原型对象；换言之，他们和构造函数没有直接的关系。

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

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

每当代码读取某个对象的某个属性时，都会执行一次搜索，首先对实例本身进行搜索，如果在实例中找到了该属性，就返回该属性的值；如果没找到，就继续搜索指针指向的原型对象，在原型中查找。

实例可以读取原型中的属性值，但是不能重写原型中的值。如果在实例中添加原型中的同名属性，就会屏蔽原型中的那个属性。（搜索时先在实例中寻找，找到后就不搜素原型了，所以屏蔽了）。
这样只会阻止我们访问原型中的属性，但不会修改原型的属性。

delete person1.name
//可以删除实例person1的name属性，删除后就可以继续读取原型上的name属性了。

//hasOwnProperty()方法可以判断给定属性是存在原型中，还是存在实例中。
//hasOwnProperty()方法继承自Object。给定属性存在于实例中时，返回true。

function Person(){}

Person.prototype.name = "Nic";
Person.prototype.age = 29;

var person1 = new Person();
person1.name = "Tom";
alert(person1.hasOwnProperty("name"));   //true(Tom来自实例的属性)
alert(person1.hasOwnProperty("age"));    //false

Object.getOwnPropertyDescriptor()方法只能用于实例属性，要想取得原型属性的描述符，必须直接在原型对象上调用Object.getOwnPropertyDescriptor()

2.原型与in操作符：

单独使用in，通过对象能够访问的属性时返回true，无论属性是实例的还是原型的。

因此，只要in返回true，而hasOwnProperty()返回false，就可以确定属性是原型中的属性。

function Person(){}

Person.prototype.name = "Nic";
Person.prototype.age = 29;

var person1 = new Person();
person1.name = "Tom";
alert("name" in person1);   //true
alert("age" in person1);   //true
alert(person1.hasOwnProperty("name"));   //true(Tom来自实例的属性)
alert(person1.hasOwnProperty("age"));    //false

要取得对象上所有可枚举的实例属性，可以使用Object.keys()方法。该方法接受一个对象参数，返回一个包含所有可枚举属性的字符串数组。

如果要取得所有实例属性，无论时候可以枚举，都可以使用Object.getOwnPropertyName()方法。

3.更简单的原型语法：

function Person(){}

Person.prototype = {
    name : "Nic",
    age : 29,
    sayName : function(){
        alert(this.name);
    }
}

如上，我们把Person.prototype 设置为一个以对象字面量形式创建的新对象（它的构造函数为为Object() ）。

最终结果虽然相同，但是constructor属性不在指向原本的构造函数Person。因为我们这里的语法本质上完全重写了默认的原型对象，因此constructor属性也成了新对象（以对象字面量形式创建的新对象）的constructor，指向了Object构造函数。

如果constructor值真的很重要，可以特意把它设置回适当的值：

function Person(){}

Person.prototype = {
    constructor : Person,
    name : "Nic",
    age : 29,
    sayName : function(){
        alert(this.name);
    }
}

但是这种方式会导致它的[[Enumerable]]特性被设置为true。默认情况下，原生的constructor属性是不可枚举的，所以可以尝试使用Object.defineProperty()。

function Person(){}

Person.prototype = {
    name : "Nic";
    age : 29;
    sayName : function(){
        alert(this.name);
    }
}

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 : "Nic",
    age : 29,
    sayName : function(){
        alert(this.name);
    }
} 

friend.sayName();  //报错

上面先创建了Person的一个实例，然后重写了其原型对象。然后调用friend.sayName()出错，因为friend指向的原型中不包含该属性，重写原型对象切断了现有原型与任何之前已经存在的对象实例之间的联系，它们引用的仍然是最初的原型。

5.原生对象的原型：略。

6.原型对象的问题：

原型中的所有属性被很多实例共享，这对于函数很合适，对包含基本值得属性也说得过去。但是对于引用类型值得属性来说，问题非常突出。

引用类型值在实例上修改原型上也会被修改，从而影响所有实例。

function Person(){}

Person.prototype =  {
    constructor : Person;
    name : "Nic",
    age : 29,
    friends : ['A','B'],
    sayName : function(){
        alert(this.name)
    }
} 

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

person1.friends.push("C");

alert(person1.friends);    //'A','B','C'
alert(person2.friends);    //'A','B','C'
alert(person2.friends  === person1.friends );    //true

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

function Person(name,  age){
    this.name = name;
    this.age = age;
    this.friends = ['A','B']
}

Person.prototype = {
    constructor : Person;
    sayName : function(){
        alert(this.name)
    }
}

var  person1 = new Person('Tom', 29);
var  person2 = new Person('Greg', 22);

person1.friends.push("C");

alert(person1.friends);    //'A','B','C'
alert(person2.friends);    //'A','B'
alert(person2.friends  === person1.friends );    //false
alert(person2.sayName  === person1.sayName );    //true

6.2.5 动态原型模式

function Person(name,  age){
    //属性
    this.name = name;
    this.age = age;
    this.friends = ['A','B']
    //方法
    if(typeof this.sayName != 'function'){
        Person.prototype.sayName =function(){
            alert(this.name)
        } ;
    }
}

在sayName()方法不存在时，才把他添加到原型，又因为原型的动态性，所以原型的修改能在所有实例中表现出来。

6.2.6 寄生构造函数模式(不推荐)

function Person(name,  age){
    var o = new Object(); 
    o.name = name;
    o.age = age;
    o.sayName =function(){
        alert(this.name)
     }
    return o
}

var person1 = new Person('Tom', 29);

6.2.6 稳妥构造函数模式

function Person(name,  age){
    var o = new Object(); 
    
    o.sayName =function(){
        alert(name)
     }
    return o
}

var person1 = new Person('Tom', 29);

除了调用sayName（）方法，没有其他方法访问name的值。

6.3 继承

Javascript只支持实现继承，主要依靠原型链来继承。

6.3.1 原型链

每个构造函数都有一个原型对象，原型对象都包含一个指针指向构造函数，而实例都包含一个指向原型的内部指针。
假如让原型对象等于另一个类型的实例，此时原型对象将包含一个指针指向另一个原型，相应的，另一个原型中也包含着指向另一个构造函数的指针。
上述关系层层递进，形成原型链。

function SuperType() {
    this.property = true;
}

SuperType.prototype.getSuperValue = function() {
    return this.property;
};

function SubType(){
    this.subproperty = false;
}

SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function(){
    return this.subproperty;
}

var instance = new SubType();
alert(instance.getSuperValue());    //true

SubType继承了SuperType，继承是通过创建SuperType的实例，并将该实例赋值给SubType.prototype实现的。
实现的本质是对原型的重写。

6-4.png

我们没有使用SubType的默认原型，而是给他换了一个新原型；这个新原型就是SuperType的实例。
最终结果：instance指向SubType的原型，SubType的原型指向SuperType的原型。

getSuperValue（）方法仍然在SuperType.prototype中，但property在SubType.prototype中，因为property是一个实例属性。

instance.constructor现在指向的是SuperType，这是因为原来SubType.prototype中的constructor被重写了（实际上不是因为重写，而是SubType的原型指向了SuperType的原型，而这个原型对象的constructor指向的是SuperType）。

最后编辑于：2017.12.06 04:46:34

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