JavaScript的原型是什麼你知道嗎

Posted on by

先看三個對象

一、構造函數（對象）：

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，這個可以自行驗證

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!    

推薦閱讀：