首頁 > web前端 > js教程 > js的原型和原型鍊是什麼

js的原型和原型鍊是什麼

coldplay.xixi
發布: 2020-11-03 14:18:56
原創
26081 人瀏覽過

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

  • ##非建構子實例化出的物件或物件的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的原型和原型鍊是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板