JavaScript 之 面向對象 [ 原型 ]

原型

描述

• 全部函數（Function類型）都具備的屬性
• 在函數進行定義時，就包含prototype屬性
• prototype屬性的默認值爲一個空對象 ｛｝

獲取原型

• 第一種

  • 構造函數的prototype屬性

• 第二種

  • Object對象提供的getPrototypeOf()方法

function fun() {
    console.log( '啊哈哈' );
}
/* 全部函數都具備prototype屬性，能夠直接調用 */
console.log( fun.prototype );// 顯示 fun {}
/*
    Function類型包含 構造函數
     * 全部引用類型均可以使用 構造函數方式定義 - 全部引用類型都是構造函數
     * 構造函數也能夠用來定義對象（Object類型） - Object也能夠調用prototype屬性
 */
/* 引用類型調用prototype屬性 */
console.log( String.prototype );// 顯示 [String: '']
/* Object調用prototype屬性 */
console.log( Object.prototype );// 顯示 {}

/*
    獲取原型
     * 能夠經過如下兩種方法獲取指定目標的原型
     * 第一種
      * 構造函數的prototype屬性
     * 第二種
      * Object對象提供的getPrototypeOf()方法
 */

/* 定義一個函數 */
function fn() {
    console.log( '嘔呀呀' );
}
/* 經過prototype屬性獲取 */
console.log( fn.prototype );// 顯示 fn {}
/* 經過getPrototypeOf()方法獲取 */
console.log( Object.getPrototypeOf( fn ) );// 顯示 [Function]

原型新增屬性或方法

• 獲取的原型會獲得一個空對象
• 是對象就有屬性或方法
• 也能夠新增屬性或方法

新增方式

• 第一種方式

  • 構造函數.prototype.屬性名（方法名） = 屬性值（方法體）

/* 定義一個函數 */
function fun() {
    console.log( 100 );
}

/* 第一種方式 */
/* 獲取原型 */
console.log( fun.prototype );// 顯示 fun {}
/* 爲原型添加屬性或方法 */
fun.prototype.name = '唐三';
/* 才從新獲取原型 */
console.log( fun.prototype );// 顯示 fun { name: '唐三' }

• 第二種方式

  • Object.defineProperty( 獲取原型，屬性名（方法名），{ 屬性描述符 } )

/* 定義一個函數 */
function fun() {
    console.log( 100 );
}
/* 第二種方式 */
/* 獲取原型 */
console.log( fun.prototype );// 顯示 fun { name: '唐三' }
/* 爲原型添加屬性或方法 */
Object.defineProperty( fun.prototype, 'nian', {
    /* 設置屬性值或方法體 */
    value : 20,
    /*
        設置是否可枚舉
         * 用於打印對象時能夠正常顯示新增的屬性
         * 不設置可枚舉時將沒法顯示新增屬性，只顯示原有屬性
          * 顯示 fun { name: '唐三' }
     */
    enumerable : true
} );
/* 才從新獲取原型 */
console.log( fun.prototype );// 顯示 fun { name: '唐三', nian: 20 }

自有屬性和原型屬性

自有屬性

• 構造函數（對象）自己自帶或添加的屬性

原型屬性

• 從原型中得到屬性

/* 定義一個構造函數 */
function Fun() {
    /* 設置自有屬性和方法 */
    this.name = '唐三';
    this.menpai = function () {
        console.log( '唐門' );
    }
}
/* 獲取原型 */
console.log( Fun.prototype );//Fun {}
/* 爲原型添加新屬性 - 原型屬性 */
Fun.prototype.nian = 20;
/* 在獲取原型 */
console.log( Fun.prototype );//Fun { nian: 20 }

/*
    經過構造函數Fun建立對象
     * 該對象具備構造函數Fun的自有屬性
     * 該對象也具備構造函數Fun的原型屬性
 */
/* 建立對象 */
var fn = new Fun();
/* 調用自有屬性 */
console.log( fn.name );// 顯示 唐三
/* 調用原型屬性 */
console.log( fn.nian );// 顯示 20

/* 使用相同的構造函數在建立一個對象 */
var fu = new Fun();
/* 新對象對自有屬性進行修改 */
fu.name = '融念冰';
/* 調用修改的自有屬性 */
console.log( fu.name );// 顯示 融念冰
/* 兩個對象之間不會有影響 */
console.log( fn.name );// 顯示 唐三

