JavaScript預設採用原型繼承。雖然沒有類別(class)的概念,它的函數(function)可以充當建構器(constructor)。建構器結合this,new可以建構出類似Java的類別。因此,JavaScript透過擴展自身能模擬類別式(class-based)繼承。
JavaScript和其它物件導向語言一樣,物件類型採用引用方式。持有物件的變數只是一個地址,而基本型別資料是值。當原型上儲存物件時,就可能有一些陷阱。
先看第一個例子
複製代碼代碼如下:
var create = function() {
function Fn() {}
return function(parent) {
Fn.prototype = parent
return new Fn
}
}()
var parent = {
name: 'jack',
age: 30,
isMarried: false
}
var child = create(parent)
console.log(child)
create工具函數實作了一個基本的原型繼承,每次呼叫create都會根據parent物件複製一個新對象,新物件全部的屬性都來自於parent。這裡parent有三個屬性,都是基本資料型態:字串,數字,布林。
這時修改child看看會不會影響parent
複製代碼代碼如下:
child.name = 'lily'
child.age = 20,
child.isMarried = true
console.log(child)
console.log(parent)
結果如下
即修改child不會影響到parent。
再看看另外一個例子
複製代碼代碼如下:
var create = function() {
function Fn() {}
return function(parent) {
Fn.prototype = parent
return new Fn
}
}()
var parent = {
data: {
name: 'jack',
age: 30,
isMarried: false
},
language: ['Java']
}
var child = create(parent)
child.data.name = 'lily'
child.data.age = 20
child.data.isMarried = true
child.language.push('javascript')
console.dir(child)
console.dir(parent)
注意這裡的parent的兩個屬性data,language都是引用型,一個是對象,一個是陣列。 child仍然繼承與parent,隨後修改了child,結果如下
可以看到,此時parent也被修改了,和child的name,age等都一樣了。這是使用原型繼承時需要注意的。
使用繼承時比較好的方式是:
1,資料屬性採用類別繼承(掛在this上),這樣new時也可以透過參數配置
2,方法採用原型繼承,這樣能節省內存,同時子類重寫方法也不會影響父類
下面是一個滿足以上2點的寫類別工具函數
複製代碼代碼如下:
/**
* @param {String} className
* @param {String/Function} superCls
* @param {Function} factory
*/
function $class(name, superClass, factory) {
if (superClass === '') superClass = Object
function clazz() {
if (typeof this.init === 'function') {
this.init.apply(this, arguments)
}
}
var p = clazz.prototype = new superCls
clazz.prototype.constructor = clazz
clazz.prototype.className = className
var supr = superCls.prototype
window[className] = clazz
factory.call(p, supr)
}
物件類型放在父類別原型上時務必小心子類別修改其,這時繼承於該父類別的所有子類別的實例都會被修改。而這造成的bug很不容易發現。
ES5中加入了一個新API用來實現原型繼承:Object.create。可以用它來取代上面自實作的create函數,如下
複製代碼代碼如下:
var parent = {
name: 'jack',
age: 30,
isMarried: false
}
var child = Object.create(parent)
console.log(child)