欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript的原型是什么你知道嗎

 更新時(shí)間：2022年03月03日 17:16:18   作者：hangshao_123  
這篇文章主要為大家詳細(xì)介紹了JavaScript的原型，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

先看三個(gè)對(duì)象

一、構(gòu)造函數(shù)（對(duì)象）：

JS中聲明函數(shù)的三種方式

1.function 函數(shù)名(){}聲明

2.匿名函數(shù)聲明 var foo = function () {}

3.構(gòu)造函數(shù)聲明 var foo = new Function("形參1","形參2","形參3")。任何函數(shù)都可以用

new Function 來創(chuàng)建

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

當(dāng)我們用函數(shù)去創(chuàng)建對(duì)象時(shí)，如下Fun就是構(gòu)造函數(shù)。fn()是實(shí)例對(duì)象

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

并且知道：

1. 任何函數(shù)，上面的fn fn1 fn2 fn2都是Fun的實(shí)例，而Fun也是構(gòu)造函數(shù)Function的實(shí)例，F(xiàn)unction是JS內(nèi)置的對(duì)象。

2. 看到上面一段代碼，F(xiàn)un.prototype指代/指向的是原型(對(duì)象，后面直接稱為原型)。

 我們接下來看第二個(gè)對(duì)象：

 二、實(shí)例對(duì)象

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

知道以下知識(shí)點(diǎn)：

1. 只要用new關(guān)鍵字 + 構(gòu)造函數(shù)生成的對(duì)象，就是實(shí)例對(duì)象

2. 即便沒有用new + 關(guān)鍵字，而是用比如字面量創(chuàng)建對(duì)象，或者是函數(shù)直接 function 函數(shù)名() {} 這樣聲明，生成的也是實(shí)例對(duì)象,如上面代碼 。

3. 記住重要的知識(shí)點(diǎn)：所有的實(shí)例對(duì)象都有__proto__屬性，甚至可以去掉實(shí)例，改為所有的對(duì)象都有__proto__屬性。      

4. 知道如下代碼中,fn 是構(gòu)造函數(shù)Fun的實(shí)例對(duì)象，并且Fun也是構(gòu)造函數(shù)Function的實(shí)例對(duì)象。

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

得出的結(jié)論是：

1. fn實(shí)例對(duì)象的__proto__屬性指向構(gòu)造函數(shù)Fun的屬性prototype【原型】

2. 而Fun的實(shí)例對(duì)象的__proto__屬性也指向構(gòu)造函數(shù)的Function的prototype【原型】              備注：在這里，prototype既是Fun的屬性，而Fun.prototype也是最終的一個(gè)地方，目的地，這個(gè)目的地叫作原型對(duì)象。

        // 1. fn是Fun()構(gòu)造函數(shù)的實(shí)例 實(shí)例對(duì)象的__proto__屬性都會(huì)指向自身構(gòu)造函數(shù)的prototype屬性
        function Fun() {
        }
        var fn = new Fun()
        console.log(fn.__proto__ === Fun.prototype); // true
        // 2. Fun函數(shù)是Function構(gòu)造函數(shù)的實(shí)例 因此Fun的__proto__和構(gòu)造函數(shù)Function指向同一個(gè)地方
        console.log(Fun.__proto__ === Function.prototype); // true

第一個(gè)console對(duì)應(yīng)下圖的序號(hào)1，第二個(gè)console對(duì)應(yīng)下圖的序號(hào)4

三、 原型對(duì)象：

知道知識(shí)點(diǎn)：

1. 所有的函數(shù)都有一個(gè)原型對(duì)象。比如函數(shù)Function，它有原型對(duì)象Function.prototype。也有說法叫Function.prototype 為 函數(shù)Function的伴生對(duì)象，意思是函數(shù)Function一創(chuàng)建，就有一個(gè)陪伴它一起創(chuàng)建的對(duì)象叫Function.prototype。而Function自己的身上，又有一個(gè)屬性叫作prototype，這個(gè)屬性指向了它的伴生對(duì)象。

2. 函數(shù)的原型對(duì)象身上有一個(gè)屬性，叫作，constructor，它能夠指回構(gòu)造函數(shù)。就好像，構(gòu)造函數(shù)Function通過屬性prototype指向了原型對(duì)象Function.prototype，而原型對(duì)象Function.prototype通過自身的constructor屬性指回去。

 比如下面的，可以自行驗(yàn)證。

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

3. 函數(shù)的原型對(duì)象身上還有一個(gè)屬性，叫作__proto__屬性。瀏覽器打印出來現(xiàn)在長這樣，

[[Prototype]]: Object

原型當(dāng)中的__proto__指向父類的原型對(duì)象prototype，比如下面的代碼

下面的意思是函數(shù)Person的prototype，這是一個(gè)原型對(duì)象，它的__proto__屬性指向Object父類的prototype，F(xiàn)unction也是類似。為什么是這樣？

