JS原型個人筆記

2022-03-18 04:40:23 字數 3215 閱讀 8353

一.原型(prototype)有什麼用?為什麼出現?

function

student(name,age)

}var stu = new

student();

var stu1 = new student();//

這樣有多少個學生物件,就要多開闢多少個study函式的記憶體,坐著一樣的事情

所以為了節省記憶體,給他定義乙個共享方法,開闢乙個空間,所有學生都可以用

function

student(name,age)

//給原型加上屬性study,開闢一處空間,可以給所有學生類使用這個方法

student.prototype.study = function

()

var stu1 = new

student();

var stu2 = new student();

總結:原型可以節省記憶體二、函式,函式例項、函式原型1.函式:以上面student()來說,它就是函式。

所有函式都有乙個特別的屬性:

2.函式例項:上面的stu, stu1, stu2這些通過new出來的物件,稱為函式例項,或例項物件,函式例項物件等等~

//

這裡要說明一點,所有函式都有prototype屬性,所有例項化物件都有__proto__屬性。

//

通常情況下,定義函式

function

student()

//js預設處理為

var student = new

function()

//所以所有函式都是例項化物件,也有__proto__屬性

//並且function本身也是例項化物件,js預設

var function = new function()

結合1,2兩點總結:

//

所有函式都有prototype和__proto__屬性;

//所有通過函式例項化的物件,如var stu = new student(),有__proto__屬性,但是沒有prototype屬性,因為prototype屬性是函式特有

3、函式原型:

(1)student.prototype稱為student函式的原型,它也是乙個物件,你可以理解prototype是函式student的乙個屬性,而student.prototype是乙個物件,也稱為student原型

(2)c語言中有函式原型是函式宣告的概念   :函式原型也叫函式宣告,還叫引用說明。其目的是實現先呼叫函式,後定義函式。

//

我認為c語言的函式原型就是函式宣告,很貼切。我認為js也可以這麼理解,因為js可以通過函式原型給函式新增屬性,以達到擴充套件原函式的目的。

function

student(name,age)

student.prototype.study = function

()//

這樣豈不是很形象,通過原型,也就是函式重新宣告,重新構造乙個student函式,讓它具有更強大的功能

結合2,3兩點談談prototype(原型)與__proto__(隱式原型):

其實這兩者好像兒子和父親的關係:student通過prototype重新給自己增加功能,而例項化物件stu(student函式 new出來的物件),通過__proto__指向student.prototype,以達到stu呼叫student所有屬性的目的。

畫圖效果:

以上總結:父親通過prototype指向父親原型,父親原型通過constructor指向父親,兒子通過__proto__指向父親原型。

又可以進一步總結:函式指向物件用prototype指標,物件指向函式用constructor指標,物件指向物件用__proto__指標。

又可以總結為:函式指向原型物件用prototype指標,原型物件指向函式用constructor指標,例項化物件指向原型物件用__proto__指標

三、原型鏈

1. 原型鏈(隱式原型鏈,通過__proto__發揮作用)

* 訪問乙個物件的屬性時,

* 先在自身屬性中查詢,找到返回

* 如果沒有, 再沿著__proto__這條鏈向上查詢, 找到返回

* 如果最終沒找到, 返回undefined

* 別名: 隱式原型鏈

明白了上面的原型的話,原型鏈就簡單了,說白了就是多個原型串在一起,某個例項化物件通過__proto__找它的祖先,看看祖先是否有它需要的屬性,有的話就使用,沒有的話就undefined。

下面是簡易版的原型鏈:

翻譯為:(1)student.prototype === stu.__proto__; student.prototype.construtor === student;student.prototype === student.prototype

(2)student.prototype.__proto__===object.prototype;

(3)object.prototype.constructor===object; object.prototype===object.prototype;object.prototype.__proto__===null

結合function(所有函式的祖宗),object函式,student自定義函式的原型鏈:

影象本來很清晰的,編輯的時候。一上傳就壓縮的模糊了。

JS筆記 原型物件

原型prototype 我們所建立的每乙個函式,解析器都會向函式中新增乙個屬性prototype,這個屬性對應著乙個物件,這個物件就是我們所謂的原型物件。如果函式作為普通函式呼叫prototype沒有任何作用,當函式以建構函式的形式呼叫時,它所建立的物件中都會有乙個隱含的屬性,指向該建構函式的原型物...

JS原型鏈學習筆記

animal擁有name屬性和laugh方法 dog 繼承 animal jiwawa 吉娃娃 是dog 的例項 1,錯誤,dog只是animal的例項,不是繼承自它的後嗣 1 function animal name 4 5var dog new animal dog 6console.log d...

js類 原型 學習筆記

js 內建有很多類,我們用的,都是從這些類例項化出來的。1 function object 2function array 3function string 4function boolean 5function function 比如,var a 等同於var a new object var a...