成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript之原型與原型鏈

wuyangchun / 2238人閱讀

摘要：個人博客原文地址萬物皆對象在中除值類型之外，其他的都是對象，為了說明這點，我們舉幾個例子我們可以使用來做類型判斷除了屬于值類型之外，其他都是對象。

個人博客原文地址

萬物皆對象

在JavaScript中除值類型之外，其他的都是對象，為了說明這點，我們舉幾個例子
我們可以使用typeof來做類型判斷

typeof a;             // undefined
typeof 1;             // number
typeof "wclimb";      // string
typeof true;          // boolean

typeof function(){};  // function
typeof [];            // object
typeof null;          // object
typeof {};            // object

除了undefined、number、string、boolean屬于值類型之外，其他都是對象。你可能要問了，不是還有一個是function嗎？要校驗他是不是應(yīng)該對象可以這樣做:

var fn = function(){}
fn instanceof Object // true

由上面的例子所示，函數(shù)確實是對象，為什么呢？我們看一下下面的例子

function Person(name){
    this.name = name; 
}
var person = new Person("wclimb");
console.log(person) // Person {name: "wclimb"}

由此我們可以得知，對象都是通過函數(shù)創(chuàng)建的，這么說你可能又會說不對，你看下面的就不是函數(shù)創(chuàng)建的

var person = {name:"wclimb"}

你咋就這么飄呢？我竟無言以對，沒錯，這是個意外、意外、意外。但是歸根結(jié)底他還是通過函數(shù)創(chuàng)建的

    var person = new Object()
    person.name = "wclimb"

so，現(xiàn)在你只要知道對象是通過函數(shù)創(chuàng)建的就可以了，來跟著我讀：
第一遍 對象都是通過函數(shù)創(chuàng)建的
第二遍 對象都是通過函數(shù)創(chuàng)建的
第三遍 對象都是通過函數(shù)創(chuàng)建的

構(gòu)造函數(shù)(constructor) 
function Person(name){
    this.name = name
}
var person1 = new Person("wclimb 1")
var person2 = new Person("wclimb 2")

上面Person就是一個構(gòu)造函數(shù)，我們通過new的方式創(chuàng)建了一個實例對象person
我們來看看person1和person2的constructor(構(gòu)造函數(shù))是不是指向Person的

person1.constructor === Person // true
person2.constructor === Person // true
原型(prototype)

在JavaScript中，每定義一個函數(shù)都會產(chǎn)生一個prototype(原型)屬性，這個屬性指向函數(shù)的原型對象

function Person(){}
Person.prototype.name = "wclimb"
Person.prototype.age = "24"
Person.prototype.sayAge = function(){
    console.log(this.age)
}
var person = new Person()
person.sayAge(); //  24

那么這個prototype到底是什么呢？跟構(gòu)造函數(shù)有關(guān)系嗎？

上圖就可以反映出他們之間的關(guān)系

其實函數(shù)的prototype指向函數(shù)的原型對象，每個對象都會關(guān)聯(lián)另外一個對象，也就是原型，上面的例子改成：

Person.prototype = {
    name: "wclimb",
    age: 24,
    satAge: function(){
        console.log(this.age)
    }
}
隱式原型(__proto__)

上面我們說到每定義一個函數(shù)都會產(chǎn)生一個原型，每個函數(shù)它不止有原型，還有一個__proto__(隱式原型)
每個對象都有一個__proto__屬性，指向創(chuàng)建該對象函數(shù)的prototype，我們可以來試試，還是上面的例子：

function Person(){}
var person = new Person()
person.__proto__ === Person.prototype // true

現(xiàn)在他們的關(guān)系圖如下

由上圖我們可以知道：

Person.prototype.constructor = Person
person.__proto__ = Person.prototype
person.constructor = Person

我們可以看到person.__proto__指向構(gòu)造函數(shù)的原型，那么構(gòu)造函數(shù)的原型即Person的__proto__指向哪里呢？
我們知道構(gòu)造函數(shù)其實就是由Function來創(chuàng)建的，由此得出:

Person.__proto__ === Function.prototype

那么構(gòu)造函數(shù)的原型即Person.prototype的__proto__指向哪里呢？
原型對象其實是通過Object生成的，自然而然的得出:

Person.prototype.__proto__ === Object.prototype

那么Object.prototype的__proto__指向哪里呢？答案是null，最終得到下面的圖

拋開這張圖，來看看下面幾道題

person.__proto__

Person.__proto__

Person.prototype.__proto__

Object.__proto__

Object.prototype.__proto__

解：

每個對象都有一個__proto__屬性，指向創(chuàng)建該對象函數(shù)的prototype，因為Person是person的構(gòu)造函數(shù)

Person === person.constructor為true,所以：person.__proto__ === Person.prototype

Person構(gòu)造函數(shù)是由Function創(chuàng)建的，所以可以得出Person.__proto__ === Fucntion.prototype

我們上面說過Person.prototype其實是一個對象，而對象是由Object創(chuàng)建的，所以 Person.prototype.__proto__ === Object.prototype

Object對象都是函數(shù)創(chuàng)建的，所以Object.__proto__ === Function.prototype

