構(gòu)造函數(shù)的原型對(duì)象

• 什么是原型對(duì)象
• 每個(gè)構(gòu)造函數(shù)默認(rèn)都有一個(gè)和它相關(guān)聯(lián)(<->)的對(duì)象，這個(gè)對(duì)象被稱為構(gòu)造函數(shù)的原型對(duì)象
• 構(gòu)造函數(shù)找到原型對(duì)象： prototype
• 原型對(duì)象找到構(gòu)造函數(shù)： constructor
• 這個(gè)原型對(duì)象本身是一個(gè)對(duì)象，這個(gè)對(duì)象是 Object 類型，有一個(gè)屬性（constructor）
• 原型對(duì)象的特點(diǎn)
• 構(gòu)造函數(shù)的原型對(duì)象上面的屬性和方法會(huì)被該構(gòu)造函數(shù)創(chuàng)建的所有對(duì)象共享
• 如何訪問原型對(duì)象
• 構(gòu)造函數(shù).prototype
• 對(duì)象.proto(前后各兩個(gè)下劃線)
• Object.getPrototypeOf(對(duì)象)
• 如何使用原型對(duì)象
• 利用對(duì)象的動(dòng)態(tài)特性
• 使用字面量的方式來直接替換
• 約定的說法
• 原型對(duì)象|原型|原型屬性|構(gòu)造函數(shù)的原型對(duì)象|對(duì)象的原型對(duì)象|對(duì)象的原型
• 推薦說法:構(gòu)造函數(shù)的原型對(duì)象
• 原型對(duì)象 - 構(gòu)造函數(shù) -對(duì)象

function Dog(){
}
//構(gòu)造函數(shù) Dog
//構(gòu)造函數(shù)的原型對(duì)象 Dog.prototype
//原型對(duì)象找到構(gòu)造函數(shù) Dog.prototype.constructor====>Dog
Dog.prototype.name = '默認(rèn)的名稱';
//Dog.prototype = {name:"默認(rèn)的名稱"};
console.log(Dog.prototype);
var dog1 = new Dog();
var dog2 = new Dog();
console.log(dog1.name);
console.log(dog2.name);
console.log(dog1.__proto__ == Dog.prototype);
console.log(Object.getPrototypeOf(dog2) == Dog.prototype);

原型對(duì)象解決函數(shù)共享問題

• 建議
• 屬性寫在對(duì)象上面
• 方法寫在構(gòu)造函數(shù)的原型對(duì)象上面

function Person(name){
        this.name = name;
}
//設(shè)置構(gòu)造函數(shù)的原型對(duì)象
Person.prototype.showName = function(){
        console.log(this.name);
}
var p1 = new Person('張三');
var p2 = new Person('張三豐');
p1.showName();
p2.showName();
console.log(p1.showName == p2.showName);
//注意：下面的代碼在 p1 上面添加了一個(gè) showName 方法并沒有修改原型對(duì)象
p1.showName = function(){
  console.log('測(cè)試');
}
p1.showName();
p2.showName();

實(shí)例化和實(shí)例

• 實(shí)例化：
• 使用構(gòu)造函數(shù)創(chuàng)建對(duì)象的過程
• 實(shí)例（對(duì)象）
• 使用構(gòu)造函數(shù)創(chuàng)建出來的對(duì)象被稱為該構(gòu)造函數(shù)的一個(gè)實(shí)例對(duì)象
• 注意點(diǎn)
  我們?cè)谡f實(shí)例對(duì)象的時(shí)候。需要致命構(gòu)造函數(shù)：某個(gè)對(duì)象是哪個(gè)構(gòu)造函數(shù)的實(shí)例對(duì)象

function Person(){}
var p1 = new Person();
//p1 是 Person 構(gòu)造函數(shù)的實(shí)例對(duì)象

原型的使用方法01

• 使用對(duì)象的動(dòng)態(tài)特性來設(shè)置
• 實(shí)例成員：實(shí)例對(duì)象上面的屬性和方法
• 原型成員：構(gòu)造函數(shù)原型對(duì)象上面的屬性和方法

function Person(name,age){
        this.name = name;
        this.age = age;
}
Person.prototype.showName = function(){
        console.log(this.name);
}
Person.prototype.des = '描述信息';
var p1 = new Person('張三'，20);
console.log(p1);
console.log(Person.prototype);
//刪除原型對(duì)象上面的屬性
//delete Person.prototype.des
//刪除成功
console.log(p1.des);
//刪除對(duì)象中不存在的屬性，返回true
//不能使用下面這種方法直接刪除原型對(duì)象上面的屬性
console.log(delete p1.des);
console.log(p1.des;)

原型的使用方法02

• 使用字面量的方式來創(chuàng)建對(duì)象替換原型對(duì)象

