ES5与ES6中，哪种继承方式更为高效？
- 内容介绍
- 文章标签
- 相关推荐
本文共计502个文字，预计阅读时间需要3分钟。
Example
ES5：
<!DOCTYPE html><html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script>
//定义构造函数
function Person(name, age){
this.name=name;
this.age=age;
}
//在原型 prototype 上定义方法
Person.prototype.show=function (){
alert(this.name);
alert(this.age);
};
//用到类的时候，实例化 new 一个
let p = new Person("blue",18);
p.show();
//ES5的继承-------------------------------------------
//定义子类的构造函数
function Worker(name, age, job){
Person.call(this, name, age);
this.job=job;
}
Worker.prototype=new Person(); //继承父类的 prototype
//继承父类的prototype后，自身的 constructor 会乱掉，需要还原一下
Worker.prototype.constructor=Worker;
//添加 Worker 自己的方法
Worker.prototype.showJob=function (){
alert(this.job);
};
let w=new Worker('blue', 18, '打杂的');
w.show();
w.showJob();
</script>
</head>
<body>
</body>
</html>
ES6：
<!DOCTYPE html><html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script>
//ES6的面向对象 ，class 用来专门声明类的
class Person{
constructor(name, age){ // constructor 构造函数
this.name=name;
this.age=age;
}
show(){ // 直接在class里面写方法
alert(this.name);
alert(this.age);
}
}
//ES6的继承--------------------------------------
class Worker extends Person{ // 告诉系统 Worker 继承于 Person
constructor(name, age, job){ // 子类的constructor，参数比父类只多不少
super(name, age); //调父类的构造函数，用super关键字把需要的父类的参数传过来，需要什么就传什么
this.job=job; //子类自己的参数
}
showJob(){ //加上自己需要的，子类的方法
alert(this.job);
}
}
//类的使用方法和 ES5 没什么不同，实例化
let w=new Worker('blue', 18, '打杂的');
w.show(); //调父类的方法
w.showJob(); //调自己的方法
/*
*/
</script>
</head>
<body>
</body>
</html>
本文共计502个文字，预计阅读时间需要3分钟。
Example
ES5：
<!DOCTYPE html><html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script>
//定义构造函数
function Person(name, age){
this.name=name;
this.age=age;
}
//在原型 prototype 上定义方法
Person.prototype.show=function (){
alert(this.name);
alert(this.age);
};
//用到类的时候，实例化 new 一个
let p = new Person("blue",18);
p.show();
//ES5的继承-------------------------------------------
//定义子类的构造函数
function Worker(name, age, job){
Person.call(this, name, age);
this.job=job;
}
Worker.prototype=new Person(); //继承父类的 prototype
//继承父类的prototype后，自身的 constructor 会乱掉，需要还原一下
Worker.prototype.constructor=Worker;
//添加 Worker 自己的方法
Worker.prototype.showJob=function (){
alert(this.job);
};
let w=new Worker('blue', 18, '打杂的');
w.show();
w.showJob();
</script>
</head>
<body>
</body>
</html>
ES6：
<!DOCTYPE html><html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script>
//ES6的面向对象 ，class 用来专门声明类的
class Person{
constructor(name, age){ // constructor 构造函数
this.name=name;
this.age=age;
}
show(){ // 直接在class里面写方法
alert(this.name);
alert(this.age);
}
}
//ES6的继承--------------------------------------
class Worker extends Person{ // 告诉系统 Worker 继承于 Person
constructor(name, age, job){ // 子类的constructor，参数比父类只多不少
super(name, age); //调父类的构造函数，用super关键字把需要的父类的参数传过来，需要什么就传什么
this.job=job; //子类自己的参数
}
showJob(){ //加上自己需要的，子类的方法
alert(this.job);
}
}
//类的使用方法和 ES5 没什么不同，实例化
let w=new Worker('blue', 18, '打杂的');
w.show(); //调父类的方法
w.showJob(); //调自己的方法
/*
*/
</script>
</head>
<body>
</body>
</html>