(*useful)標(biāo)記:目前覺得有用的函數(shù)
//FIXME 標(biāo)記:待補(bǔ)充
首先,要明確幾個(gè)點(diǎn):
1.在JS里,萬物皆對象。方法(Function)是對象,方法的原型(Function.prototype)是對象。因此,它們都會(huì)具有對象共有的特點(diǎn)。
即:對象具有屬__proto__,可稱為隱式原型,一個(gè)對象的隱式原型指向構(gòu)造該對象的構(gòu)造函數(shù)的原型,這也保證了實(shí)例能夠訪問在構(gòu)造函數(shù)原型中定義的屬性和方法。
2.方法(Function)
方法這個(gè)特殊的對象,除了和其他對象一樣有上述proto屬性之外,還有自己特有的屬性——原型屬性(prototype),這個(gè)屬性是一個(gè)指針,指向一個(gè)對象,這個(gè)對象的用途就是包含所有實(shí)例共享的屬性和方法(我們把這個(gè)對象叫做原型對象)。原型對象也有一個(gè)屬性,叫做constructor,這個(gè)屬性包含了一個(gè)指針,指回原構(gòu)造函數(shù)。
好啦,知道了這兩個(gè)基本點(diǎn),我們來看看最上面這副圖。
1.構(gòu)造函數(shù)Foo()
構(gòu)造函數(shù)的原型屬性Foo.prototype指向了原型對象,在原型對象里有共有的方法,所有構(gòu)造函數(shù)聲明的實(shí)例(這里是f1,f2)都可以共享這個(gè)方法。
2.原型對象Foo.prototype
Foo.prototype保存著實(shí)例共享的方法,有一個(gè)指針constructor指回構(gòu)造函數(shù)。
3.實(shí)例f1和f2是Foo這個(gè)對象的兩個(gè)實(shí)例,這兩個(gè)對象也有屬性__proto__,指向構(gòu)造函數(shù)的原型對象,這樣子就可以像上面1所說的訪問原型對象的所有方法啦。
另外:
構(gòu)造函數(shù)Foo()除了是方法,也是對象啊,它也有__proto__屬性,指向誰呢?
指向它的構(gòu)造函數(shù)的原型對象唄。函數(shù)的構(gòu)造函數(shù)不就是Function嘛,因此這里的__proto__指向了Function.prototype。
其實(shí)除了Foo(),F(xiàn)unction(), Object()也是一樣的道理。
原型對象也是對象啊,它的__proto__屬性,又指向誰呢?
同理,指向它的構(gòu)造函數(shù)的原型對象唄。這里是Object.prototype.
最后,Object.prototype的__proto__屬性指向null(js歷史遺留問題)。
所有元類( 最終的js類)對象都有:(*useful)
- hasOwnProperty
- isPrototypeOf
......
總結(jié):
1.對象(實(shí)例)有屬性__proto__,指向該對象的構(gòu)造函數(shù)的原型對象。
2.方法(function 函數(shù))除了有屬性__proto__,還有屬性prototype,prototype指向該方法的原型對象。
- 5種原始類型,分別是null undefined string number boolean
- 函數(shù)才有prototype && __proto__, 實(shí)例只有__proto__ (實(shí)際上也能調(diào)prototype,例下...)
Fn是一個(gè)函數(shù),fn對象是從Fn函數(shù)new出來的,這樣fn對象就可以調(diào)用Fn.prototype中的屬性。
因?yàn)槊總€(gè)對象都有一個(gè)隱藏的屬性——“__proto__”,這個(gè)屬性引用了創(chuàng)建這個(gè)對象的函數(shù)的prototype。
即:fn.__proto__ === Fn.prototype
- 自定義封裝js插件,都是通過 prototype 進(jìn)行擴(kuò)展
<!-- 插件封裝 -->
<script>
function Student(props) {
this.name = props.name || '匿名'; // 默認(rèn)值為'匿名' 通過使用|| ,設(shè)置初始化值
this.grade = props.grade || 1; // 默認(rèn)值為1
}
Student.prototype.hello = function () {
constructor: Student,
console.log('Hello, ' + this.name + '!');
};
function createStudent(props) { //構(gòu)造函數(shù)
return new Student(props || {})
}
var xiaoming = new Student({
name: '小明'
} || {});
let xmgrade = xiaoming.grade; // 1
console.log(xmgrade)
xiaoming.hello();
</script>
號(hào)外:
(*useful)
上面兩張圖相比之下就會(huì)發(fā)現(xiàn), js的原型鏈與OC的繼承有異曲同工的之妙,但是我不知道js是否也是吸取了smalltalk...。
__proto__(隱式原型)與prototype(顯式原型)
- 隱式原型: 指向創(chuàng)建這個(gè)對象的函數(shù)(constructor)的prototype
- 顯式原型的作用:用來實(shí)現(xiàn)基于原型的繼承與屬性的共享。
- 隱式原型的作用:構(gòu)成原型鏈,同樣用于實(shí)現(xiàn)基于原型的繼承。舉個(gè)例子,當(dāng)我們訪問obj這個(gè)對象中的x屬性(objc_send)時(shí),如果在obj中找不到,那么就會(huì)沿著__proto__(isa指針)依次查找。