js中原型和原型鏈指的是什么

這篇文章主要介紹js中原型和原型鏈指的是什么，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

js的原型和原型鏈?zhǔn)牵?、原型模式是用于創(chuàng)建重復(fù)的對(duì)象，同時(shí)又能保證性能，這種類型的設(shè)計(jì)模式屬于創(chuàng)建型模式，它提供了一種創(chuàng)建對(duì)象的最佳方式；2、原型鏈?zhǔn)窃蛯?duì)象創(chuàng)建過(guò)程的歷史記錄，當(dāng)訪問(wèn)一個(gè)對(duì)象的某個(gè)屬性時(shí)，會(huì)先在這個(gè)對(duì)象本身屬性上查找。

js的原型和原型鏈?zhǔn)牵?/strong>

• JavaScript是一門基于原型的語(yǔ)言，在軟件設(shè)計(jì)模式中，有一種模式叫做原型模式，JavaScript正是利用這種模式而被創(chuàng)建出來(lái)

• 原型模式是用于創(chuàng)建重復(fù)的對(duì)象，同時(shí)又能保證性能，這種類型的設(shè)計(jì)模式屬于創(chuàng)建型模式，它提供了一種創(chuàng)建對(duì)象的最佳方式。這種模式是實(shí)現(xiàn)了一個(gè)原型接口，該接口用于創(chuàng)建當(dāng)前對(duì)象的克隆。原型模式的目的是用原型實(shí)例指定創(chuàng)建對(duì)象的種類，并且通過(guò)拷貝這些原型創(chuàng)建新的對(duì)象，也就是說(shuō)利用已有的一個(gè)原型對(duì)象，可以快速地生成和原型對(duì)象一樣的新對(duì)象實(shí)例

• 原型：一個(gè)可以被復(fù)制（或者叫克?。┑囊粋€(gè)類，通過(guò)復(fù)制原型可以創(chuàng)建一個(gè)一模一樣的新對(duì)象，也可以說(shuō)原型就是一個(gè)模板，在設(shè)計(jì)語(yǔ)言中更準(zhǔn)確的說(shuō)是一個(gè)對(duì)象模板

1）原型是定義了一些公用的屬性和方法，利用原型創(chuàng)建出來(lái)的新對(duì)象實(shí)例會(huì)共享原型的所有屬性和方法

實(shí)例代碼：

    // 創(chuàng)建原型
    var Person = function(name){
        this.name = name;
    };
    // 原型的方法
   Person.prototype.sayHello = function(){
       console.log(this.name+",hello");
   };
   // 實(shí)例化創(chuàng)建新的原型對(duì)象，新的原型對(duì)象會(huì)共享原型的屬性和方法
   var person1 = new Person("zhangsan");
   var person2 = new Person("lisi");
   // zhangsan,hello
   person1.sayHello();
   // lisi,hello
   person2.sayHello();

2）嚴(yán)格模式下，原型的屬性和方法還是會(huì)被原型實(shí)例所共享的

實(shí)例代碼：

    // 開啟嚴(yán)格模式，原型的屬性和方法還是會(huì)被原型實(shí)例所共享的
   "use strict";
    // 創(chuàng)建原型
    var Person = function(name){
        this.name = name;
    };
    // 原型的方法
   Person.prototype.sayHello = function(){
       console.log(this.name+",hello");
   };
   // 實(shí)例化創(chuàng)建新的原型對(duì)象，新的原型對(duì)象會(huì)共享原型的屬性和方法
   var person1 = new Person("zhangsan");
   var person2 = new Person("lisi");
   // zhangsan,hello
   person1.sayHello();
   // lisi,hello
   person2.sayHello();

3）通過(guò)原型創(chuàng)建的新對(duì)象實(shí)例是相互獨(dú)立的，為新對(duì)象實(shí)例添加的方法只有該實(shí)例擁有這個(gè)方法，其它實(shí)例是沒有這個(gè)方法的

實(shí)例代碼：

    // 創(chuàng)建原型
    var Person = function(name){
        this.name = name;
    };
    // 原型的方法
   Person.prototype.sayHello = function(){
       console.log(this.name+",hello");
   };
   // 實(shí)例化創(chuàng)建新的原型對(duì)象，新的原型對(duì)象會(huì)共享原型的屬性和方法
   var person1 = new Person("zhangsan");
   var person2 = new Person("lisi");
   // zhangsan,hello
   person1.sayHello();
   // lisi,hello
   person2.sayHello();
   
   // 為新對(duì)象實(shí)例添加方法
   // 通過(guò)原型創(chuàng)建的新對(duì)象實(shí)例是相互獨(dú)立的
   person1.getName = function(){
       console.log(this.name);
   }
   // zhangsan
   person1.getName();
   // Uncaught TypeError: person2.getName is not a function
   person2.getName();

4）原型的總結(jié)：

• 所有引用類型都有一個(gè)__proto__(隱式原型)屬性，屬性值是一個(gè)普通的對(duì)象

• 所有函數(shù)都有一個(gè)prototype(原型)屬性，屬性值是一個(gè)普通的對(duì)象

• 所有引用類型的__proto__屬性指向它構(gòu)造函數(shù)的prototype

5）函數(shù)的原型prototype：函數(shù)才有prototype，prototype是一個(gè)對(duì)象，指向了當(dāng)前構(gòu)造函數(shù)的引用地址

