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

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

js的原型和原型鏈是：1、原型模式是用于創建重復的對象，同時又能保證性能，這種類型的設計模式屬于創建型模式，它提供了一種創建對象的最佳方式；2、原型鏈是原型對象創建過程的歷史記錄，當訪問一個對象的某個屬性時，會先在這個對象本身屬性上查找。

js的原型和原型鏈是：

• JavaScript是一門基于原型的語言，在軟件設計模式中，有一種模式叫做原型模式，JavaScript正是利用這種模式而被創建出來

• 原型模式是用于創建重復的對象，同時又能保證性能，這種類型的設計模式屬于創建型模式，它提供了一種創建對象的最佳方式。這種模式是實現了一個原型接口，該接口用于創建當前對象的克隆。原型模式的目的是用原型實例指定創建對象的種類，并且通過拷貝這些原型創建新的對象，也就是說利用已有的一個原型對象，可以快速地生成和原型對象一樣的新對象實例

• 原型：一個可以被復制（或者叫克隆）的一個類，通過復制原型可以創建一個一模一樣的新對象，也可以說原型就是一個模板，在設計語言中更準確的說是一個對象模板

1）原型是定義了一些公用的屬性和方法，利用原型創建出來的新對象實例會共享原型的所有屬性和方法

實例代碼：

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

2）嚴格模式下，原型的屬性和方法還是會被原型實例所共享的

實例代碼：

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

3）通過原型創建的新對象實例是相互獨立的，為新對象實例添加的方法只有該實例擁有這個方法，其它實例是沒有這個方法的

實例代碼：

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

4）原型的總結：

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

• 所有函數都有一個prototype(原型)屬性，屬性值是一個普通的對象

• 所有引用類型的__proto__屬性指向它構造函數的prototype

5）函數的原型prototype：函數才有prototype，prototype是一個對象，指向了當前構造函數的引用地址

6）函數的原型對象__proto__：所有對象都有__proto__屬性， 當用構造函數實例化（new）一個對象時，會將新對象的__proto__屬性指向 構造函數的prototype

7）原型對象和函數的原型的關系

說明：

• 所有函數的__proto__都是指向Function的prototype

• 構造函數new出來的對象__proto__指向構造函數的prototype

• 非構造函數實例化出的對象或者對象的prototype的__proto__指向Object的prototype

• Object的prototype指向null

8）所有的原型對象都會自動獲得一個 constructor（構造函數）屬性，這個屬性（是一個指針）指向 prototype 屬性所在的函數（Person）

9）實例的構造函數屬性（constructor）指向構造函數 ：person1.constructor == Person

10）原型對象（Person.prototype）是 構造函數（Person）的一個實例

11）原型的分類：

• 隱式原型（_proto_）：上面說的這個原型是JavaScript中的內置屬性[[prototype]]，此屬性繼承自object對象，在腳本中沒有標準的方式訪問[[prototype]]，但Firefox、Safari和Chrome在每個對象上都支持一個屬性_proto_，隱式原型的作用是用來構成原型鏈，實現基于原型的繼承

• 顯示原型（prototype）：每一個函數在創建之后，便會擁有一個prototype屬性，這個屬性指向函數的原型對象，顯示原型的作用是用來實現基于原型的繼承與屬性的共享

12）原型的使用方式：

通過給Calculator對象的prototype屬性賦值對象字面量來設定Calculator對象的原型

在賦值原型prototype的時候使用function立即執行的表達式來賦值，可以封裝私有的function，通過return的形式暴露出簡單的使用名稱，以達到public/private的效果

原型鏈

1）原型鏈：原型鏈是原型對象創建過程的歷史記錄，當訪問一個對象的某個屬性時，會先在這個對象本身屬性上查找，如果沒有找到，則會去它的__proto__隱式原型上查找，即它的構造函數的prototype，如果還沒有找到就會再在構造函數的prototype的__proto__中查找，這樣一層一層向上查找就會形成一個鏈式結構

2）原型設計的問題：當查找一個對象的屬性時，JavaScript 會根據原型鏈向上遍歷對象的原型，直到找到給定名稱的屬性為止，直到到達原型鏈的頂部仍然沒有找到指定的屬性，就會返回 undefined

也可以理解為原型鏈繼承時查找屬性的過程是先查找自身屬性，當自身屬性不存在時，會在原型鏈中逐級查找

3）hasOwnProperty 函數：可以用來檢查對象自身是否含有某個屬性，返回值是布爾值，當屬性不存在時不會向上查找對象原型鏈，hasOwnProperty是 JavaScript 中唯一一個處理屬性但是不查找原型鏈的函數

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

5）原型鏈的小結：

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

• Object.prototype.__proto__ === null

• 所有從原型或更高級原型中的得到、執行的方法，其中的this在執行時，指向當前這個觸發事件執行的對象

6）JavaScript的原型是為了實現對象間的聯系，解決構造函數無法數據共享而引入的一個屬性，而原型鏈是一個實現對象間聯系即繼承的主要方法

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