物件導向程式設計 2 類與原型

1.用函式代替物件儲存變數

變數

const obj1 = 
}

函式:實際上最終還是放在物件裡

const getobj=()=>
}}

首先,變數儲存,在你申明的時候就已經把這個變數的內容存在記憶體裡的.用變數,存的就是變數,用函式,存的就是函式.換而言之,物件中存了a,b,c.而函式中並沒有,函式返回的那個物件只有在函式執行的時候才被建立.

也就是說,變數多次拿的都是同乙個.而函式,每次返回的都是乙個新的物件,它們之間互不相同,互不干擾.

變數(因為是同乙個,所以改乙個,大家都改了)

const obj1 = 
}let objj = obj1
objj.a = 2
console.log('obj', obj1, objj)//2,2

函式(原函式儲存的資料不會因為後續的操作改變,保持獨立,更加可控)

const getobj = function () 
}}let objj = getobj()
objj.a = 2
console.log('obj', getobj().a, objj.a)//1 2

2.類與this的引入我們在物件導向時就說過,物件導向的一大特點就是將多個變數進行分類存在乙個特定的物件中,但是,當多個物件又有相同特徵的時候,我們怎麼分類?這裡就可以引入類的概念,比如上述的objj和getobj.那引入類的概念,就必須引入this指標.所以上述**就可以變成

const getobj = function () 
}

但是需要注意的是,引入類的概念之後.由於this指標的問題.需要引入new的概念.

const getobj = function () 
this.c()
}// let objj = getobj()  不使用new會導致this指向報錯
let objj1 = new getobj() //objj1就是getobj的乙個例項
objj1.c()
console.log('obj', objj1)

3.原型(prototype)可以把原型看成類的傳家寶,也就是說乙個類的祖宗原型裡放了個東西之後,所有的new過之後的例項都能拿到原型裡的東西.

建構函式的每次例項化都相當於重新將其屬性給例項,假如建構函式有乙個a屬性,那我每次例項化的時候,例項都有a屬性,10個例項就存了10遍a,導致效能的浪費.那有沒有乙個辦法,只存一遍,但是例項所有例項能呼叫呢?

這個時候就可以藉由原型來實現,

const getobj = function () 
this.c()
}getobj.prototype.name = '建構函式' //給建構函式的原型注入乙個name屬性
// let objj = getobj()  不適用new會導致this指向報錯
let objj1 = new getobj()
objj1.c()
console.log('obj', objj1, 'name', objj1.name)

結果:objj1本身沒有name屬性,但是可以列印出來.

原因:是當你試圖從例項中獲取某個屬性時,它自身沒有則會沿著原型鏈去找,有就取出.所以可以在原型中儲存使用較多的變數,比如在使用vue.js開發時,將axios注入vue的原型.

原型汙染

現象:當頻繁使用原型注入的時候可能會導致原型汙染,在不知不覺的情況下修改了一些常用的建構函式原型導致,建構函式出現問題.比如修改了function建構函式原型中的原有屬性,例項化函式物件的時候可能就會出現功能上的問題.

解決方案:原型汙染乙個很大的原因就是同名變數的修改導致,那我們結合上面所說的方案可以想到解決方案.即,專門放乙個函式在原型上去儲存所有的變數,而不是一股腦全往原型上放.

const getobj = function () 
this.c()
}getobj.prototype.addfunction = function (name, f) 
// let objj = getobj()  不適用new會導致this指向報錯
let objj1 = new getobj()
objj1.addfunction('getname', function (n) )
objj1.addfunction('getage', function (n) )
objj1.getname('小明') // name 小明
objj1.getage('18') // age 18

這種方案,getobj這個建構函式原型上只新增了乙個addfunction,然後所有的後續新增的函式都繫結到了例項上,並沒有汙染getobj的建構函式.當然,你也可以綁到例項的原型上

4.鏈式結構

jquery.js有個明顯的特點,就是鏈式結構.那麼,如果我需要多個函式一步呼叫需要怎麼去操作呢?關鍵還是在this上面

const getobj = function () 
this.c()
}getobj.prototype.addfunction = function (name, f) 
// let objj = getobj()  不適用new會導致this指向報錯
let objj1 = new getobj()
objj1.addfunction('getname', function (n) )
objj1.addfunction('getage', function (n) )
objj1.getname('小明').getage('18') // name 小明 age 18

原型在物件導向的程式設計思路中起了非常重要的作用,因為開發幾乎都是依賴於物件.所以原型鏈的傳遞在變數或函式的儲存起著至關重要的作用.

物件導向程式設計 2 類與原型

物件導向與原型2 原型

php物件導向程式設計類與物件

物件導向與原型三

物件導向程式設計 2 類與原型

物件導向與原型2 原型

php物件導向程式設計 類與物件

物件導向與原型三

相關推薦

php物件導向程式設計類與物件