ES6继承ES5
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<script>
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.eat = function(){
console.log("吃");
}
class Son extends Person{}
const s = new Son("张三",18);
console.log(s);
s.eat();
</script>
</body>
</html>
ES5的原型继承
/*
缺点:
创建对象的时候,给属性赋值,不能直接的new出来
*/
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<script>
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.eat = function(){
console.log("吃");
}
function Son(){}
const p = new Person()
Son.prototype = new Person();
let son = new Son();
son.name = "张三"
son.age = 18;
console.log(son);
son.eat();
</script>
</body>
</html>
ES5的构造继承
/* 构造继承(call继承),构造继承不能继承方法,只能继承属性 */
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<script>
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.eat = function(){
console.log("吃");
}
function Son(name,age){
Person.call(this,name,age)
}
const son = new Son("张三",18)
console.log(son);
</script>
</body>
</html>
ES5的组合继承
/*
组合继承 = 原型继承+构造继承
*/
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<script>
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.eat = function () {
console.log("吃");
}
function Son(name,age) {
Person.call(this,name,age)
}
Son.prototype = new Person();
const son = new Son("张三",18);
console.log(son);
son.eat();
</script>
</body>
</html>