使用建構函式建立物件
function
person()
var person1 =
newperson()
; person1.name =
'張三'
console.
log(person1.name)
//張三
person就是乙個建構函式,通過new建立了person1物件例項。
其實建構函式和普通函式沒有多大區別,首先字母大寫是約定俗成,不大寫照樣可以。關鍵是呼叫它的方式—通過new關鍵字,那麼這裡又會牽扯到另乙個問題,使用new呼叫後會內部會執行那些操作。
當我們new乙個建構函式,得到的例項繼承了構造器的構造屬性以及原型上的屬性。
主要有三個步驟:
建立乙個空物件,將它的引用賦值給this,繼承函式的原型。
通過this將屬性和方法新增至這個物件。
最後返回this指向的新物件,也就是例項(如果沒有手動返回其他的物件)
相當於以下的這個過程:
let
person
=function
(name,age)
// 2、給this指向的物件賦予構造屬性
this
.name = name;
this
.age = age;
// 3、如果沒有手動返回物件,則預設返回this指向的這個物件,也是隱式的。
// return this
}let person1 =
newperson()
;
在person建構函式下面有乙個prototype屬性。
var
person
=function()
person.prototype.name =
'張三'
;var person1 =
newperson()
;var person2 =
newperson()
; console.
log(person1.name)
;//張三
console.
log(person2.name)
//張三
前面說prototype屬性指向乙個物件,在這裡,prototype指向person.prototype。沒錯,person.prototype就是原型物件,也就是例項person1和person2的原型。
原型物件的好處是可以讓所有物件例項共享它所包含的屬性和方法。
所以總結可得proto就是用來將物件與該物件的原型相連。
這個屬性就是將原型物件指向關聯的建構函式。
function
person()
; person.prototype.constructor === person;
//true
function
person()
;var person1 =
newperson()
; person1.prototype.constructor = person;
//true
在這裡,其實person1例項並沒有constructor屬性,而是通過原型鏈在原型person.prototype上面找到的。
其實原型鏈就是依靠_proto_和prototype連線起來的。
首先來理解一下例項屬性和原型屬性。
function
person()
person.prototype.name =
'張三'
//原型屬性
var person1 =
newperson()
; person1.name =
'李四'
;//例項屬性
console.
log(person1.name)
;//李四
在上面,原型屬性和例項屬性都有乙個name的屬性,但是最後輸出來的是例項屬性上的值。
這說明:當我們讀取乙個屬性的時候,如果在例項屬性上找到了就讀取它,不用管原型屬性上是否還有相同的屬性,這其實就是屬性遮蔽。即當例項屬性和原型屬性擁有相同名字的時候,例項屬性會遮蔽原型屬性,只是遮蔽不會修改,原型屬性上的那個值還在。
但是如果在例項屬性上沒有找到的話,就會在例項的原型上去找,如果原型上還沒有,就繼續到原型的原型上去找,直到盡頭.z這樣就形成了乙個原型鏈。那麼這個盡頭是什麼呢?
假如在原型物件person.prototype還沒有找到屬性,並不會停止,還會繼續找。原型物件也是物件,所以它也有proto屬性,連線它的原型,原型物件person.prototype的原型就是object.prototype這個大boss。所有原型物件都是object建構函式生成的。
正是因為所有的原型最終都會指向object.prototype,所以物件的很多方法都是繼承於此,比如tostring()、valueof()。那麼object.prototype有原型嗎?
沒有,為null,也就是上面所說的盡頭。
function
person()
var person1 =
newperson()
;// 例項屬性
person1.name =
'j';
console.
log(person1.
hasownproperty
('name'))
;//true
function
person()
person.prototype.age =
'100'
var person1 =
newperson()
; person1.name =
'j' console.
log(
'name'
in person1)
;//true
console.
log(
'age'
in person1)
;//true
js 原型 原型鏈理解
執行發現如下 自定義乙個函式,函式包含兩個關鍵資料 prototype,proto 1 原型 prototype person具有prototype屬性 包含我們定義的屬性name,age以及constructor,並且constructor指向我們的person函式,可以理解為prototype就...
理解js原型和原型鏈
一.普通物件和函式物件 js中,萬物皆物件,大體分為兩種 普通物件,函式物件。凡是通過new function 建立的都是函式物件,其他的則為普通物件。下面舉例說明 function fun1 function var fun2 function function var fun3 new func...
對原型和原型鏈的理解
一 原型 所有引用型別都有乙個 proto 隱式原型 屬性,屬性值是乙個普通的物件 所有函式都有乙個prototype 原型 屬性,屬性值是乙個普通的物件 所有引用型別的 proto 屬性指向它建構函式的prototype 二 原型鏈 當訪問乙個物件的某個屬性時,會先在這個物件本身屬性上查詢,如果沒...