先介紹一下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的語法糖