20201230.jpg
身后有陰影，那是因?yàn)槊嫦蛱?/strong>
ES6中的class可以看作一個語法糖贷腕，es5其實(shí)都是可以做到的廷痘，新的class語法使其更符合面向?qū)ο缶幊潭?/p>
區(qū)別
- 類必須使用new調(diào)用套耕，否則會報(bào)錯尘应。ES5的構(gòu)造函數(shù)是可以當(dāng)做普通函數(shù)使用的
- 類的內(nèi)部所有定義的方法惶凝，都是不可枚舉的
- 類的靜態(tài)方法也可以被子類繼承
- 可以繼承原生的構(gòu)造函數(shù)
- ES5是先新建子類的實(shí)例對象this，再將父類的屬性添加到子類上菩收，由于父類的內(nèi)部屬性無法獲取梨睁，導(dǎo)致無法繼承原生的構(gòu)造函數(shù)
- ES6允許繼承原生構(gòu)造函數(shù)定義子類鲸睛，因?yàn)镋S6是先新建父類的實(shí)例對象this娜饵，然后再用子類的構(gòu)造函數(shù)修飾this，使得父類的所有行為都可以繼承
使用ES5模擬實(shí)現(xiàn)ES6的class
new操作符檢查函數(shù)
類必須使用new調(diào)用官辈，否則會報(bào)錯
function _checkType(obj, constructor) {
if (obj instanceof constructor) {
throw new TypeError('Cannot call a class as a function')
}
}
內(nèi)部方法不可枚舉
function definePorperties (target, descriptions) {
for (let descriptor of descriptions) {
descriptor.enumerable = descriptor.enumerable || false
descriptor.configurable = true
if ('value' in descriptor) {
descriptor.writable = true
}
Object.defineProperty(target, descriptor.key, descriptor)
}
}
/**
*
* @param {*} constructor 表示對應(yīng)的constructor對象
* @param {*} protoDesc class內(nèi)部定義的方法
* @param {*} staticDesc class內(nèi)部定義的靜態(tài)方法
*/
function _creatClass (constructor, protoDesc, staticDesc) {
protoDesc && definePorperties(constructor.prototype, protoDesc)
staticDesc && definePorperties(constructor, staticDesc)
return constructor
}
真正的創(chuàng)建class
function _checkType(obj, constructor) {
if (!(obj instanceof constructor)) {
throw new TypeError('Cannot call a class as a function')
}
}
function definePorperties (target, descriptions) {
for (let descriptor of descriptions) {
descriptor.enumerable = descriptor.enumerable || false
descriptor.configurable = true
if ('value' in descriptor) {
descriptor.writable = true
}
Object.defineProperty(target, descriptor.key, descriptor)
}
}
/**
*
* @param {*} constructor 表示對應(yīng)的constructor對象
* @param {*} protoDesc class內(nèi)部定義的方法
* @param {*} staticDesc class內(nèi)部定義的靜態(tài)方法
*/
function _creatClass (constructor, protoDesc, staticDesc) {
protoDesc && definePorperties(constructor.prototype, protoDesc)
staticDesc && definePorperties(constructor, staticDesc)
return constructor
}
const Foo = function () {
function Foo(name) {
_checkType(this, Foo) // 檢查是否是new調(diào)用
this.name = name
}
_creatClass(Foo, [ // class內(nèi)部定義的方法
{
key: 'say',
value: function () {
console.log(this.name);
}
}
], [
{
key: 'say',
value: function () {
console.log('static say');
console.log(this.name);
}
}
])
return Foo
}()
這個時候直接調(diào)用Foo()
image.png
使用new 操作符之后
image.png
下面截圖可以看出say方法是不可枚舉的
image.png
下圖則可以看出靜態(tài)方法say也是不可枚舉的
image.png
實(shí)現(xiàn)繼承
- 類的靜態(tài)方法也可被子類繼承
function _inherits(subClass, superClass) {
if (typeof superClass !== 'function' && superClass !== null) {
throw new TypeError('父類必須是函數(shù)且不為null')
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
})
if (superClass) {
Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass._proto_ = superClass
}
}
使用父類的實(shí)例對象this
// 返回父類的this箱舞，若為null患膛，返回自身
function _possibleConstructorReturn(self, call) {
if (!self) {
throw new ReferenceError('this has not initialised - super() has not been called ')
}
return call && (typeof call === 'object' || typeof call === 'function') ? call : self
}
創(chuàng)建子類class
const Child = function (_parent) {
_inherits(child, _parent) // 繼承父類原型上的屬性和靜態(tài)方法的繼承
function Child(name, age) {
_checkType(this, Child)
// 先使用父類的實(shí)例對象this朋截，再返回
const _this = _possibleConstructorReturn(this, (Child._proto_ || Object.getPrototypeOf(Child)).call(this, name))
_this.age = age
return _this
}
return Child
}(Foo)
執(zhí)行截圖，證明繼承成功了
image.png
image.png
完整代碼
function _checkType(obj, constructor) {
if (!(obj instanceof constructor)) {
throw new TypeError('Cannot call a class as a function')
}
}
function definePorperties (target, descriptions) {
for (let descriptor of descriptions) {
descriptor.enumerable = descriptor.enumerable || false
descriptor.configurable = true
if ('value' in descriptor) {
descriptor.writable = true
}
Object.defineProperty(target, descriptor.key, descriptor)
}
}
/**
*
* @param {*} constructor 表示對應(yīng)的constructor對象
* @param {*} protoDesc class內(nèi)部定義的方法
* @param {*} staticDesc class內(nèi)部定義的靜態(tài)方法
*/
function _creatClass (constructor, protoDesc, staticDesc) {
protoDesc && definePorperties(constructor.prototype, protoDesc)
staticDesc && definePorperties(constructor, staticDesc)
return constructor
}
const Foo = function () {
function Foo(name) {
_checkType(this, Foo) // 檢查是否是new調(diào)用
this.name = name
}
_creatClass(Foo, [ // class內(nèi)部定義的方法
{
key: 'say',
value: function () {
console.log(this.name);
}
}
], [
{
key: 'say',
value: function () {
console.log('static say');
console.log(this.name);
}
}
])
return Foo
}()
function _inherits(subClass, superClass) {
if (typeof superClass !== 'function' && superClass !== null) {
throw new TypeError('父類必須是函數(shù)且不為null')
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
})
if (superClass) {
Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass._proto_ = superClass
}
}
// 返回父類的this踊赠，若為null肺魁，返回自身
function _possibleConstructorReturn(self, call) {
if (!self) {
throw new ReferenceError('this has not initialised - super() has not been called ')
}
return call && (typeof call === 'object' || typeof call === 'function') ? call : self
}
const Child = function (_parent) {
_inherits(Child, _parent) // 繼承父類原型上的屬性和靜態(tài)方法的繼承
function Child(name, age) {
_checkType(this, Child)
// 先使用父類的實(shí)例對象this电湘，再返回
const _this = _possibleConstructorReturn(this, (Child._proto_ || Object.getPrototypeOf(Child)).call(this, name))
_this.age = age
return _this
}
return Child
}(Foo)
class中子類調(diào)用super()的區(qū)別
super這個關(guān)鍵字，既可以當(dāng)作函數(shù)使用，也可以當(dāng)作對象使用寂呛。在這兩種情況下怎诫，它的用法完全不同。
super作為函數(shù)調(diào)用時贷痪，代表父類的構(gòu)造函數(shù)幻妓。ES6 要求，子類的構(gòu)造函數(shù)必須執(zhí)行super函數(shù)劫拢。子類沒有寫constructor方法肉津，js引擎默認(rèn)，幫你執(zhí)行constructor（）{ super() }
super作為對象時舱沧，在普通方法中妹沙，指向父類的原型對象；在靜態(tài)方法中熟吏，指向父類初烘。
這里需要注意，由于super指向父類的原型對象分俯，所以定義在父類實(shí)例上的方法或?qū)傩陨隹穑菬o法通過super調(diào)用的。
ES6在繼承中強(qiáng)制要求缸剪，必須在子類調(diào)用super吗铐，因?yàn)樽宇惖膖his是由父類得來的。
