面向對象之原型對象和其他補充

原型對象概念

在構造函數創建出來的時候,系統會默認幫構造函數創建并關聯的一個新對象
自定義構造函數的原型對象默認是一個空對象。

原型對象的作用

構造函數中的原型對象中的屬性和方法可以被使用該構造函數創建出來的對象使用。
即以自定義構造函數方式創建出來的所有對象,自動擁有和共享該構造函數的原型對象中的所有屬性和方法。

如何訪問構造函數的原型對象

構造函數.protoType

對象.__proto__(不推薦)

設置原型對象的屬性和方法

利用對象的動態特性來為構造函數的原型對象添加屬性和方法

替換原型對象

原型對象的使用注意

實例和實例化

實例化:通過構造函數創建具體對象的過程。

實例:通過構造函數實例化出來的對象,我們稱之為該構造函數的一個實例。

注意:在說實例的時候,一定要指定是某個具體構造函數的實例

function Person() {

}

// 使用 new Person() 創建對象的過程稱為實例化
// p1就是Person這個構造函數的實例
var p1 = new Person();

原型的使用方法

利用對象的動態特性給原型添加屬性|方法

如果要添加的方法過多,則有大量重復代碼
// 1.提供一個構造函數
function Person() {
    //   this = obj;
    this.name = '默認';
}
// 2.設置原型對象的成員(屬性+方法)
//  添加成員
 Person.prototype.des = 'des';
 Person.prototype.logDes = function () {
     console.log(this.des);
 }

 // 修改成員
Person.prototype.des = 'log';

var p1 = new Person();

// 刪除
delete p1.des;//  刪除的是p1自己的des屬性,無法刪除原型對象的屬性
delete Person.prototype.des;

直接替換原型對象


    01 替換前后創建的對象所指向的原型對象不一致
    02 替換原型對象會切斷和之前的原型對象之間的關系

原型對象的使用注意


    ① 訪問屬性:構造函數創建出來的對象在訪問屬性的時候,會先在實例內查找,如果沒有找到則進一步到對應的原型對象中查找
    ② 設置屬性:
       在使用點語法進行賦值的時候,無法操作到對應的原型對象
                      如果該屬性在對象中已經存在,則修改該屬性的值
                      如果該屬性在對象中尚未存在,則新增該屬性
    ③ 設置原型對象的屬性:
        [01] 設置原型對象的屬性,只能通過構造函數.Prototype的方式|替換原型對象的方式設置
        [02] 如果原型對象的屬性是值類型,那么只能通過Person.prototype.屬性的方式修改其值
             如果原型對象的屬性是引用類型,那么可以通過對象名.引用對象.屬性名的方式設置|修改
                (1) 使用構造函數創建出來的多個對象的原型對象中的該屬性指向的是同一塊數據
                (2) 某個對象對該原型對象屬性進行了修改會影響到其他的對象

.proto屬性說明

__proto__是一個非標準屬性
即ECMAScript中并不包含該屬性,這只是某些瀏覽器為了方便開發人員開發和調試而提供的一個屬性,不具備通用性
建議:在調試的時候可以使用該屬性,但不能出現在正式的代碼中
```

hasOwnProperty方法

  • ①.in 判斷對象中是否存在指定的屬性(實例屬性+原型屬性)
    屬性名 in 對象
  • ②.hasOwnProperty 判斷對象中是否存在指定的實例屬性
  • ③.判斷某個屬性是否是原型屬性,并且僅僅是原型屬性
    1.屬性
    2.不是實例屬性

    function isPrototypeProperty(obj,objName) {
       
       return objName in obj && !obj.hasOwnProperty(objName);
    
    }
    
    console.log(isPrototypeProperty(p1, 'name')); // false
    
    console.log(isPrototypeProperty(p1, 'des')); // true
    
    console.log(isPrototypeProperty(p1, 'age')); // false

isPrototypeOf方法

isPrototypeOf: 判斷一個對象是否是指定對象的原型對象

instanceof : 判斷一個對象是否指定構造函數的實例對象


圖片發自簡書App
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容