es5繼承和es6類和繼承

waitklove發表於2019-05-11

　　es6新增關鍵字class，代表類，其實相當於代替了es5的建構函式

　　　　通過建構函式可以建立一個物件例項，那麼通過class也可以建立一個物件實列

/* es5 建立一個person 建構函式 */
function person (name,age) {
    this.name = name
    this.age = age
}
/* 定義原型鏈上的方法sayholle */
/* 為什麼要將方法定義在原型上，定義在原型上的方法，所有的例項物件都共享 
 不會出現沒實列一個物件都重新建立一個這個方法 */
person.prototype.sayholle = function () {
    console.log(this.name+' holle'+ this.age)
}

let person1 = new person('czcz','23')
person1.sayholle()  //  czcz holle23

/* es6 使用class建立一個物件 */
class personclass {
    /* 實列物件時預設呼叫的方法 */
    constructor (name,age) {
        this.name = name
        this.age = age
    }
    /* 定義一個方法，相對構造上述原型鏈上的方法 */

    sayholle () {
        console.log(this.name+' holle'+ this.age)
    }
}
let person2 = new personclass('czcz','26')
person2.sayholle()  //  czcz holle23

　　es5中繼承的方式

　　　　1原型鏈繼承

/* es5原型鏈繼承 */
function person (name,age) {
    this.name = name
    this.age = age
}
person.prototype.sayholle = function () {
    console.log(this.name+' holle'+ this.age)
}

function child (sex) {
    this.sex = sex;
}
child.prototype = new person();
child.prototype.hh = 'ddd'
let p = new child('man')
console.log(p) // 
console.log(new person());
let p2 = new child('man')
p2.__proto__.age = '36'
/* 給p2原型上的age賦值，則導致p上的age也改變，父類建構函式上的屬性被所有子類共享 */
console.log(p) // 36
/* 缺點，child 新增的屬性只能在new person 以後，建立實列時無法向
    父類的建構函式傳送引數，因為直接是指定了原型，所有也不能實現多繼承
    父類建構函式上的屬性被所有子類共享
*/

　　　　2.建構函式繼承

/* es5建構函式繼承 */
function person (name,age) {
    this.name = name
    this.age = age
}
person.prototype.sayholle = function () {
    console.log(this.name+' holle'+ this.age)
}
function child (sex,name,age) {
    this.sex = sex
    person.call(this,name,age)
}

let p = new child('man','czklove','13')
console.log(p);
/* 
    可以是先多繼承，只要執行多個call
    建立實列時能像父類建構函式船體引數
    不會出現父類屬性，所有子類建構函式共享
    缺點，
    不能繼承父類原型鏈上的方法，如上面不能掉用sayholle方法
    子類建構函式的實列，原型鏈上並不存在父類建構函式，
    因為不能繼承父類原型鏈上的函式，所有要繼承函式只能定義在父類建構函式上，
    不能達到函式複用
 */

　　　　3.組合繼承，融合了上面兩種方式

/* es5組合繼承 */
function person (name,age) {
    this.name = name
    this.age = age
}
person.prototype.sayholle = function () {
    console.log(this.name+' holle'+ this.age)
}
function child (sex,name,age) {
    this.sex = sex
    person.call(this,name,age)
}
child.prototype = new person();
/* 重新設定一下constructor 不設定也沒有影響，嚴謹的角度上來說還是設定一下*/
/* 不設定的話，__proto__ 上時沒有 constructor */
/* 正常來講constructor是指向自身的 */
child.prototype.constructor = child;
let p = new child('man','czklove','13')
let p1 = new child('man','czklove1','16')
p.sayholle(); // czklove holle13
console.log(p);

child {sex: "man", name: "czklove", age: "13"}

age: "13"
name: "czklove"
sex: "man"
__proto__: person

age: undefined
constructor: ƒ child(sex,name,age)
name: undefined
__proto__: Object

　　　　組合繼承，既能達到對父類屬性的繼承，也能繼承父類原型上的方法

　　　　父類屬性繼承也不會在所有子類的實列上共享

　　　　唯一缺點，子類原型上有父類建構函式的屬性，也就是多了一份屬性


console.log(p.__proto__ === child.prototype) //true

　　　　4.優化版的組合繼承（寄生組合繼承）

/* es5寄生組合繼承 */
function person (name,age) {
    this.name = name
    this.age = age
}
person.prototype.sayholle = function () {
    console.log(this.name+' holle'+ this.age)
}
function child (sex,name,age) {
    this.sex = sex
    person.call(this,name,age)
}
child.prototype = Object.create(person.prototype);
child.prototype.constructor = child
let p = new child('man','czklove','13')
p.sayholle(); // czklove holle13
console.log(p);
/*  child {sex: "man", name: "czklove", age: "13"}
    age: "13"
    name: "czklove"
    sex: "man"
    __proto__: person
    constructor: ƒ child(sex,name,age)
    __proto__:
    sayholle: ƒ ()
    constructor: ƒ person(name,age)
    __proto__: Object */

　　es6 class

　　　　1.1class 內部都是嚴格模式

　　　　1.2class 不存在變數提升

　　　　1.3 class 的 name屬性

　　　　1.4 實現symbol.iterator 介面，可以使用for of 遍歷屬性

　　　　1.5this 指向例項內部

　　關於class的基本介紹，去阮一峰老師的es6入門看就行 http://es6.ruanyifeng.com/#docs/class

　　es6 class的繼承

/* esl class */
class person {
    constructor (name,age) {
        this.name = name
        this.age = age
    }
    syaholle () {
        console.log(this.name+ ' holle '+this.age)
    }
}

class child extends person {
    constructor (name,age,sex) {
        /*  執行父類的建構函式 
            子類必須在建構函式中掉用super
            */
        super(name,age)
        /* 使用this一定要在super 之後 */
        this.sex = sex
    }
}

