1. 程式人生 > >javascript教程50:認識instanceof 與 原型鏈

javascript教程50:認識instanceof 與 原型鏈

-c PE () 意圖 png array prot 一個 tor

1 instanceof:

1.1 普通使用下: 判斷一個對象是否是某個構造函數的實例:

語法 : 對象 instanceof 函數 是則返回true,不是則返回false.

console.log(obj instanceof Object);

1.2 高級用法:

判斷一個函數的原型對象,是否在實例對象的原型鏈上

1.3 案例如下:

var arr = [];
console.log(arr instanceof Array); //true
console.log(arr instanceof Object);  //true

2 原型鏈

MDN文檔是這樣解釋的:

2.1 .JavaScript 常被描述為一種

基於原型的語言 (prototype-based language)——每個對象擁有一個原型對象,對象以其原型為模板、從原型繼承方法和屬性。

其中:

1 對象 調用.prototype屬性,訪問到原型對象.可對其操作.

2 原型對象 調用.constructor屬性,訪問到對象.

3 解釋demo如下:

(下面舉例以構造函數Person作為文檔中的對象來解釋).

function Person(){

 }
 Person.prototype.sayName = function(){
   console.log(1);
 }

 var zs =  new Person();
 zs.sayName();
//1

4 下圖為關系示意圖:

以父親(構造函數原型對象) 母親(構造函數) 兒子(實例對象zs)來解釋其間的關系.

技術分享圖片

釋義:

釋義1 var zs = new Person();

構造函數Person(母親)),創造了實例對象(兒子)zs.

釋義2 Person.prototype.sayName

Person通過 Person.prototype訪問到(父親)"原型對象",並添加了函數sayName.

釋義3 zs.sayName();//1

(兒子)zs可以訪問到,父母兩對象內的所有變量和方法.

釋義4 Person.prototype.constructor.prototype.sayName

(父親)"原型對象"通過.constructor,訪問到構造函數Person(母親).

2.2 . 原型對象也可能擁有原型,並從中繼承方法和屬性**,一層一層、以此類推**。

這種關系常被稱為原型鏈 (prototype chain),它解釋了為何一個對象會擁有定義在其他對象中的屬性和方法。

關系如下圖所示:

技術分享圖片

解釋:

2.1 原型對象(父親)本身,也可能作為兒子被創造出來. 即:原型對象(父親)上面也有它的父親母親,去繼承他們的屬性方法去使用.

2.2 通過這一層層的關系,從**實例對象 ~ null **構成了一個原型鏈.

3 .原型鏈使用:

3.1 根據原型鏈特有的規則,我們通常在對象內添加公共屬性;原型對象內添加私有屬性.

4 對象查找屬性的規則:

先在自己身上找屬性,如果有,就直接返回,如果沒有,就順著原型鏈往上找

javascript教程50:認識instanceof 與 原型鏈