es5繼承和es6類和繼承
摘要：
es6新增關鍵字class，代表類，其實相當於代替了es5的建構函式
通過建構函式可以建立一個物件例項，那麼通過class也可以建立一個物件實列
/* es5 建立一個person 建構函式 */
function person (name,age) {
this.name =...
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繼承的差異