let p = new child('czklove','23','man')
console.log(p)
/*  child {name: "czklove", age: "23", sex: "man"}
    age: "23"
    name: "czklove"
    sex: "man"
    __proto__: person
    constructor: class child
    __proto__:
    constructor: class person
    syaholle: ƒ syaholle()
    __proto__: Object */

/* esl class */
class person {
    constructor (name,age) {
        this.name = name
        this.age = age
    }
    syaholle () {
        console.log(this.name+ ' holle '+this.age)
    }
}

class child extends person {
    constructor (name,age,sex) {
        /*  執行父類的建構函式 
            子類必須在建構函式中掉用super
            */
        super(name,age)
        /* 使用this一定要在super 之後 */
        this.sex = sex
    }
}

let p = new child('czklove','23','man')
console.log(p)
/*  child {name: "czklove", age: "23", sex: "man"}
    age: "23"
    name: "czklove"
    sex: "man"
    __proto__: person
    constructor: class child
    __proto__:
    constructor: class person
    syaholle: ƒ syaholle()
    __proto__: Object */

　　es6 class 還涉及到很多東西，

　　　　　　1.靜態方法

　　　　　　2.this指向

　　　　　　3.super 關鍵字的具體使用

　　　　　　4.類的prototype屬性，建構函式的__proto__

　　　　　　5.原生建構函式的繼承，如Array的繼承，Boolean,Number,String Date...

　　基礎簡單的這裡就不說了

　　我們再看以下原生建構函式的繼承

　　　　es5中是不允許原生建構函式的繼承的

/*  es5為什麼不能對原生建構函式的繼承
    通過es5繼承我們知道，繼承父類構造屬性是通過person.call(this,argument)
    (es6)
    是因為子類無法獲得原生建構函式的內部屬性，
    通過Array.apply()或者分配給原型物件都不行。
    原生建構函式會忽略apply方法傳入的this，也就是說，
    原生建構函式的this無法繫結，導致拿不到內部屬性
*/
/* es6 使用class繼承原生 */

class myarray extends Array {
    constructor(...argus) {
        super(...argus)
    }
}

let arrays = new myarray();
arrays[0] = 'czklove';
console.log(arrays);
arrays.length = 0
console.log(arrays);

/*  輸出
    myarray ["czklove"]
    myarray [] */

　　注，es6對object建構函式的繼承，不能傳參，傳引數無效

class newobjext extends Object {
    constructor() {
        super(...arguments)
    }
}
let o = new newobjext({name: 'czklove'})
console.log(o.name); // undefined

　　總結，

　　　　es5的繼承

　　　　1.1原型鏈繼承

　　　　1.2 建構函式繼承

　　　　1.3組合繼承

　　　　1.4寄生組合繼承

　　　　es6 的 extends 繼承

　　　　super 關鍵字的使用，新增的靜態欄位使用，支援對原生建構函式的繼承，對object繼承的差異

ES5和ES6的類的繼承
2018-04-08
繼承
ES6中的類繼承和ES5中的繼承模式詳解
2018-08-13
繼承模式
JS繼承es5和es6
2020-11-03
JS繼承
ES6繼承和ES5繼承是完全一樣的麼?
2021-08-17
繼承
es6繼承 vs js原生繼承(es5)
2016-06-28
繼承JS
JS原型繼承和類式繼承
2015-08-26
JS原型繼承
es5建構函式，es6類和類的繼承
2019-02-25
函式繼承
ES5和ES6及繼承機制
2018-10-30
繼承
es5繼承和es6繼承中靜態方法、靜態屬性的差異
2019-04-17
繼承
ES5和ES6中對繼承的實現
2019-05-13
繼承
征服 JavaScript 面試：類繼承和原型繼承的區別
2017-01-30
JavaScript面試繼承原型
ES6 - 類與繼承
2018-12-18
繼承
類的繼承_子類繼承父類
2019-05-13
繼承
JavaScript 中的繼承：ES3、ES5 和 ES6
2017-12-31
JavaScript繼承S3
ES6與ES5繼承的解析
2020-11-20
繼承
從本質認識JavaScript的原型繼承和類繼承
2016-04-06
JavaScript原型繼承
Java之繼承和抽象類
2021-03-25
Java繼承抽象
[C++]繼承和派生類
2016-12-10
C++繼承
繼承重寫和抽象類
2008-09-27
繼承抽象
odoo 繼承（owl繼承、web繼承、view繼承）
2024-03-29
Odoo繼承WebView
物件導向(ES5與ES6類的繼承解析)
2017-02-09
物件繼承
原型和繼承
2018-08-16
原型繼承
公有繼承、私有繼承和保護繼承之間的對比
2012-07-17
繼承
【JavaScript】ES5/ES6 建立物件與繼承
2018-07-03
JavaScript物件繼承
es6 class繼承用es5實現
2018-06-29
繼承
es5 原型式繼承
2019-04-13
原型繼承
es6類的繼承淺析
2018-09-30
繼承
封裝和繼承
2021-03-13
封裝繼承
Javascript 繼承和克隆
2019-01-07
JavaScript繼承
Java繼承和介面
2016-11-03
Java繼承
【Maven】聚合和繼承
2017-02-19
Maven繼承
繼承和多型
2013-12-28
繼承多型
JavaScript原型和繼承
2015-09-15
JavaScript原型繼承
類的繼承
2018-07-30
繼承
javascript類繼承
2014-06-01
JavaScript繼承
JavaScript之ES5的繼承
2020-05-17
JavaScript繼承
js中的繼承(es5)
2018-03-07
JS繼承
原型，繼承——原型繼承
2020-03-15
原型繼承

es5繼承和es6類和繼承

相關文章