雖然Object.prototype是一個對象但是他的__proto__為null

實例和原型

當我們要取一個值的時候，會先從實例中取，如果實例中存在，則取實例的值，如果實例不存在，則會順著原型里找，直到找到

function Person(){}
Person.prototype.name = "我來自原型"

var person = new Person()
person.name = "我來自實例"
console.log(person.name); // 我來自實例
delete person.name
console.log(person.name)); // 我來自原型

首先person實例中有這個屬性，返回我來自實例,然后將它刪除之后，會從原型中招，也就是person.__proto__，因為Person.prototype === person.__proto__，所以得到我來自原型

總結(jié)

原型和原型鏈基本已經(jīng)講解完，不過還有待完善，如有錯誤，還望指正

GitHub：wclimb

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96457.html

相關(guān)文章

  • 進擊JavaScript之（四）原型與原型鏈

    摘要：每一個由構(gòu)造函數(shù)創(chuàng)建的對象都會默認的連接到該神秘對象上。在構(gòu)造方法中也具有類似的功能，因此也稱其為類實例與對象實例一般是指某一個構(gòu)造函數(shù)創(chuàng)建出來的對象，我們稱為構(gòu)造函數(shù)的實例實例就是對象。表示該原型是與什么構(gòu)造函數(shù)聯(lián)系起來的。 本文您將看到以下內(nèi)容： 傳統(tǒng)構(gòu)造函數(shù)的問題 一些相關(guān)概念 認識原型 構(gòu)造、原型、實例三角結(jié)構(gòu)圖 對象的原型鏈 函數(shù)的構(gòu)造函數(shù)Function 一句話說明什么...

    XBaron 評論0 收藏0

  • Javascript重溫OOP之原型與原型鏈

    摘要：在構(gòu)造函數(shù)中的中定義的屬性和方法，會被創(chuàng)建的對象所繼承下來。從上面的輸出結(jié)果看出，指向了其構(gòu)造函數(shù)的，而本身也是一個對象，其內(nèi)部也有屬性，其指向的是直到最后指向，這條原型鏈才結(jié)束。和都指向，說明原型鏈到終止。 prototype原型對象 每個函數(shù)都有一個默認的prototype屬性，其實際上還是一個對象，如果被用在繼承中，姑且叫做原型對象。 在構(gòu)造函數(shù)中的prototype中定義的屬性...

    lindroid 評論0 收藏0

  • JavaScript深入之從原型到原型鏈

    摘要：深入系列的第一篇，從原型與原型鏈開始講起，如果你想知道構(gòu)造函數(shù)的實例的原型，原型的原型，原型的原型的原型是什么，就來看看這篇文章吧。讓我們用一張圖表示構(gòu)造函數(shù)和實例原型之間的關(guān)系在這張圖中我們用表示實例原型。 JavaScript深入系列的第一篇，從原型與原型鏈開始講起，如果你想知道構(gòu)造函數(shù)的實例的原型，原型的原型，原型的原型的原型是什么，就來看看這篇文章吧。 構(gòu)造函數(shù)創(chuàng)建對象 我們先...

    Songlcy 評論0 收藏0

  • JavaScript 之原型與周邊

    摘要：除此之外，原型是共享的，如果我們有的寫法，改變這兩個對象任何一個的原型都會影響另外一個，這在大多的情況下是不可取的。當對象查找一個屬性的時候，他會沿著原型鏈一直往上追蹤，直到直到為之。在性能方面，原則上應(yīng)該盡量避免原型鏈太長。 簡介 如果之間學習過cpp 、java 之類的語言，都會知道他們是可以基于類 class 進行繼承的， 在JavaScript 中，并沒有類繼承這個概念，要實...

    codecook 評論0 收藏0

  • 深入學習js之——原型和原型鏈

    摘要：我們用一張圖表示構(gòu)造函數(shù)和實例原型之間的關(guān)系好了構(gòu)造函數(shù)和實例原型之間的關(guān)系我們已經(jīng)梳理清楚了，那我們怎么表示實例與實例原型，也就是或者和之間的關(guān)系呢。 開篇： 在Brendan Eich大神為JavaScript設(shè)計面向?qū)ο笙到y(tǒng)的時候，借鑒了Self 和Smalltalk這兩門基于原型的語言，之所以選擇基于原型的面向?qū)ο笙到y(tǒng)，并不是因為時間匆忙，它設(shè)計起來相對簡單，而是因為從一開始B...

    FingerLiu 評論0 收藏0

  • 深入學習js之——原型和原型鏈

    摘要：我們用一張圖表示構(gòu)造函數(shù)和實例原型之間的關(guān)系好了構(gòu)造函數(shù)和實例原型之間的關(guān)系我們已經(jīng)梳理清楚了，那我們怎么表示實例與實例原型，也就是或者和之間的關(guān)系呢。 開篇： 在Brendan Eich大神為JavaScript設(shè)計面向?qū)ο笙到y(tǒng)的時候，借鑒了Self 和Smalltalk這兩門基于原型的語言，之所以選擇基于原型的面向?qū)ο笙到y(tǒng)，并不是因為時間匆忙，它設(shè)計起來相對簡單，而是因為從一開始B...

    xialong 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<