6）函數(shù)的原型對(duì)象__proto__：所有對(duì)象都有__proto__屬性， 當(dāng)用構(gòu)造函數(shù)實(shí)例化（new）一個(gè)對(duì)象時(shí)，會(huì)將新對(duì)象的__proto__屬性指向 構(gòu)造函數(shù)的prototype

7）原型對(duì)象和函數(shù)的原型的關(guān)系

說(shuō)明：

• 所有函數(shù)的__proto__都是指向Function的prototype

• 構(gòu)造函數(shù)new出來(lái)的對(duì)象__proto__指向構(gòu)造函數(shù)的prototype

• 非構(gòu)造函數(shù)實(shí)例化出的對(duì)象或者對(duì)象的prototype的__proto__指向Object的prototype

• Object的prototype指向null

8）所有的原型對(duì)象都會(huì)自動(dòng)獲得一個(gè) constructor（構(gòu)造函數(shù)）屬性，這個(gè)屬性（是一個(gè)指針）指向 prototype 屬性所在的函數(shù)（Person）

9）實(shí)例的構(gòu)造函數(shù)屬性（constructor）指向構(gòu)造函數(shù) ：person1.constructor == Person

10）原型對(duì)象（Person.prototype）是 構(gòu)造函數(shù)（Person）的一個(gè)實(shí)例

11）原型的分類：

• 隱式原型（_proto_）：上面說(shuō)的這個(gè)原型是JavaScript中的內(nèi)置屬性[[prototype]]，此屬性繼承自object對(duì)象，在腳本中沒有標(biāo)準(zhǔn)的方式訪問(wèn)[[prototype]]，但Firefox、Safari和Chrome在每個(gè)對(duì)象上都支持一個(gè)屬性_proto_，隱式原型的作用是用來(lái)構(gòu)成原型鏈，實(shí)現(xiàn)基于原型的繼承

• 顯示原型（prototype）：每一個(gè)函數(shù)在創(chuàng)建之后，便會(huì)擁有一個(gè)prototype屬性，這個(gè)屬性指向函數(shù)的原型對(duì)象，顯示原型的作用是用來(lái)實(shí)現(xiàn)基于原型的繼承與屬性的共享

12）原型的使用方式：

通過(guò)給Calculator對(duì)象的prototype屬性賦值對(duì)象字面量來(lái)設(shè)定Calculator對(duì)象的原型

在賦值原型prototype的時(shí)候使用function立即執(zhí)行的表達(dá)式來(lái)賦值，可以封裝私有的function，通過(guò)return的形式暴露出簡(jiǎn)單的使用名稱，以達(dá)到public/private的效果

原型鏈

1）原型鏈：原型鏈?zhǔn)窃蛯?duì)象創(chuàng)建過(guò)程的歷史記錄，當(dāng)訪問(wèn)一個(gè)對(duì)象的某個(gè)屬性時(shí)，會(huì)先在這個(gè)對(duì)象本身屬性上查找，如果沒有找到，則會(huì)去它的__proto__隱式原型上查找，即它的構(gòu)造函數(shù)的prototype，如果還沒有找到就會(huì)再在構(gòu)造函數(shù)的prototype的__proto__中查找，這樣一層一層向上查找就會(huì)形成一個(gè)鏈?zhǔn)浇Y(jié)構(gòu)

2）原型設(shè)計(jì)的問(wèn)題：當(dāng)查找一個(gè)對(duì)象的屬性時(shí)，JavaScript 會(huì)根據(jù)原型鏈向上遍歷對(duì)象的原型，直到找到給定名稱的屬性為止，直到到達(dá)原型鏈的頂部仍然沒有找到指定的屬性，就會(huì)返回 undefined

也可以理解為原型鏈繼承時(shí)查找屬性的過(guò)程是先查找自身屬性，當(dāng)自身屬性不存在時(shí)，會(huì)在原型鏈中逐級(jí)查找

3）hasOwnProperty 函數(shù)：可以用來(lái)檢查對(duì)象自身是否含有某個(gè)屬性，返回值是布爾值，當(dāng)屬性不存在時(shí)不會(huì)向上查找對(duì)象原型鏈，hasOwnProperty是 JavaScript 中唯一一個(gè)處理屬性但是不查找原型鏈的函數(shù)

4）getOwnPropertyNames 函數(shù)：可以獲取對(duì)象所有的自身屬性，返回值是由對(duì)象自身屬性名稱組成的數(shù)組，同樣不會(huì)向上查找對(duì)象原型鏈

5）原型鏈的小結(jié)：

• 一直往上層查找，直到到null還沒有找到，則返回undefined

• Object.prototype.__proto__ === null

• 所有從原型或更高級(jí)原型中的得到、執(zhí)行的方法，其中的this在執(zhí)行時(shí)，指向當(dāng)前這個(gè)觸發(fā)事件執(zhí)行的對(duì)象

6）JavaScript的原型是為了實(shí)現(xiàn)對(duì)象間的聯(lián)系，解決構(gòu)造函數(shù)無(wú)法數(shù)據(jù)共享而引入的一個(gè)屬性，而原型鏈?zhǔn)且粋€(gè)實(shí)現(xiàn)對(duì)象間聯(lián)系即繼承的主要方法

以上是js中原型和原型鏈指的是什么的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！