JavaScript的面向?qū)ο缶幊?/h1>

什么叫做面向?qū)ο螅?/h2>

面向?qū)ο笫且环N編程思想宫患,JavaScript本身就是基于面向?qū)ο髽?gòu)建出來的聊训,例如:JavaScript中有很多內(nèi)置類(Array,Object焕刮,Number注益,F(xiàn)unction碴巾,Promise....)等等,使用最簡單的例子來說Array丑搔,我們可以基于new Array來創(chuàng)建一個屬于Array的實例厦瓢,來使用Array的一些原型上的方法,比如sort低匙,slice旷痕,splice等等,平常開發(fā)的時候都是創(chuàng)建他們的實例來進行操作的顽冶。
JavaScript中的面向?qū)ο蠛推渌幊陶Z言還是有略微不同的欺抗,JS中類和實例是基于原型和原型鏈機制來處理的。

面向?qū)ο蟀裁矗?/h2>

面向?qū)ο蟀祟惖姆庋b强重,繼承和多態(tài)绞呈,下面會一一解答

封裝-低耦合高內(nèi)聚

 就是可以將復(fù)用的代碼塊單獨提煉出來作為一個方法,避免了代碼的復(fù)雜程度以及多重使用時的ctrl c+ctrl v

繼承->子類使用父類的方法和屬性(目的是讓子類的實例可以使用父類的屬性和方法)

1间景、原型繼承->讓父類中的方法在子類的實例的原型鏈上

CHILD.prototype = new PARENT()
CHILD.constructor = CHILD

function Parent (x){
    this.parentX = x
}
Parent.prototype.getParentX = function (){
    console.log(this.parentX)
}
function Child (y){
    this.childY = y
}
// 將子類的原型作為父類的實例
Child.prototype = new Parent(200)
// 可以不寫佃声,但是為了保證原型鏈的完整性,最好讓子類的原型上添加一個constructor
Child.constructor = Child;
Child.prototype.getChildY = function (){
    console.log(this.childY)
}
// 缺點 -> 子類直接往父類的原型上加了一個addfun()的方法倘要,其他子類也可以調(diào)用
Child.prototype.__proto__.addfun= function (){}

var child1 = new Child(100)
console.log(child1.childY,child1.parentX) //->輸出100圾亏,200
總結(jié):

1.不是拷貝方法供子類使用,父類如果修改私有方法和屬性封拧,子類使用的屬性和方法同樣會改變
2.子類可以重寫父類的方法志鹃,會導(dǎo)致父類其他實例也受到影響
3.父類中私有和共有的屬性方法,最后都會變?yōu)樽宇惖墓袑傩院头椒?/strong>

2泽西、Call繼承->在子類中將父類當做普通函數(shù)執(zhí)行曹铃,讓父類的this指向子類的實例,相當于給子類的實例設(shè)置了很多私有的屬性和方法
function Parent (x){
    this.parentX = x
}
Parent.prototype.getParentX = function (){
    console.log(this.parentX)
}
function Child (y){
   // 使用call將父類的this指向指到子類中捧杉,那父類的私有屬性和方法就成為了子類的私有屬性和方法
    Parent.call(this,200)
    this.childY = y
}
Child.prototype.getChildY = function (){
    console.log(this.childY)
}
var child1 = new Child(100)
console.log(child1.childY,child1.parentX) //->輸出100陕见,200
總結(jié):

1.只能繼承父類私有的屬性和方法(因為是把父類當做普通函數(shù)來執(zhí)行,和其原型上的屬性和方法沒有關(guān)系)
2.父類私有的屬性和方法變成子類的私有的屬性和方法

3味抖、寄生組合繼承->Call繼承+類似于原型繼承
function Parent (x){
    this.parentX = x
}
Parent.prototype.getParentX = function (){
    console.log(this.parentX)
}
function Child (y){
   // 使用call將父類的this指向指到子類中评甜,那父類的私有屬性和方法就成為了子類的私有屬性和方法
    Parent.call(this,200)
    this.childY = y
}
// Object.create() 創(chuàng)建一個空對象,讓空對象的原型鏈(__proto__)指向第一個參數(shù)
Child.prototype = Object.create(Parent.prototype)
Child.prototype.constructor = Child;
Child.prototype.getChildY = function (){
    console.log(this.childY)
}
var child1 = new Child(100)
console.log(child1.childY,child1.parentX) //->輸出100,200

但是問題同樣來了仔涩,如果不考慮IE瀏覽器的話這樣是沒問題的忍坷,但是如果要考慮IE瀏覽器就會發(fā)現(xiàn)有問題,因為IE瀏覽器并沒有proto,所以我們的Object.create()方法就不能用了承匣,所以就需要自己重寫一個create方法

Object.create = function (obj) {
     function Fn (){};
     Fn.prototype = obj; 
     return new Fn()
}
總結(jié):

父類私有和共有的分別是子類實例的私有和共有屬性方法

4、ES6中的繼承->//ES6中繼承使用extends

語法 class Child extends Parent{} 實際結(jié)果相當于Child.prototype.proto = Parent.prototype