因?yàn)榧热籔erson.prototype和Function.prototype都叫作原型對(duì)象，都是對(duì)象，那么本質(zhì)都是通過new Object創(chuàng)建的，都是構(gòu)造函數(shù)Object的實(shí)例，因此它們也是實(shí)例對(duì)象，身上也有__proto__屬性指向Object父類。

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

對(duì)應(yīng)下圖的序號(hào)3

記?。?/strong>

Object是各個(gè)對(duì)象的根

再看三個(gè)屬性：

一、prototype:

1. 記住這個(gè)屬性是函數(shù)獨(dú)有的

下面的代碼，fn有prototype，F(xiàn)un構(gòu)造函數(shù)有prototype，F(xiàn)unction下面沒寫出來，但是也有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創(chuàng)建的一個(gè)函數(shù)，

2. 函數(shù)有prototype 

3. 同時(shí)fn55也是通過new + Function 創(chuàng)建的一個(gè)實(shí)例對(duì)象， 因此也有__proto__，指向Function構(gòu)造函數(shù)的prototype

看下面代碼

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

注意上面代碼：

1. 上面是通過new + Fun 創(chuàng)建了一個(gè)實(shí)例對(duì)象

2. 這里是通過構(gòu)造函數(shù)Fun創(chuàng)建了一個(gè)對(duì)象fnn，而fnn并不是函數(shù)，因此并沒有prototype原型對(duì)象

二、__proto__

1. 記得萬物都是對(duì)象 因此萬物都有__proto__

2. 構(gòu)造函數(shù)的創(chuàng)建的實(shí)例對(duì)象，有__proto__，指向構(gòu)造函數(shù)的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. 函數(shù)實(shí)例有__proto__，也指向構(gòu)造函數(shù)Function

        // 2. 創(chuàng)建函數(shù)的幾種方式
        // 定義函數(shù)的第一種方式
        function fn1(name,age) {
            console.log(`我叫${name},我今年${age}歲`);
        }
        fn1('小航',19)
        // 定義函數(shù)的第二種方式
        const fn2 = function(name,sex) {
            console.log(`我叫${name},性別${sex}`);
        }
        fn2('小航','男')
        // 或者箭頭函數(shù)
        const fn3 = (name, sex) => {
            console.log(`我叫${name},性別${sex}`);
        }
        fn3('小航','男')
        // 這三個(gè)函數(shù)的__proto__等于構(gòu)造函數(shù)Function的prototype
        // Function也是一個(gè)構(gòu)造函數(shù)
        // 上面的三種方式本質(zhì)和下面的fn4聲明函數(shù)的方式是一致的
        // 定義函數(shù)的第三種方式
        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 都是構(gòu)造函數(shù)Function的實(shí)例，因此也有__proto__

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

5. 原型對(duì)象也是對(duì)象，因此也有__proto__

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

三、constructor屬性

每一個(gè)原型對(duì)象身上，才有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);

一些更加復(fù)雜的情況

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

1. obj.__proto__指向Object.prototype

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

備注：Object也是構(gòu)造函數(shù)也是Function的實(shí)例對(duì)象 因此下面Object也有__proto__

3. Object.__proto__指向Function.prototype

4. Function.prototype.__proto__指向什么？這個(gè)就是[原型對(duì)象也是對(duì)象]原型對(duì)象的__proto__指向什么？指向的是父類的prototype也就是Object.prototype

5. Object.prototype指向什么，就是原型鏈的終點(diǎn)null 可以下去自行驗(yàn)證

原型鏈

原型鏈就是__proto__的終點(diǎn)

總結(jié)：

借助下面這張圖，幫你再總結(jié)一下知識(shí)點(diǎn)

1. 什么是原型鏈？就是實(shí)例對(duì)象身上__proto__屬性的走向，最終指向了Object.prototype.__proto__，是null值，就是原型鏈的終點(diǎn)

2. 明確三個(gè)對(duì)象，函數(shù)，實(shí)例對(duì)象，原型對(duì)象。三個(gè)屬性，prototype __proto__ constructor

  • 只有函數(shù)有prototype屬性, 如果是對(duì)象但是不是函數(shù)，就沒有prototype
  • 每個(gè)實(shí)例對(duì)象都有__proto__屬性，指向其構(gòu)造函數(shù)的prototype，對(duì)應(yīng)上圖序號(hào)1
  • 原型對(duì)象，可以理解為一個(gè)伴生對(duì)象，函數(shù)產(chǎn)生，它也一起產(chǎn)生，就是Fun.prototype, 他也有__proto__屬性，指向父節(jié)點(diǎn)的prototype，就是Object.prototype,而構(gòu)造函數(shù)也是一個(gè)實(shí)例對(duì)象，因此__proto__屬性也有，也指向Object.prototype。
  • 此外，function Object 和 function Function 也是 構(gòu)造函數(shù)Function的實(shí)例對(duì)象，因此function Object 和 function Function 也有__proto__屬性，也指向Function的prototype，這個(gè)可以自行驗(yàn)證

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!    

相關(guān)文章

最新評(píng)論