javascript 原型

javascript_prototype.png

(*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指向該方法的原型對象。

  1. 5種原始類型,分別是null undefined string number boolean
  2. 函數(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
  1. 自定義封裝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)外:

OC_metaclass.png

(*useful)


OC_metaclass

上面兩張圖相比之下就會(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指針)依次查找。

深入理解javascript原型和閉包
Why is MetaClass in Objective-C?

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 一切皆對象 面向?qū)ο蟮囊粋€(gè)重要觀點(diǎn)是:一切皆對象如何做到這一點(diǎn)呢?如何建立繼承體系呢?各種語言,C++、Java、...
    松哥888閱讀 537評論 0 0
  • 如果你看的過程中覺得理解有些困難,把例子在代碼中跑一跑,親手試一試也許能解決不少疑惑。 一切皆為對象 殊不知,Ja...
    fuyou2324閱讀 537評論 0 5
  • 一切皆為對象 殊不知,JavaScript的世界中的對象,追根溯源來自于一個(gè) null「一切皆為對象」,這句著實(shí)是...
    雙魚大貓閱讀 362評論 0 3
  • 在JS中,原型鏈?zhǔn)且粋€(gè)重要的概念,不管是繼承還是屬性值的查找中,都用到了原型鏈的基本知識(shí),有些朋友經(jīng)常問我一些關(guān)于...
    彬_仔閱讀 1,606評論 2 20
  • 前言 原型,作為前端開發(fā)者,或多或少都有聽說。你可能一直想了解它,但是由于各種原因還沒有了解,現(xiàn)在就跟隨我來一起探...
    無亦情閱讀 680評論 0 8