JavaScript之原型與原型鏈

wuyangchun 發(fā)布于2019-08-23 10:33 / 2233人閱讀

摘要：個(gè)人博客原文地址萬(wàn)物皆對(duì)象在中除值類型之外，其他的都是對(duì)象，為了說明這點(diǎn)，我們舉幾個(gè)例子我們可以使用來(lái)做類型判斷除了屬于值類型之外，其他都是對(duì)象。

個(gè)人博客原文地址

萬(wàn)物皆對(duì)象

在JavaScript中除值類型之外，其他的都是對(duì)象，為了說明這點(diǎn)，我們舉幾個(gè)例子
我們可以使用typeof來(lái)做類型判斷

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屬于值類型之外，其他都是對(duì)象。你可能要問了，不是還有一個(gè)是function嗎？要校驗(yàn)他是不是應(yīng)該對(duì)象可以這樣做:

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

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

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

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

var person = {name:"wclimb"}

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

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

so，現(xiàn)在你只要知道對(duì)象是通過函數(shù)創(chuàng)建的就可以了，來(lái)跟著我讀：
第一遍對(duì)象都是通過函數(shù)創(chuàng)建的
第二遍對(duì)象都是通過函數(shù)創(chuàng)建的
第三遍對(duì)象都是通過函數(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è)構(gòu)造函數(shù)，我們通過new的方式創(chuàng)建了一個(gè)實(shí)例對(duì)象person
我們來(lái)看看person1和person2的constructor(構(gòu)造函數(shù))是不是指向Person的

person1.constructor === Person // true
person2.constructor === Person // true

原型(prototype)

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

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

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

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

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

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

隱式原型(__proto__)

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

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ù)其實(shí)就是由Function來(lái)創(chuàng)建的，由此得出:

Person.__proto__ === Function.prototype

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

Person.prototype.__proto__ === Object.prototype

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

拋開這張圖，來(lái)看看下面幾道題

person.__proto__

Person.__proto__

Person.prototype.__proto__

Object.__proto__

Object.prototype.__proto__

解：

每個(gè)對(duì)象都有一個(gè)__proto__屬性，指向創(chuàng)建該對(duì)象函數(shù)的prototype，因?yàn)镻erson是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其實(shí)是一個(gè)對(duì)象，而對(duì)象是由Object創(chuàng)建的，所以 Person.prototype.__proto__ === Object.prototype

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

雖然Object.prototype是一個(gè)對(duì)象但是他的__proto__為null

實(shí)例和原型

當(dāng)我們要取一個(gè)值的時(shí)候，會(huì)先從實(shí)例中取，如果實(shí)例中存在，則取實(shí)例的值，如果實(shí)例不存在，則會(huì)順著原型里找，直到找到

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

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

首先person實(shí)例中有這個(gè)屬性，返回我來(lái)自實(shí)例,然后將它刪除之后，會(huì)從原型中招，也就是person.__proto__，因?yàn)?b>Person.prototype === person.__proto__，所以得到我來(lái)自原型

總結(jié)

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

GitHub：wclimb