JavaScript之原型與原型鏈

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

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

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

萬物皆對象

在JavaScript中除值類型之外，其他的都是對象，為了說明這點(diǎn)，我們舉幾個(gè)例子
我們可以使用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屬于值類型之外，其他都是對象。你可能要問了，不是還有一個(gè)是function嗎？要校驗(yàn)他是不是應(yīng)該對象可以這樣做:

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

由上面的例子所示，函數(shù)確實(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"}

你咋就這么飄呢？我竟無言以對，沒錯(cuò)，這是個(gè)意外、意外、意外。但是歸根結(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è)構(gòu)造函數(shù)，我們通過new的方式創(chuàng)建了一個(gè)實(shí)例對象person
我們來看看person1和person2的constructor(構(gòu)造函數(shù))是不是指向Person的

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

原型(prototype)

在JavaScript中，每定義一個(gè)函數(shù)都會產(chǎn)生一個(gè)prototype(原型)屬性，這個(gè)屬性指向函數(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

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

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

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

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

隱式原型(__proto__)

上面我們說到每定義一個(gè)函數(shù)都會產(chǎn)生一個(gè)原型，每個(gè)函數(shù)它不止有原型，還有一個(gè)__proto__(隱式原型)
每個(gè)對象都有一個(gè)__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ù)其實(shí)就是由Function來創(chuàng)建的，由此得出:

Person.__proto__ === Function.prototype

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

Person.prototype.__proto__ === Object.prototype

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

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

person.__proto__

Person.__proto__

Person.prototype.__proto__

Object.__proto__

Object.prototype.__proto__

解：

每個(gè)對象都有一個(gè)__proto__屬性，指向創(chuàng)建該對象函數(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è)對象，而對象是由Object創(chuàng)建的，所以 Person.prototype.__proto__ === Object.prototype

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

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

實(shí)例和原型

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

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

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

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

總結(jié)

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

GitHub：wclimb