走進面向對象編程世界第二步(prototype&new&class)

先介紹一下javascript的數據類型

基本類型:數值(123)、字符串(“abc”)、布爾值(true | false)
對象類型:Object、包裝對象(Number、String、Boolean)、Array、Function
先介紹這些常用的
對這些數據類型可能剛學的時候有些疑問,具體是哪些呢

1. 我們知道基本類型沒有屬性,但是為什么可以寫這樣的代碼?
var string = "hello world"string.split(' ') 
// ['hello', 'world']
請問 string.split 方法是哪里來的?
  • JavaScript引擎內部在處理對某個基本類型,比如字符串基本類型
  • 會在內部臨時創建一個對應的包裝類型(就是String類型)的臨時對象,
  • 并把對基本類型的操作代理到對這個臨時對象身上,
  • 使得對基本類型的屬性訪問看起來像對象一樣。
  • 但是在操作完成后,臨時對象就扔掉了,
  • 下次再訪問時,會重新建立臨時對象,
  • 當然對之前的臨時對象的修改都不會有效了。
2. 再舉個例子,var array = [] 為什么有 push 屬性?

array是array基本類型,本身是沒有任何屬性的
但是當它使用對象類型中的Array數據類型的屬性時,
就會臨時生成一個值和基本類型值一樣的復合對象,
然后調用相應的屬性或函數方法,返回結果,
然后這個臨時對象被清除,
原本的基本類型的值則不變
依次類推其它的基本類型

3. 什么是「偽數組」?

偽數組和數組的鍵都是有序的數字,有length屬性
但是偽數組的原型指向Object
數組的原型指向Array

舉例說

var 偽數組=new Object({0:"a",1:"b",length:2})
var 數組 =new Array("a","b")
偽數組.length===數組.length
偽數組 instanceof Object
偽數組.__proto__===Object.prototype
數組 instanceof Array
數組.__proto__===Array.prototype

上面幾個全等的值都是true

4. new Number(1)和1 的區別是什么?

1是基本類型number,沒有屬性
new Number(1)是復合類型object,封裝了系統給它的許多屬性和函數方法,
因為new Number(1)的原型是全局變量Number,它是復合類型中的[object Number]

舉例說明

1===1,
1.__proto__則會出錯
new Number(1)!==1
//true
new Number(1).__proto__===Number.prototype
//true
5. 為什么說所有對象都來自 Object()

因為所有的對象的原型鏈上,都會有一個原型是Object
所以說數組Array,函數Function,包裝對象Number、String等都是對象

舉例說明

var 數組 = new Array()
數組.__proto__===Array.prototype
//true
Array.__proro__===Function.prototype
//true
Array.prototype.__proto__===Object.prototype
//true
var 函數 = new Function()
函數.__proto__===Function.prototype
//true
Function.__proto__===Function.prototype
/true
Function.prototype.__proto__===Object.prototype
//true
Object.__proto__===Function.prototype
//true
Object.prototype.__proto__
//null
在了解了上面的一些對象的知識之后,
可以看看日常工作中面向編程是怎么實現的?

寫一個士兵構造函數 Soldier,實現 var s = new Soldier(1) 之后,s 擁有兩個自身屬性(id和生命值)、三個共有屬性(run、walk、die)

function Soldier(id){
this.id=id;
this.生命值=42;
}
Soldier.prototype={
run:function(){},
walk:function(){},
die:function(){}
}
var s=new Soldier(1)
s

控制臺

Soldier {id: 1, 生命值: 42}
id: 1生命值: 42
__proto__: Objectdie: 
function ()run: function ()walk: function ()
__proto__: Object

對于初學者,會不會有疑問,為什么不同return,this又是哪里跑出來的疑問呢?

function Soldier(id){
var 臨時對象 = {}
臨時對象.__proto__ = Soldier.prototype
臨時對象.id=id;
臨時對象.生命值=42;
return 臨時對象
}
Soldier.prototype={
run:function(){},
walk:function(){},
die:function(){}
}
var s=new Soldier(1)
s

其實,this可以看出是一個臨時的對象,
這個對象的原型指向構造函數的prototype原型對象
最后會返回這個對象,JS之父簡化了這段代碼,所以少了3行代碼

使用ES6的Class語法,也可以實現這個例子
class Soldier {
  constructor(id) {
    this.id = id;
    this.生命值 = 42;
  }
  run(){}
  walk(){}
  die(){}
}
var s=new Soldier(1)
s
  • 要注意class不能重復聲明,會出錯,
  • 使用function聲明后,也不能聲明同樣的類,
    因為class可以看出是function的語法糖
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,963評論 6 542
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,348評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 178,083評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,706評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,442評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,802評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,795評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,983評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,542評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,287評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,486評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,030評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,710評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,116評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,412評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,224評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,462評論 2 378

推薦閱讀更多精彩內容