class Parent {
    constructor (x){
        this.x = x;
    }
    getx() {
        return this.x;
    }
}
// 然后constructor中需要加入一個super
class Child extends Parent{
     // 子類繼承父類可以不寫constructor,一旦寫了constructor中的第一句話必須是super
     // 如果不寫constructor,瀏覽器會自己默認創(chuàng)建
     // constructor(...args){super(...args)}
    constructor (y){
        super(y) // 相當于Parent.call(this,200) 
        this.y = y
    }
    gety() {
        return this.y
    }
    getx(){
        return 0
    }
}

// Child.prototype = Object.create(Parent.prototype)  不允許重定向原型的指向
let child1 = new Child(100)
console.log(child1.x,child1.y,child1.gety(),child1.getx());
總結(jié):

父類私有和共有的分別是子類實例的私有和共有屬性方法

多態(tài)->類的重載和重寫

重載->java的定義就是方法名稱相同锤悄,但是根據(jù)參數(shù)的不同去拆分一些復(fù)雜代碼韧骗。而js中的重載是方法名字一樣,但是根據(jù)參數(shù)的不同在當前作用域中進行代碼的處理零聚。

實際上js中是不存在真正意義上的重載比如:

function sum(x,y){
            console.log('1')
}
function sum(x,y,z){
            console.log('2');
}
sum()  //->輸出打印 2

因為js中是有變量提升這個概念的袍暴,所以當方法名字一樣的時候下面的方法會將上面方法覆蓋掉。所以在js中進行重載的話需要用到 arguments 這個參數(shù)或者es6中的擴展運算符 ...arg隶症,然后根據(jù)arguments中的參數(shù)進行判斷操作

function fn(){
    for( let i= 0;i<arguments.length;i++){
        if(typeof(arguments[i])=='string'){
            console.log(arguments[i])
        }
    }    
}
function fn1(...arg){
    arg.forEach(item=>{
        if(typeof(item)=='string'){
            console.log(item)
        }
    }) 
}
fn(1,2,'a') // ->輸出a
fn1(1,2,'b')// ->輸出b

文采不好政模,請見諒,有錯誤的請及時留言聯(lián)系我修改蚂会。望大家批評指正淋样!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

  • 序言:七十年代末,一起剝皮案震驚了整個濱河市胁住,隨后出現(xiàn)的幾起案子趁猴,更是在濱河造成了極大的恐慌,老刑警劉巖彪见,帶你破解...
    沈念sama閱讀 217,657評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件儡司,死亡現(xiàn)場離奇詭異,居然都是意外死亡余指,警方通過查閱死者的電腦和手機捕犬,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,889評論 3 394
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來酵镜,“玉大人碉碉,你說我怎么就攤上這事∷裥觯” “怎么了誉裆?”我有些...
    開封第一講書人閱讀 164,057評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長缸濒。 經(jīng)常有香客問我足丢,道長,這世上最難降的妖魔是什么庇配? 我笑而不...
    開封第一講書人閱讀 58,509評論 1 293
  • 正文 為了忘掉前任斩跌,我火速辦了婚禮,結(jié)果婚禮上捞慌,老公的妹妹穿的比我還像新娘耀鸦。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 67,562評論 6 392
  • 文/花漫 我一把揭開白布袖订。 她就那樣靜靜地躺著氮帐,像睡著了一般。 火紅的嫁衣襯著肌膚如雪洛姑。 梳的紋絲不亂的頭發(fā)上上沐,一...
    開封第一講書人閱讀 51,443評論 1 302
  • 那天,我揣著相機與錄音楞艾,去河邊找鬼参咙。 笑死,一個胖子當著我的面吹牛硫眯,可吹牛的內(nèi)容都是我干的蕴侧。 我是一名探鬼主播,決...
    沈念sama閱讀 40,251評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼两入,長吁一口氣:“原來是場噩夢啊……” “哼净宵!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起谆刨,我...
    開封第一講書人閱讀 39,129評論 0 276
  • 序言:老撾萬榮一對情侶失蹤塘娶,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后痊夭,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體刁岸,經(jīng)...
    沈念sama閱讀 45,561評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,779評論 3 335
  • 正文 我和宋清朗相戀三年她我,在試婚紗的時候發(fā)現(xiàn)自己被綠了虹曙。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,902評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡番舆,死狀恐怖酝碳,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情恨狈,我是刑警寧澤疏哗,帶...
    沈念sama閱讀 35,621評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站禾怠,受9級特大地震影響返奉,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜吗氏,卻給世界環(huán)境...
    茶點故事閱讀 41,220評論 3 328
  • 文/蒙蒙 一芽偏、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧弦讽,春花似錦污尉、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,838評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽某宪。三九已至,卻和暖如春锐朴,著一層夾襖步出監(jiān)牢的瞬間缩抡,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,971評論 1 269
  • 我被黑心中介騙來泰國打工包颁, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人压真。 一個月前我還...
    沈念sama閱讀 48,025評論 2 370
  • 正文 我出身青樓娩嚼,卻偏偏與公主長得像,于是被迫代替她去往敵國和親滴肿。 傳聞我的和親對象是個殘疾皇子岳悟,可洞房花燭夜當晚...
    茶點故事閱讀 44,843評論 2 354

推薦閱讀更多精彩內(nèi)容