JavaScript的原型是什麼你知道嗎

2022-03-03 13:00:35

先看三個物件

一、建構函式（物件）：

JS中宣告函數的三種方式

1.function 函數名(){}宣告

2.匿名函數宣告 var foo = function () {}

3.建構函式宣告 var foo = new Function("形參1","形參2","形參3")。任何函數都可以用

new Function 來建立

        function fn1(name,age) {
            console.log(`我叫${name},我今年${age}歲`);
        }
        fn1('小航',19)
        // 定義函數的第二種方式
        const fn2 = function(name,sex) {
            console.log(`我叫${name},性別${sex}`);
        }
        fn2('小航','男')
        fn3('小航','男')
        // Function也是一個建構函式
        // 上面的方式和下面的fn4宣告函數的方式是一致的
        const fn4 = new Function('name','age','console.log(`我叫${name},性別${sex}`)')
        // 當然還有箭頭函數 只是寫法變了 和第一種類似
        const fn3 = (name, sex) => {
            console.log(`我叫${name},性別${sex}`);
        }

當我們用函數去建立物件時，如下Fun就是建構函式。fn()是範例物件

        function Fun() {
        }
        var fn = new Fun()
        console.log(fn.__proto__ === Fun.prototype); // true

並且知道：

1. 任何函數，上面的fn fn1 fn2 fn2都是Fun的範例，而Fun也是建構函式Function的範例，Function是JS內建的物件。

2. 看到上面一段程式碼，Fun.prototype指代/指向的是原型(物件，後面直接稱為原型)。

我們接下來看第二個物件：

二、範例物件

        function fn1(name,age) {
            console.log(`我叫${name},我今年${age}歲`);
        }
        const obj1 = {
            name: '小航',
            age: '19'
        }

知道以下知識點：

1. 只要用new關鍵字 + 建構函式生成的物件，就是範例物件

2. 即便沒有用new + 關鍵字，而是用比如字面量建立物件，或者是函數直接 function 函數名() {} 這樣宣告，生成的也是範例物件,如上面程式碼。

3. 記住重要的知識點：所有的範例物件都有__proto__屬性，甚至可以去掉範例，改為所有的物件都有__proto__屬性。

4. 知道如下程式碼中,fn 是建構函式Fun的範例物件，並且Fun也是建構函式Function的範例物件。

        function Fun() {
        }
        var fn = new Fun()

得出的結論是：

1. fn範例物件的__proto__屬性指向建構函式Fun的屬性prototype【原型】

2. 而Fun的範例物件的__proto__屬性也指向建構函式的Function的prototype【原型】備註：在這裡，prototype既是Fun的屬性，而Fun.prototype也是最終的一個地方，目的地，這個目的地叫作原型物件。

        // 1. fn是Fun()建構函式的範例 範例物件的__proto__屬性都會指向自身建構函式的prototype屬性
        function Fun() {
        }
        var fn = new Fun()
        console.log(fn.__proto__ === Fun.prototype); // true
        // 2. Fun函數是Function建構函式的範例 因此Fun的__proto__和建構函式Function指向同一個地方
        console.log(Fun.__proto__ === Function.prototype); // true

第一個console對應下圖的序號1，第二個console對應下圖的序號4

三、原型物件：

知道知識點：

1. 所有的函數都有一個原型物件。比如函數Function，它有原型物件Function.prototype。也有說法叫Function.prototype 為函數Function的伴生物件，意思是函數Function一建立，就有一個陪伴它一起建立的物件叫Function.prototype。而Function自己的身上，又有一個屬性叫作prototype，這個屬性指向了它的伴生物件。

2. 函數的原型物件身上有一個屬性，叫作，constructor，它能夠指回建構函式。就好像，建構函式Function通過屬性prototype指向了原型物件Function.prototype，而原型物件Function.prototype通過自身的constructor屬性指回去。

比如下面的，可以自行驗證。

        function fn() {
        }
        console.log(fn.prototype);
        console.log(fn.prototype.constructor === fn); // true

3. 函數的原型物件身上還有一個屬性，叫作__proto__屬性。瀏覽器列印出來現在長這樣，

[[Prototype]]: Object

原型當中的__proto__指向父類別的原型物件prototype，比如下面的程式碼

下面的意思是函數Person的prototype，這是一個原型物件，它的__proto__屬性指向Object父類別的prototype，Function也是類似。為什麼是這樣？

因為既然Person.prototype和Function.prototype都叫作原型物件，都是物件，那麼本質都是通過new Object建立的，都是建構函式Object的範例，因此它們也是範例物件，身上也有__proto__屬性指向Object父類別。

    function Person() {
    }
    console.log(Person.prototype.__proto__ === Object.prototype); // true
    console.log(Function.prototype.__proto__ === Object.prototype); // true

對應下圖的序號3

記住：

Object是各個物件的根

再看三個屬性：

一、prototype:

1. 記住這個屬性是函數獨有的

下面的程式碼，fn有prototype，Fun建構函式有prototype，Function下面沒寫出來，但是也有prototype。

看程式碼

        var fn55 = new Function('age', 'sex', 'console.log(`今年${age}性別${sex}`)')
        console.log(fn55.prototype);
        console.log(fn55.__proto__ === Function.prototype); // true

注意：

1. 上面的fn55是通過new Function建立的一個函數，

2. 函數有prototype

3. 同時fn55也是通過new + Function 建立的一個範例物件，因此也有__proto__，指向Function建構函式的prototype

