js的原型和原型鍊是什麼-js教程-PHP中文網

首頁

web前端

js教程

js的原型和原型鍊是什麼

Nov 03, 2020 pm 02:18 PM

js 原型原型鏈

js的原型和原型鍊是：1、原型模式是用於創建重複的對象，同時又能保證性能，這種類型的設計模式屬於創建型模式，它提供了一種創建對象的最佳方式；2、原型鍊是原型物件建立過程的歷史記錄，當存取一個物件的某個屬性時，會先在這個物件本身屬性上尋找。

js的原型和原型鍊是什麼

相關免費學習推薦：javascript##（視頻)

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）原型物件和函數的原型的關係

js的原型和原型鍊是什麼

說明：

所有函數的
__proto__都是指向Function的prototype
建構子new出來的物件
__proto__指向建構子的prototype
__proto__
指向Object的prototype

9）實例的建構子屬性（constructor）指向建構函式：

person1.constructor == Person

10）原型物件（Person.prototype）是建構函式（Person）的一個實例

11）原型的分類：

prototype
屬性，這個屬性指向函數的原型對象，顯示原型的作用是用來實現基於原型的繼承與屬性的共享

透過給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的原型和原型鍊是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn