js的類詳解

Javascript從當(dāng)初的一個(gè)“彈窗語言”,一步步發(fā)展成為現(xiàn)在前后端通吃的龐然大物。javascript的受歡迎程度也是與日俱增,今年最受歡迎編程語言又是花落javascript,這實(shí)在是一個(gè)充滿了活力的語言。如今,隨隨便一個(gè)網(wǎng)頁 JS 代碼量都不下數(shù)千行,要是node后端那更不止幾千行了。(WTF)代碼量的增加給編程帶來的首要的問題就是如何去編寫和維護(hù)如此龐大的代碼呢?答案就是模塊化思想,其實(shí)就是面向?qū)ο螅∣OP)編程,如今比較流行的三大前端框架(angular,react,vue)基本都實(shí)現(xiàn)了組件化編程,但組件化和我們所說的模塊化又有所不同,應(yīng)該可以這么理解,組件化是模塊化的升級(jí)版,模塊化是組件化的基礎(chǔ)。那么,問題來了,javascript怎么面向?qū)ο缶幊棠兀课蚁脒@很多老鳥也不定說的清楚吧,前端雜而活躍的各種社區(qū),很多前端er一度依賴各種插件,根本不需要去了解這些深層的東西卻照樣能完成任務(wù)。但我想作為一個(gè)有追求的前端er還是很有必要去學(xué)習(xí)這些看似用不著的東西的,別的不說,就單單因?yàn)槲覀兪乔岸薳r,只會(huì)用jquery一個(gè)稍微厲害的后端都能代替你。好吧,廢話不多說,到底如何面向?qū)ο骳oding呢…..

很不幸,es5中并沒有給出明確的定義「類」的概念,所以傳統(tǒng)的面向?qū)ο缶幊趟坪跏切胁煌ǖ模敲从衷撃[么辦呢?值得慶幸的是,前輩們通過不斷探索總結(jié),成功的用javascript模擬出了「類」。那么,javascript的類又該怎么定義呢?

在面向?qū)ο缶幊讨校悾╟lass)是對象(object)的模板,定義了同一組對象(又稱”實(shí)例”)共有的屬性和方法。

正文

說到 JS 中的“類”就不得不說原型鏈和繼承了,因?yàn)?JS 是沒有真正意義上的類的,所謂的類就是基于原型鏈和繼承來實(shí)現(xiàn)的,即使ES6中加入了class、extends關(guān)鍵字實(shí)現(xiàn)類和繼承,但實(shí)際上還是基于原型鏈和繼承, ES6 類(class)是 JavaScript 現(xiàn)有的原型繼承的語法糖。

1. 原型鏈和繼承

“ 在 javaScript 中,每個(gè)對象都有一個(gè)指向它的原型(prototype)對象的內(nèi)部鏈接。這個(gè)原型對象又有自己的原型,直到某個(gè)對象的原型為 null 為止(也就是不再有原型指向),組成這條鏈的最后一環(huán)。這種一級(jí)一級(jí)的鏈結(jié)構(gòu)就稱為原型鏈(prototype chain)。 ”

原型鏈

實(shí)際上在定義一個(gè)對象的時(shí)候原型鏈本身就已經(jīng)生成了,javascript處處皆對象的思想放在這里理解起來就很容易了,看完后你會(huì)發(fā)現(xiàn)萬物始于Object.prototype。那么我們都是如何定義一個(gè)對象的呢,博主總結(jié)的方法如下幾個(gè):

先初步來個(gè)demo具體解釋下原型鏈?zhǔn)钦厥掳桑?/p>

//someObject.[[Prototype]] 符號(hào)是用于指派 someObject 的原型。這個(gè)等同于 JavaScript 的 __proto__ ?屬性(現(xiàn)已棄用)。。從 ES6 開始, [[Prototype]] 可以用Object.getPrototypeOf()和Object.setPrototypeOf()訪問器來訪問。這個(gè)方法可以放心使用博主親測,主流瀏覽器已經(jīng)支持了

// 假定有一個(gè)對象 o, 其自身的屬性(own properties)有 a 和 b:

// {a: 1, b: 2}

// o 的原型 o.[[Prototype]]有屬性 b 和 c:

// {b: 3, c: 4}

// 最后, o.[[Prototype]].[[Prototype]] 是 null.

// 這就是原型鏈的末尾,即 null,

// 根據(jù)定義,null 沒有[[Prototype]].

// 綜上,整個(gè)原型鏈如下:

// {a:1, b:2}---> {b:3, c:4} ---> null

來來來,擼袖子搞出個(gè)對象!!!

使用普通方法來創(chuàng)建一個(gè)對象

demo如下:

var o={

? ?a:0,

? ?b:function(){

? ? ? ?console.log(this.a)

? ?}

}

//創(chuàng)建一個(gè)對象

//原型鏈如下:

//o--->Object.prototype--->null

var a = ["yo", "whadup", "?"];

//創(chuàng)建一個(gè)數(shù)組對象

//(indexOf, forEach等方法都是從它繼承而來).

//原型鏈如下:

//a--->Array.prototype ---> Object.prototype ---> null

function f(){

?return 1;

}

//創(chuàng)建一個(gè)函數(shù)對象

//(call, bind等方法都是從它繼承而來):

//原型鏈如下:

//f ---> Function.prototype ---> Object.prototype ---> null

var date=new Date();

//創(chuàng)建一個(gè)日期對象

//原型鏈如下:

//date--->Date.prototype--->Object.pprototype--->null

使用構(gòu)造函數(shù)的方法

在 JavaScript 中,構(gòu)造器其實(shí)就是一個(gè)普通的函數(shù)。當(dāng)使用 new 操作符 來作用這個(gè)函數(shù)時(shí),它就可以被稱為構(gòu)造方法(構(gòu)造函數(shù))。——MDN

demo如下:

function fun(){

? ?this.propA='prop';

? ?this.propB=3;

}

fun.prototype={

? ?methodA:function(){

? ? ? ?console.log(this.propA)

? ?}

}

var o=new fun();

o.methodA();//prop

// o是生成的對象,他的自身屬性有'propA'和'propB'.

// 在o被實(shí)例化時(shí),o.[[Prototype]]指向了fun.prototype.

使用Object.create創(chuàng)建對象

ECMAScript 5 中引入了一個(gè)新方法:Object.create()。可以調(diào)用這個(gè)方法來創(chuàng)建一個(gè)新對象。新對象的原型就是調(diào)用 create 方法時(shí)傳入的第一個(gè)參數(shù):

var a = {a: 1};

// a ---> Object.prototype ---> null

var b = Object.create(a);

// b ---> a ---> Object.prototype ---> null

console.log(b.a); // 1 (繼承而來)繼承概念下面會(huì)講

var c = Object.create(b);

// c ---> b ---> a ---> Object.prototype ---> null

var d = Object.create(null);

// d ---> null

console.log(d.hasOwnProperty); // undefined, 因?yàn)閐沒有繼承Object.prototype

使用 class 關(guān)鍵字

ECMAScript6 引入了一套新的關(guān)鍵字用來實(shí)現(xiàn) class。使用基于類語言的開發(fā)人員會(huì)對這些結(jié)構(gòu)感到熟悉,但它們是不一樣的。 JavaScript 仍然是基于原型的。這些新的關(guān)鍵字包括 class, constructor, static, extends, 和 super.

"use strict";

class Polygon {

?constructor(height, width) {

? ?this.height = height;

? ?this.width = width;

?}

}

//定義一個(gè)類Polygon

class Square extends Polygon {

?constructor(sideLength) {

? ?super(sideLength, sideLength);

?}//使用super引用父類

?get area() {

? ?return this.height * this.width;

?}

?set sideLength(newLength) {

? ?this.height = newLength;

? ?this.width = newLength;

?}

}

//使用extends定義Squeare繼承父類Polygon

var square = new Square(2);//實(shí)例對象

//此時(shí)的原型鏈為:

//square--->Square.prototype--->Polygon.prototype--->Object.prototype--->null

//如果不理解為什么是這樣,不要緊接著往下看類的說明

繼承

其實(shí)在上面講原型鏈的時(shí)候難以避免的也提到了繼承,比如來自MDN的這個(gè)實(shí)例:

// 假定有一個(gè)對象 o, 其自身的屬性(own properties)有 a 和 b:

// {a: 1, b: 2}

// o 的原型 o.[[Prototype]]有屬性 b 和 c:(someObject.[[Prototype]] 符號(hào)是用于指派 someObject 的原型。這個(gè)等同于 JavaScript 的 __proto__ ?屬性(現(xiàn)已棄用)。。從 ES6 開始, [[Prototype]] 可以用Object.getPrototypeOf()和Object.setPrototypeOf()訪問器來訪問。)

// {b: 3, c: 4}

// 最后, o.[[Prototype]].[[Prototype]] 是 null.

// 這就是原型鏈的末尾,即 null,

// 根據(jù)定義,null 沒有[[Prototype]].

// 綜上,整個(gè)原型鏈如下:

// {a:1, b:2} ---> {b:3, c:4} ---> null

console.log(o.a); // 1

// a是o的自身屬性嗎?是的,該屬性的值為1

console.log(o.b); // 2

// b是o的自身屬性嗎?是的,該屬性的值為2

// o.[[Prototype]]上還有一個(gè)'b'屬性,但是它不會(huì)被訪問到.這種情況稱為"屬性遮蔽 (property shadowing)".

console.log(o.c); // 4

// c是o的自身屬性嗎?不是,那看看o.[[Prototype]]上有沒有.

// c是o.[[Prototype]]的自身屬性嗎?是的,該屬性的值為4

console.log(o.d); // undefined

// d是o的自身屬性嗎?不是,那看看o.[[Prototype]]上有沒有.

// d是o.[[Prototype]]的自身屬性嗎?不是,那看看o.[[Prototype]].[[Prototype]]上有沒有.

// o.[[Prototype]].[[Prototype]]為null,停止搜索,

// 沒有d屬性,返回undefined

—-以上內(nèi)容來自MDN繼承與原型鏈

我想看到這里還是有些似懂非懂吧,那么來個(gè)例子吧:

var object1={

? ?a:1,

? ?b:function(){

? ? ? ?console.log(this.a+1);

? ?}

}

//定義一個(gè)對象

var object2=Object.create(object1);

//調(diào)用Object.create來創(chuàng)建一個(gè)新對象,新對象的原型就是調(diào)用 create 方法時(shí)傳入的第一個(gè)參數(shù),現(xiàn)在的原型鏈?zhǔn)牵?/p>

//object2--->object1--->object1.prototype--->null

object2.d=4;

object2.a;

//1

//繼承了object1的屬性a

object2.b();

//2

//繼承了object1的方法b

Object.getPrototypeOf(object2);

//object1得到object2的原型object1

我想現(xiàn)在應(yīng)該是明白了吧,再不明白博主也是無能為力了,表達(dá)能力實(shí)在有限。

2. 類

總算說到類了,由于javascript的類基于原型鏈和繼承,因此在上面的內(nèi)容中就已經(jīng)定義了很多的類。咱們javascript的類同樣能實(shí)現(xiàn)傳統(tǒng)類的多態(tài),封裝,繼承等特性,這里主要講解了繼承這個(gè)概念,但實(shí)際上很多時(shí)候不經(jīng)意可能就用了這三個(gè)特性。很好玩不是么

首先,我們先看下在ES5中定義一個(gè)類的形式:

function Animal(name) {

? ?this.name = name;

? ?this.sleep = function() {

? ? ? ?console.log(this.name+'正在睡覺');

? ?}

}//定義Animal類

Animal.prototype = {

? ?eat: function(food) {

? ? ? ?console.log(this.name+"正在吃"+food);

? ?}

}

function Cat() {

}

Cat.prototype = new Animal('Tom');

var Tom = new Cat('Tom');/Cat實(shí)例對象

Tom.eat('貓糧');

//Tom正在吃貓糧

//繼承Animal方法

Tom.sleep();

//Tom正在睡覺

//繼承Animal方法

//現(xiàn)在的原型鏈:

//Tom(Cat實(shí)例對象)--->Cat.prototype(Animal實(shí)例對象)--->Animal.prototype--->Object.prototype--->null

好的,然后我們看下在ES6中改寫上面的類:

class Animal {

?constructor(name) {

? ?this.name = name;

?}

?sleep() {

? ?console.log(this.name + ' 正在睡覺');

?}

?eat(food){

? ?console.log(this.name+'正在吃'+food)

}

}

class Cat extends Animal {

}

const Tom = new Cat('Tom');

Tom.eat('貓糧');

//Tom正在吃貓糧

//繼承Animal方法

Tom.sleep();

//Tom正在睡覺

//繼承Animal方法

//現(xiàn)在的原型鏈:

//Tom(Cat實(shí)例對象)--->Cat.prototype(Animal實(shí)例對象)--->Animal.prototype--->Object.prototype--->null

定義一個(gè)類的方法實(shí)際上也是上面所說的定義一個(gè)對象的方法,類本身就是一個(gè)對象,只不過這個(gè)對象里面的方法和屬性可以供許多實(shí)例對象調(diào)用而已。 ?

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,825評論 6 546
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,814評論 3 429
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,980評論 0 384
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 64,064評論 1 319
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 72,779評論 6 414
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 56,109評論 1 330
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,099評論 3 450
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 43,287評論 0 291
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,799評論 1 338
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 41,515評論 3 361
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,750評論 1 375
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,221評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,933評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,327評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,667評論 1 296
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 52,492評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,703評論 2 380

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