資訊專(zhuān)欄INFORMATION COLUMN
摘要：一面向?qū)ο缶幊堂嫦驅(qū)ο缶幊淌且环N抽象方式創(chuàng)建模型的編程方式。繼承我們實(shí)現(xiàn)一個(gè)子類(lèi)，繼承汽車(chē)類(lèi)將類(lèi)的屬性和方法賦值給繼承汽車(chē)類(lèi)的原型鏈創(chuàng)建子類(lèi)實(shí)例以上是中的面向?qū)ο缶幊痰暮?jiǎn)單介紹，如有錯(cuò)誤，歡迎指出。
一.面向?qū)ο缶幊?/strong>
面向?qū)ο缶幊?OOP--Object Oriented Programming)是一種抽象方式創(chuàng)建模型的編程方式。繼承，封裝，多態(tài)是OOP的三大基本特征。許多主流編程語(yǔ)言都支持OOP。例如Java，c++中通過(guò)new調(diào)用‘類(lèi)’來(lái)創(chuàng)造實(shí)例，但是學(xué)習(xí)了JS的同學(xué)知道JS中沒(méi)有類(lèi)的概念，那么JS怎么實(shí)現(xiàn)面向?qū)ο缶幊痰哪兀?br>JS實(shí)現(xiàn)OOP是通過(guò)原型鏈實(shí)現(xiàn)的，原型鏈的概念在這里不詳細(xì)講述，大家記住一個(gè)例子即可：
function._proto_ ==== Function.prototype
JS也通過(guò)new來(lái)創(chuàng)建實(shí)例，但是后面調(diào)用的不是類(lèi)，而是構(gòu)造函數(shù)。
下面我們通過(guò)封裝繼承一個(gè)‘類(lèi)’的例子來(lái)詳細(xì)闡述。
二.ES5實(shí)現(xiàn)封裝 繼承一個(gè)類(lèi)
1.封裝
我們知道寶馬，奔馳，奧迪等都是汽車(chē)，汽車(chē)這個(gè)概念就是一個(gè)類(lèi)，抽象出來(lái)代表了日常生活中的許多具體事物。
//汽車(chē) 構(gòu)造函數(shù)
function Car (name,color){
this.name = name;
this.color = color;
}
2.prototype模式
汽車(chē)的屬性有很多，不僅僅是名字和顏色，如果全部寫(xiě)在構(gòu)造函數(shù)里，創(chuàng)建實(shí)例時(shí)再去一一地調(diào)用太過(guò)于麻煩，于是JS規(guī)定了一個(gè)prototype模式，每個(gè)構(gòu)造函數(shù)都有一個(gè)prototype屬性指向原型，“類(lèi)”里面一些共有的屬性可以放在原型里面。例如汽車(chē)類(lèi)的車(chē)型，動(dòng)能方式等屬性都是共有屬性可以放在原型里。
Car.prototype.type = "car";
Car.prototype.getType = function () {
return this.type;
};
Car.prototype.setType = function (newType) {
this.type = newType;
return newType;
};
Car.prototype.getName = function () {
return this.name;
};
Car.prototype.setName = function (newName) {
this.name = newName;
return newName;
};
3.new關(guān)鍵字
JS中通過(guò)new關(guān)鍵字創(chuàng)建實(shí)例。
var car1 = new Car("寶馬","red");
console.log(car1.type) // "car"
這里，我們思考一個(gè)問(wèn)題：使用new創(chuàng)建實(shí)例，new到底做了些什么呢？
使用new創(chuàng)建實(shí)例，實(shí)際上是幫助我們減少了四行代碼：
1.new創(chuàng)建了臨時(shí)對(duì)象，可以使用this訪問(wèn)到臨時(shí)對(duì)象
2.new也幫我們r(jià)eturn了這個(gè)臨時(shí)對(duì)象
3.new指定了原型的名字--prototype
4.new創(chuàng)建實(shí)例，自動(dòng)綁定原型。
car1._proto_ === Car.prototype
4.繼承
我們實(shí)現(xiàn)一個(gè)‘子類(lèi)’，繼承‘汽車(chē)類(lèi)’
function SUV ( price) {
Car.call(this, "suv"); // 將 Car 類(lèi)的屬性和方法賦值給 SUV
this.price = price;
}
SUV.prototype = new Car("suv");// 繼承汽車(chē)類(lèi)的原型鏈
SUV.prototype.getPrice = function () {
return this.price;
};
SUV.prototype.setPrice = function (newPrice) {
this.price = newPrice;
return newPrice;
};
//創(chuàng)建子類(lèi)實(shí)例 var suv1 = new SUV(1000); console.log(suv1.getPrice());//1000
以上是JS中的面向?qū)ο缶幊痰暮?jiǎn)單介紹，如有錯(cuò)誤，歡迎指出。
參考鏈接：
Javascript繼承機(jī)制的設(shè)計(jì)思想--阮一峰
JS中的new到底是干什么的？---方應(yīng)杭
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/107042.html
摘要：很多情況下，通常一個(gè)人類(lèi)，即創(chuàng)建了一個(gè)具體的對(duì)象。對(duì)象就是數(shù)據(jù)，對(duì)象本身不包含方法。類(lèi)是相似對(duì)象的描述，稱(chēng)為類(lèi)的定義，是該類(lèi)對(duì)象的藍(lán)圖或原型。在中，對(duì)象通過(guò)對(duì)類(lèi)的實(shí)體化形成的對(duì)象。一類(lèi)的對(duì)象抽取出來(lái)。注意中，對(duì)象一定是通過(guò)類(lèi)的實(shí)例化來(lái)的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...
摘要：很多情況下，通常一個(gè)人類(lèi)，即創(chuàng)建了一個(gè)具體的對(duì)象。對(duì)象就是數(shù)據(jù)，對(duì)象本身不包含方法。類(lèi)是相似對(duì)象的描述，稱(chēng)為類(lèi)的定義，是該類(lèi)對(duì)象的藍(lán)圖或原型。在中，對(duì)象通過(guò)對(duì)類(lèi)的實(shí)體化形成的對(duì)象。一類(lèi)的對(duì)象抽取出來(lái)。注意中，對(duì)象一定是通過(guò)類(lèi)的實(shí)例化來(lái)的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...
摘要：很多情況下，通常一個(gè)人類(lèi)，即創(chuàng)建了一個(gè)具體的對(duì)象。對(duì)象就是數(shù)據(jù)，對(duì)象本身不包含方法。類(lèi)是相似對(duì)象的描述，稱(chēng)為類(lèi)的定義，是該類(lèi)對(duì)象的藍(lán)圖或原型。在中，對(duì)象通過(guò)對(duì)類(lèi)的實(shí)體化形成的對(duì)象。一類(lèi)的對(duì)象抽取出來(lái)。注意中，對(duì)象一定是通過(guò)類(lèi)的實(shí)例化來(lái)的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...
摘要：一面向?qū)ο缶幊毯?jiǎn)介定義，簡(jiǎn)稱(chēng)，是一種程序設(shè)計(jì)思想。好處維護(hù)簡(jiǎn)單模塊化是面向?qū)ο缶幊讨械囊粋€(gè)特征?？蓴U(kuò)充性面向?qū)ο缶幊虖谋举|(zhì)上支持?jǐn)U充性。 一、面向?qū)ο缶幊毯?jiǎn)介 1.定義： Object Oriented Programming，簡(jiǎn)稱(chēng)OOP，是一種程序設(shè)計(jì)思想。OOP把對(duì)象作為程序的基本單元，一個(gè)對(duì)象包含了數(shù)據(jù)和操作數(shù)據(jù)的函數(shù)。 2.好處： (1)、維護(hù)簡(jiǎn)單：模塊化是面向?qū)ο缶幊讨械囊粋€(gè)...
閱讀 3791·2021-11-24 09:39
閱讀 2686·2019-08-30 15:54
閱讀 1229·2019-08-30 13:01
閱讀 3518·2019-08-28 18:30
閱讀 1687·2019-08-26 17:44
閱讀 3647·2019-08-26 11:31
閱讀 2497·2019-08-26 10:40
閱讀 1347·2019-08-26 10:27