看下面程式碼

        function Fun(name, age) {
            this.name = name;
            this.age = age
        }   
        var fnn = new Fun('小航', '123')
        console.log(fnn.prototype); // undefined

注意上面程式碼：

1. 上面是通過new + Fun 建立了一個範例物件

2. 這裡是通過建構函式Fun建立了一個物件fnn，而fnn並不是函數，因此並沒有prototype原型物件

二、proto

1. 記得萬物都是物件因此萬物都有__proto__

2. 建構函式的建立的範例物件，有__proto__，指向建構函式的prototype

        function Person(name,age) {
            this.name = name
            this.age= age
        }
        Person.prototype.sayHello = function() {
            console.log(this.name);
        }
        const obj1 = {
            name: '小航',
            age: '19'
        }
        const obj2 = new Object()
        obj2.name = '焦邁奇'
        obj2.age = '19'
        console.log(obj1);
        console.log(obj2);
        console.log(Person.prototype);
        const person1 = new Person('小紅', 19)
        const person2 = new Person('小明', 20)
        console.log(person1.__proto__);
        console.log(person2.__proto__);
        console.log(Person.prototype === person1.__proto__);// true
        console.log(Person.prototype === person2.__proto__);// true
        console.log(Object.prototype === obj1.__proto__);   // true
        console.log(Object.prototype === obj2.__proto__);        // true

3. 函數範例有__proto__，也指向建構函式Function

        // 2. 建立函數的幾種方式
        // 定義函數的第一種方式
        function fn1(name,age) {
            console.log(`我叫${name},我今年${age}歲`);
        }
        fn1('小航',19)
        // 定義函數的第二種方式
        const fn2 = function(name,sex) {
            console.log(`我叫${name},性別${sex}`);
        }
        fn2('小航','男')
        // 或者箭頭函數
        const fn3 = (name, sex) => {
            console.log(`我叫${name},性別${sex}`);
        }
        fn3('小航','男')
        // 這三個函數的__proto__等於建構函式Function的prototype
        // Function也是一個建構函式
        // 上面的三種方式本質和下面的fn4宣告函數的方式是一致的
        // 定義函數的第三種方式
        const fn4 = new Function('name','age','console.log(`我叫${name},性別${sex}`)')
        // console.log(Function.prototype === fn1.__proto__); // true
        // console.log(Function.prototype === fn2.__proto__); // true
        // console.log(Function.prototype === fn3.__proto__); // true
        // console.log(Function.prototype === fn4.__proto__); // true

4. function Object和 function Function 都是建構函式Function的範例，因此也有__proto__

        console.log(Object.__proto__ === Function.prototype); 
        // true
        console.log(Function.__proto__ === Function.prototype);
        // true

5. 原型物件也是物件，因此也有__proto__

        function Person() {
        }
        console.log(Person.prototype.__proto__ === Object.prototype); // true
        console.log(Function.prototype.__proto__ === Object.prototype); // true

三、constructor屬性

每一個原型物件身上，才有constructor屬性

        function fn() {
        }
        console.log(fn.prototype);
        console.log(fn.prototype.constructor === fn); // true
        console.log(Function.prototype.constructor === Function); // true
        console.log(Object.prototype.constructor === Object);

一些更加複雜的情況

console.log(obj.__proto__.constructor.__proto__.__proto__.__proto__=== null); // null

1. obj.__proto__指向Object.prototype

2. Object.prototype.constructor就是指向Object本身

備註：Object也是建構函式也是Function的範例物件因此下面Object也有__proto__

3. Object.__proto__指向Function.prototype

4. Function.prototype.__proto__指向什麼？這個就是[原型物件也是物件]原型物件的__proto__指向什麼？指向的是父類別的prototype也就是Object.prototype

5. Object.prototype指向什麼，就是原型鏈的終點null 可以下去自行驗證

原型鏈

原型鏈就是__proto__的終點

總結：

藉助下面這張圖，幫你再總結一下知識點

1. 什麼是原型鏈？就是範例物件身上__proto__屬性的走向，最終指向了Object.prototype.__proto__，是null值，就是原型鏈的終點

2. 明確三個物件，函數，範例物件，原型物件。三個屬性，prototype __proto__ constructor

只有函數有prototype屬性, 如果是物件但是不是函數，就沒有prototype
每個範例物件都有__proto__屬性，指向其建構函式的prototype，對應上圖序號1
原型物件，可以理解為一個伴生物件，函數產生，它也一起產生，就是Fun.prototype, 他也有__proto__屬性，指向父節點的prototype，就是Object.prototype,而建構函式也是一個範例物件，因此__proto__屬性也有，也指向Object.prototype。
此外，function Object 和 function Function 也是建構函式Function的範例物件，因此function Object 和 function Function 也有__proto__屬性，也指向Function的prototype，這個可以自行驗證

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注it145.com的更多內容!

JavaScript的原型是什麼你知道嗎

目錄

先看三個物件

一、建構函式（物件）：

二、範例物件

三、原型物件：

再看三個屬性：

一、prototype:

二、proto

三、constructor屬性

原型鏈

總結：

熱門文章

JavaScript的原型是什麼你知道嗎

目錄

先看三個物件

一、建構函式（物件）：

二、範例物件

三、 原型物件：

再看三個屬性：

一、prototype:

二、__proto__

三、constructor屬性

原型鏈

總結：

熱門文章

三、原型物件：

二、proto