典型的es6類:
類的成員: 構(gòu)造方法,屬性,方法,靜態(tài)方法等
class Parent {
height = 20;
constructor(name) {
this.name = name;
}
static sayHello() {
console.log('hello');
}
sayName() {
console.log('my name is ' + this.name);
return this.name;
}
}
class Child extends Parent {
constructor(name, age) {
super(name);
this.age = age;
}
sayAge() {
console.log('my age is ' + this.age);
return this.age;
}
}
類的使用時(shí)new出來(lái)的,跟es5不一樣; 類的寫法跟es5也是不一樣,那么有如下問(wèn)題:
- es6這樣的寫法對(duì)應(yīng)于es5寫法,類定義哪些屬性和方法是對(duì)應(yīng)起來(lái)的
- 當(dāng)繼承發(fā)生的時(shí)候,過(guò)程是怎樣的
1. es6這樣的寫法對(duì)應(yīng)于es5寫法,類定義哪些屬性和方法是對(duì)應(yīng)起來(lái)的
es5類的定義
function ClassName () {
this.x = 1;
this.y = 2;
this.sayHello = function () {
console.log('hello');
}
}
ClassName.prototype.sayHello = function () {
console.log('hello');
}
var className = new ClassName();
className.sayHello();
es6類的定義
class ClassName {
x = 1;
y = 2;
constructor () {}
sayHello () {
console.log('hello');
}
}
es5對(duì)象:
定義在實(shí)例對(duì)象上的:
this.x
this.y
this.sayHello
定義在類的原型上的:
ClassName.prototype.sayHello
es6對(duì)象:
定義在實(shí)例對(duì)象上的:
x = 1;
y = 2;
定義在原型上的:
sayHello方法(非靜態(tài)方法)
另外,es6對(duì)象上的靜態(tài)方法(前綴是static),不在原型上, 不可被實(shí)例化對(duì)象調(diào)用,且不能被子類的實(shí)例化對(duì)象調(diào)用,但是可以被子類繼承,通過(guò)子類名調(diào)用.
2. 當(dāng)繼承發(fā)生的時(shí)候,過(guò)程是怎么樣的
es5的繼承
function Parent () {
this.x = 1;
this.y = 2;
}
function Child () {
this.z = 3;
}
Child.prototype = new Parent();
var parent = new Parent();
var child = new Child();
es6的繼承
class Parent {
height = 20;
static width = 30;
constructor(name) {
this.name = name;
}
static sayHello() {
console.log('hello');
}
sayName() {
console.log('my name is ' + this.name);
return this.name;
}
}
class Child extends Parent {
constructor(name, age) {
super(name);
this.age = age;
}
sayAge() {
console.log('my age is ' + this.age);
return this.age;
}
}
let parent = new Parent('Parent');
let child = new Child('Child', 18);
下面將探索繼承發(fā)生了什么
es5的繼承中,只存在單個(gè)原型鏈;
es6的繼承中,同時(shí)存在兩條原型鏈;
es5的繼承如下:
在構(gòu)造函數(shù)這條原型鏈上是不存在的;
在實(shí)例上的原型鏈?zhǔn)谴嬖诘?
function Parent () {
this.x = 1;
this.y = 2;
}
function Child () {
this.z = 3;
}
Child.prototype = new Parent();
var parent = new Parent();
var child = new Child();
// 在構(gòu)造函數(shù)這條原型鏈上是不存在的
console.log('Child.__proto__ === Parent', Child.__proto__ === Parent);
/**
在實(shí)例上的原型鏈存在
*/
// 子類實(shí)例繼承自子類原型
console.log('Child.__proto__ === Child.prototype', child.__proto__ === Child.prototype);
// 子類原型繼承自父類原型
console.log('Child.prototype.__proto__ === parent.prototype', Child.prototype.__proto__ === Parent.prototype);
// 父類實(shí)例繼承自父類原型
console.log('parent.__proto__ === Parent.prototype', parent.__proto__ === Parent.prototype);
// 子類實(shí)例繼承自父類實(shí)例(Child.prototype = new Parent();)
console.log('Child.prototype.__proto__ === parent.__proto__', Child.prototype.__proto__ === parent.__proto__);
es6的繼承,存在2條原型鏈
class Parent {
height = 20;
static width = 30;
constructor(name) {
this.name = name;
}
static sayHello() {
console.log('hello');
}
sayName() {
console.log('my name is ' + this.name);
return this.name;
}
}
class Child extends Parent {
constructor(name, age) {
super(name);
this.age = age;
}
sayAge() {
console.log('my age is ' + this.age);
return this.age;
}
}
let parent = new Parent('Parent');
let child = new Child('Child', 18);
// 構(gòu)造函數(shù)原型鏈
console.log('Child.__proto__ === Parent', Child.__proto__ === Parent);
console.log('Parent.__proto__ === Function.prototype', Parent.__proto__ === Function.prototype);
console.log('Function.prototype.__proto__ === Object.prototype', Function.prototype.__proto__ === Object.prototype);
console.log('Parent.__proto__ === Function.prototype', Object.prototype.__proto__ === null);
// 實(shí)例原型鏈
console.log('child.__proto__ === Child.prototype', child.__proto__ === Child.prototype);
console.log('Array.prototype.__proto__ === Object.prototype', Child.prototype.__proto__ === Parent.prototype);
console.log('Array.prototype.__proto__ === Object.prototype', Parent.prototype.__proto__ === Object.prototype);
console.log('Array.prototype.__proto__ === Object.prototype', Object.prototype.__proto__ === null);
最后附上一張圖:
751551798315_.pic_hd.jpg