/* 修改原型屬性 */
Fun.prototype.nian = 25;
/* 以構造函數Fun建立的對象都會被修改 */
console.log( fn.nian );// 顯示 25
console.log( fu.nian );// 顯示 25

重寫屬性

• 表示在自有屬性和原型屬性同名時，自有屬性會覆蓋原型屬性

/* 定義一個構造函數 */
function Fun() {
    /* 自有屬性 */
    this.name = '唐三';
}
/* 獲取原型並添加原型屬性 */
Fun.prototype.name = '融念冰';

/* 建立一個對象 */
var fn = new Fun();
/* 調用屬性 */
console.log( fn.name );// 顯示 唐三（自身屬性）

刪除屬性

• 經過delete關鍵字來進行刪除
• 若是進行刪除的目標對象同時具備自有屬性和原型屬性，會先刪除自有屬性

/* 定義一個構造函數 */
function Fun() {
    /* 自有屬性 */
    this.name = '唐三';
}
/* 獲取原型並添加原型屬性 */
Fun.prototype.name = '融念冰';

/* 建立一個對象 */
var fn = new Fun();
/* 調用屬性 */
console.log( fn.name );// 顯示 唐三（自身屬性）

/*
    刪除屬性
     * 經過delete關鍵字來進行刪除
     * 若是進行刪除的目標對象同時具備自有屬性和原型屬性，會先刪除自有屬性
 */
/* 刪除目標對象的指定屬性 */
delete fn.name;// 優先刪除自有屬性
/* 在調用已刪除的屬性 */
console.log( fn.name );// 顯示 融念冰（原型屬性）

檢測屬性

• 表示檢測目標對象中，是否存在指定屬性

Object.hasOwnProperty()方法

• Object.hasOwnProperty( 指定屬性名稱 )方法

  • 用於判斷當前指定屬性是否爲自有屬性
  • true - 表示存在
  • false - 表示不存在

/* 定義一個構造函數 */
function Fun() {
    /* 自有屬性 */
    this.name = '唐三';
}
/* 原型屬性 */
Fun.prototype.name = '融念冰';
/* 建立對象 */
var fn = new Fun();

/* Object.hasOwnProperty()方法 */
console.log( fn.hasOwnProperty(  'name') );// 顯示 true

in 關鍵字

• in 關鍵字 - （屬性名 in 對象名）

  • 用於判斷對象中是否存在指定屬性(自有屬性或原型屬性)
  • true - 表示存在
  • false - 表示不存在

/* 定義一個構造函數 */
function Fun() {
    /* 自有屬性 */
    this.name = '唐三';
}
/* 原型屬性 */
Fun.prototype.name = '融念冰';
/* 建立對象 */
var fn = new Fun();
/* in 關鍵字 */
console.log( 'name' in fn );// 顯示 true

顯示原型和隱式原型

顯示原型

• 全部函數的原型（prototype）均可以稱爲是顯示原型

隱式原型

• 全部對象的原型（__proto__）均可以稱爲是隱式原型

/* 定義一個構造函數 */
function Fun() {
    /* 自有屬性 */
    this.name = '唐三';
}
/* 原型屬性 */
Fun.prototype.nian = 20;
/* 建立對象 */
var fn = new Fun();

/* 調用自有屬性 */
console.log( fn.name );// 顯示 唐三
/* 調用原型屬性 */
console.log( fn.nian );// 顯示 20

/* 對象調用函數的原型 */
console.log( fn.prototype );// 顯示 undefined 對象會將prototype，當作自身的屬性進行調用
/* 對象調用對象的原型 */
console.log( fn.__proto__ );// 顯示 Fun { nian: 20 }

isPrototypeOf()方法

• 表示用於判斷一個指定對象是否爲另外一個目標對象的原型

  • true - 表示 是
  • false - 表示 不是

/* 定義一個對象 */
var obj = {
    name : '唐三'
}
/* 定義一個構造函數 */
function Fun() {}
/* 將指定對象賦值給構造函數Fun的原型 */
Fun.prototype = obj;
/* 建立對象 */
var fn = new Fun();

/* 判斷obj對象是否爲fn對象的原型 */
console.log( obj.isPrototypeOf(  fn) );// 顯示 true