原型prototype
- 我們所創(chuàng)建的每一個函數(shù)雕崩，解析器都會向函數(shù)中添加一個屬性prototype，這個屬性對應著一個對象狸吞，這個對象就是我們所謂的原型對象
- 如果函數(shù)作為普通函數(shù)調用prototype沒有任何作用
- 當函數(shù)以構造函數(shù)的形式調用時勉耀，它所創(chuàng)建的對象中都會有一個隱含的屬性指煎，指向該構造函數(shù)的原型對象，我們可以通過 _ _proto_ _ 來訪問該屬性.
- 原型對象就相當于一個公共的區(qū)域瑰排，所有同一個類的實例都可以訪問到這個原型對象贯要，我們可以將對象中共有的內容暖侨，統(tǒng)一設置到原型對象中椭住。
function MyClass(){
}
MyClass.prototype.a = 123; //向MyClass的原型中添加屬性a
MyClass.prototype.sayHello = function(){ //向MyClass的原型中添加一個方法
alert("hello");
};
- 當我們訪問對象的一個屬性或方法時，它會先在對象自身中尋找字逗，如果有則直接使用.如果沒有則會去原型對象中尋找京郑，如果找到則直接使用
以后我們創(chuàng)建構造函數(shù)時，可以將這些對象共有的屬性和方法葫掉，統(tǒng)一添加到構造函數(shù)的原型對象中些举，這樣不用分別為每一個對象添加，也不會影響到全局作用域俭厚，就可以使每個對象都具有這些屬性和方法了
圖片.png
函數(shù)的prototype屬性
- 每個函數(shù)都有一個prototype屬性, 它默認指向一個Object空對象(即稱為: 原型對象)
- 原型對象中有一個屬性constructor, 它指向函數(shù)對象
- prototype對象有一個constructor屬性户魏，默認只想prototype對象所在的構造函數(shù)。
- 作用：constructor屬性作用挪挤，是分辨原型對象到底屬于哪個構造函數(shù)叼丑。
圖片.png
// 每個函數(shù)都有一個prototype屬性, 它默認指向一個對象(即稱為: 原型對象)
console.log(Date.prototype, typeof Date.prototype)
function fn() {
}
console.log(fn.prototype, typeof fn.prototype)
// 原型對象中有一個屬性constructor, 它指向函數(shù)對象
console.log(Date.prototype.constructor===Date) //ture
console.log(fn.prototype.constructor===fn) //ture
給原型對象添加屬性(一般都是方法)
- 作用: 函數(shù)的所有實例對象自動擁有原型中的屬性(方法)
// 2. 給原型對象添加屬性(一般都是方法)
function F() {
}
F.prototype.age = 12 //添加屬性
F.prototype.setAge = function (age) { // 添加方法
this.age = age
}
// 創(chuàng)建函數(shù)的實例對象
var f = new F()
console.log(f.age)
f.setAge(23)
console.log(f.age)
顯式原型與隱式原型
- 每個函數(shù)function都有一個prototype，即顯式原型
- 每個實例對象都有一個_ _proto_ _扛门，可稱為隱式原型
- 對象的隱式原型的值為其對應構造函數(shù)的顯式原型的值
- 內存結構(圖)
- 總結:
- 函數(shù)的prototype屬性: 在定義函數(shù)時自動添加的, 默認值是一個空Object對象
- 對象的_ _proto_ _屬性: 創(chuàng)建對象時自動添加的, 默認值為構造函數(shù)的prototype屬性值
- 程序員能直接操作顯式原型, 但不能直接操作隱式原型(ES6之前)
//定義構造函數(shù)
function Fn() { // 內部語句: this.prototype = {}
}
// 1. 每個函數(shù)function都有一個prototype鸠信，即顯式原型屬性, 默認指向一個空的Object對象
console.log(Fn.prototype)
// 2. 每個實例對象都有一個__proto__，可稱為隱式原型
//創(chuàng)建實例對象
var fn = new Fn() // 內部語句: this.__proto__ = Fn.prototype
console.log(fn.__proto__)
// 3. 對象的隱式原型的值為其對應構造函數(shù)的顯式原型的值
console.log(Fn.prototype===fn.__proto__) // true
//給原型添加方法
Fn.prototype.test = function () {
console.log('test()')
}
//通過實例調用原型的方法
fn.test()
顯式原型與隱式原型.png