function Person(name,age){
          this.name = name;
          this.age = age;
}
Person.prototype = {
          showName:function(){
                  console.log(this.name);
            },
           showAge:function(){
                  console.log(this.age);
            },
            des:'描述信息';
            friends:['嗚啦嗚啦','嘩啦嘩啦','滴答滴答'];
};
var p1 = new Person('張三',20);
var p2 = new Person('張四',20);
p1.showName();
p2.showName();
//原型成員會(huì)被所有的對(duì)象（構(gòu)造函數(shù)）共享
//改行代碼添加屬性在 p1 上面
p1.des = '測(cè)試';
console.log(p2.des);
console.log(p1);
console.log(p2);
p1.friends.push('巴拉巴拉');
console.log(p1);
console.log(p2);  //會(huì)改變

//使用對(duì)象.這種方式來設(shè)置屬性的時(shí)候，
//如果這個(gè)屬性是值類型那么表示添加一個(gè)實(shí)例屬性 des 不會(huì)修改原型屬性
//如果這個(gè)屬性是引用類型，那么可以修改到原型屬性
Person.prototype.des = '0000';
console.log(p1.des);
console.log(p2.des);

function Person(name,age){
        this.name = name;
        this.age = age ;
}
//Person.prototype.hi = 'hi';
//var o = {};
//var o = new Object();
//字面量創(chuàng)建的對(duì)象是 Object 創(chuàng)建的 
// 該對(duì)象的構(gòu)造函數(shù)是 Object
//該對(duì)象的構(gòu)造函數(shù)也有自己的原型對(duì)象 Object,prototype
//該對(duì)象的構(gòu)造函數(shù)也有自己的原型對(duì)象內(nèi)部有構(gòu)造器屬性 Object.prototype.constructor===>Object
//對(duì)象本身并沒有構(gòu)造器屬性，在訪問該屬性的時(shí)候訪問的是其原型對(duì)象上面的屬性
Person.prototype = {
          //為了防止實(shí)例對(duì)象的Person.prototype.constructor 指向 Object 我們?cè)谶@里重新設(shè)置其 constructor 屬性
          constructor:Person,
          showName:function(){
                  console.log(this.name);
          },
          showAge:function(){
                   console.log(this.age);
          }
};
var p1 = new Person('張三',20);
console.log(Person.prototype.constructor == Person);
console.log(p1);

使用原型對(duì)象的注意事項(xiàng)

• 注意設(shè)置原型對(duì)象的位置
• 在設(shè)置（替換）原型對(duì)象前后創(chuàng)建的對(duì)象所指向的原型對(duì)象并不是同一個(gè)

// 1.提供構(gòu)造函數(shù)
function Person(name,age){
        this.name = name;
        this.age = age;
}
// 3.創(chuàng)建實(shí)例對(duì)象
var p1 = new Person('張三'.20);
// 2.設(shè)置原型對(duì)象
Person.prototype = {
        constructor:Person,
        showName:function(){
                console.log(this.name);
        }
}
//p1.showName();
var p2 = new Person("李四",20);
p2.showName();
p2.showName();

proto 屬性

• 原型的訪問
• 構(gòu)造函數(shù).prototype
• 對(duì)象.proto
• Object.getPrototypeOf(對(duì)象)
• proto 在正式的開發(fā)中不要使用，這個(gè)屬性并不是 ECMA標(biāo)準(zhǔn)里面的屬性，只是部分瀏覽器廠商提供的一個(gè)屬性，方便調(diào)試的
• ES6 中納入了標(biāo)準(zhǔn)

hasOwnProperty 方法

• hasOwnProperty 是否擁有指定的實(shí)例屬性（不包含原型成員）
• in 關(guān)鍵字，檢查對(duì)象中是否存在某個(gè)指定的屬性(實(shí)例成員 + 原型成員)

function Person(name){
        this.name = name;
}
Person.prototype.hi = 'hi';
var p1 = new Person();
//語(yǔ)法 對(duì)象.hasOwnProperty ('屬性')
console.log(p1.hasOwnProperty('name')); // true
console.log(p1.hasOwnProperty('age'));  //false
console.log(p1.hasOwnProperty('hi')); //false

//語(yǔ)法 ‘屬性’  in 對(duì)象
console.log('name' in p1);   //true
console.log('age' in p1 );    //false
console.log('hi' in p1);    //true

isPrototype 方法

function Person(name){
        this.name = name;
}
var obj = {};
var o = {
        hi:'hi'
};
Person.prototype = o;
var p1 = new Person('李四')；
//Object.prototype  Object 構(gòu)造函數(shù)的原型對(duì)象
//判斷 o 是否是 p1 的原型對(duì)象
console.log(Object.prototype.isPrototypeOf(p1));

思考

• 每個(gè)對(duì)象都是由構(gòu)造函數(shù)創(chuàng)建的
• 每個(gè)構(gòu)造函數(shù)都有原型對(duì)象
• 構(gòu)造函數(shù)的原型對(duì)象本身也是對(duì)象
• 因此構(gòu)造函數(shù)的原型對(duì)象也有構(gòu)造函數(shù)
• 構(gòu)造函數(shù)的原型對(duì)象的構(gòu)造函數(shù)也有原型對(duì)象
• 終端是 Object.prototype