構造函數(shù)的原型對象
- 什么是原型對象
- 每個構造函數(shù)默認都有一個和它相關聯(lián)(<->)的對象侦香，這個對象被稱為構造函數(shù)的原型對象
- 構造函數(shù)找到原型對象： prototype
- 原型對象找到構造函數(shù)： constructor
- 這個原型對象本身是一個對象衍腥，這個對象是 Object 類型，有一個屬性（constructor）
- 原型對象的特點
- 構造函數(shù)的原型對象上面的屬性和方法會被該構造函數(shù)創(chuàng)建的所有對象共享
- 如何訪問原型對象
- 構造函數(shù).prototype
- 對象.proto(前后各兩個下劃線)
- Object.getPrototypeOf(對象)
- 如何使用原型對象
- 利用對象的動態(tài)特性
- 使用字面量的方式來直接替換
- 約定的說法
- 原型對象|原型|原型屬性|構造函數(shù)的原型對象|對象的原型對象|對象的原型
- 推薦說法:構造函數(shù)的原型對象
- 原型對象 - 構造函數(shù) -對象
function Dog(){
}
//構造函數(shù) Dog
//構造函數(shù)的原型對象 Dog.prototype
//原型對象找到構造函數(shù) Dog.prototype.constructor====>Dog
Dog.prototype.name = '默認的名稱';
//Dog.prototype = {name:"默認的名稱"};
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);
原型對象解決函數(shù)共享問題
- 建議
- 屬性寫在對象上面
- 方法寫在構造函數(shù)的原型對象上面
function Person(name){
this.name = name;
}
//設置構造函數(shù)的原型對象
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 上面添加了一個 showName 方法并沒有修改原型對象
p1.showName = function(){
console.log('測試');
}
p1.showName();
p2.showName();
實例化和實例
- 實例化：
- 使用構造函數(shù)創(chuàng)建對象的過程
- 實例（對象）
- 使用構造函數(shù)創(chuàng)建出來的對象被稱為該構造函數(shù)的一個實例對象
-
注意點
我們在說實例對象的時候浸遗。需要致命構造函數(shù)：某個對象是哪個構造函數(shù)的實例對象
function Person(){}
var p1 = new Person();
//p1 是 Person 構造函數(shù)的實例對象
原型的使用方法01
- 使用對象的動態(tài)特性來設置
- 實例成員：實例對象上面的屬性和方法
- 原型成員：構造函數(shù)原型對象上面的屬性和方法
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);
//刪除原型對象上面的屬性
//delete Person.prototype.des
//刪除成功
console.log(p1.des);
//刪除對象中不存在的屬性，返回true
//不能使用下面這種方法直接刪除原型對象上面的屬性
console.log(delete p1.des);
console.log(p1.des;)
原型的使用方法02
- 使用字面量的方式來創(chuàng)建對象替換原型對象
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();
//原型成員會被所有的對象（構造函數(shù)）共享
//改行代碼添加屬性在 p1 上面
p1.des = '測試';
console.log(p2.des);
console.log(p1);
console.log(p2);
p1.friends.push('巴拉巴拉');
console.log(p1);
console.log(p2); //會改變
//使用對象.這種方式來設置屬性的時候壤追，
//如果這個屬性是值類型那么表示添加一個實例屬性 des 不會修改原型屬性
//如果這個屬性是引用類型，那么可以修改到原型屬性
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)建的對象是 Object 創(chuàng)建的
// 該對象的構造函數(shù)是 Object
//該對象的構造函數(shù)也有自己的原型對象 Object,prototype
//該對象的構造函數(shù)也有自己的原型對象內部有構造器屬性 Object.prototype.constructor===>Object
//對象本身并沒有構造器屬性示弓，在訪問該屬性的時候訪問的是其原型對象上面的屬性
Person.prototype = {
//為了防止實例對象的Person.prototype.constructor 指向 Object 我們在這里重新設置其 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);
使用原型對象的注意事項
- 注意設置原型對象的位置
- 在設置（替換）原型對象前后創(chuàng)建的對象所指向的原型對象并不是同一個
// 1.提供構造函數(shù)
function Person(name,age){
this.name = name;
this.age = age;
}
// 3.創(chuàng)建實例對象
var p1 = new Person('張三'.20);
// 2.設置原型對象
Person.prototype = {
constructor:Person,
showName:function(){
console.log(this.name);
}
}
//p1.showName();
var p2 = new Person("李四",20);
p2.showName();
p2.showName();
proto 屬性
- 原型的訪問
- 構造函數(shù).prototype
- 對象.proto
- Object.getPrototypeOf(對象)
- proto 在正式的開發(fā)中不要使用讳侨，這個屬性并不是 ECMA標準里面的屬性，只是部分瀏覽器廠商提供的一個屬性奏属，方便調試的
- ES6 中納入了標準
hasOwnProperty 方法
- hasOwnProperty 是否擁有指定的實例屬性（不包含原型成員）
- in 關鍵字跨跨，檢查對象中是否存在某個指定的屬性(實例成員 + 原型成員)
function Person(name){
this.name = name;
}
Person.prototype.hi = 'hi';
var p1 = new Person();
//語法 對象.hasOwnProperty ('屬性')
console.log(p1.hasOwnProperty('name')); // true
console.log(p1.hasOwnProperty('age')); //false
console.log(p1.hasOwnProperty('hi')); //false
//語法 ‘屬性’ in 對象
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 構造函數(shù)的原型對象
//判斷 o 是否是 p1 的原型對象
console.log(Object.prototype.isPrototypeOf(p1));
思考
- 每個對象都是由構造函數(shù)創(chuàng)建的
- 每個構造函數(shù)都有原型對象
- 構造函數(shù)的原型對象本身也是對象
- 因此構造函數(shù)的原型對象也有構造函數(shù)
- 構造函數(shù)的原型對象的構造函數(shù)也有原型對象
- 終端是 Object.prototype
