初始原型鏈(一)

2022-07-13 18:09:13 字數 2810 閱讀 3099

前端面試經常會問關於原型鏈的知識,今天我總結了一下關於原型鏈的內容,希望對廣大小白一點點參考~

什麼是原型?

在 js 中,物件都有 __proto__ 屬性, 就是指這個物件的原型,如果建構函式 a 例項化乙個物件 b,那麼 a.prototype 就是 b 的原型。也就是:

什麼是原型鏈?

介紹完原型,那麼就必須說原型鏈了。

剛才提到,每個物件都有 __proto__屬性,指向其建構函式的 prototype, 而 prototype 的值也是乙個物件啊,所以就形成一條鏈,稱為原型鏈。

舉個例子:

cat 的原型鏈

我們建立乙個叫做 animal 的類, 並例項化乙個物件 cat,我們來一點一點探索 cat 所處的原型鏈。

function animal( name)

var cat = new animal("cat");

cat 由 animal 例項化而來,那麼就之前的說法,cat 的 __proto__ 指向 animal 的 prototype:

的確如此!

接下來考慮到 animal 的 prototype 也是乙個物件,也有原型 ,那麼 animal.prototype 的 __proto__  有指向什麼呢?

我們分析到 animal 的 prototype 是乙個物件, 那麼應該由 object 構造,這麼說,animal.prototype.__proto__  應該指向 object.prototype 。

object.prototype 也是乙個物件啊,那麼它的原型又是什麼? 

原型鏈的定義中提到,原型鏈的終點指向 null 。所以, object.prototype.__proto__ 應該指向  null。

小結

例項化 cat  有以下關係:

1. cat 由 animal 構造,所以有:cat.__proto__ == animal.prototype;

2. animal.prototype是乙個物件,由 object 構造,所以有:animal.prototype.__proto__  == object.prototype;

3. 原型鏈的終點指向 null,所以有:object.prototype.__proto__ == null;

也就是:

cat.__proto__.__proto__.__proto__ == null;

圖示:

這就是 cat 的原型鏈了,我們知道了什麼是原型鏈,那麼原型鏈有什麼用?

原型鏈的作用

當我們用乙個建構函式例項化很多不同的物件,而又希望給這些物件繫結相同的方法,就可以繫結到它們的建構函式上去。

舉個例子:

我們想讓所有的字串都擁有乙個去掉空格的方法,呼叫這個方法,就能去掉字串中的所有空格。我們只需要給 string.prototype 繫結乙個方法:

string.prototype.trim = function();

var str = "this is a good day!";

console.log(str.trim());

//列印出 thisisagoodday!

原型鏈的屬性查詢規則當從物件搜尋乙個屬性或者方法的時候,會遵循以下規則:

1. 先從本身擁有的屬性或方法查詢,如果物件本身有,那就直接用自己的屬性或者方法;

function animal( name)

}var cat = new animal("cat");

cat.say = function ()

cat.say();                //列印出 cat hello!

2. 當本身找不到這個屬性或者方法的時候,就會沿著原型鏈找,使用原型鏈上的方法或者屬性;

function animal( name)

}var cat = new animal("cat");

cat.say(); //列印出 hello cat!

3. 原型鏈也找不到,那麼找不到的屬性返回 undefined,找不到的方法會報錯,提示不是乙個 function。

console.log(cat.sayhello());       // 報錯:uncaught typeerror: cat.sayhello is not a function

console.log(cat.age);          //undefined

特殊的:

沒有原型屬性的物件

通過 object.create(null)生成沒有原型的物件。

後記

原型 原型鏈

var animal function var dog function animal.price 2000 dog.prototype animal var tidy new dog console.log dog.price 為什麼輸出 undefined console.log tidy.pr...

原型,原型鏈

原型object.hasownproperty proname object 乙個物件的例項 propname 乙個屬性名稱的字串值 返回乙個布林值原型鏈中的this 原型物件 原型物件的作用 一般情況下,會把方法宣告在原型物件裡。目的是實現繼承。當物件訪問自身屬性或方法時,先從自身找有沒有,如果有...

原型 原型鏈

在最近的原型和原型鏈的學習中,感覺壓力有點大,學習難度也比較大,但又很基礎很重要,我們在學習中得要下很大的功夫才行。無論什麼時候,只要建立了乙個新的函式,就會根據一組特定的規則為這個函式建立乙個prototype的屬性,prototype這個屬性指向函式的原型物件,然後所有的的原型物件都會有乙個co...