构造函数继承
<!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>
</body>
</html>
<script>
function Animal(name) {
this.type = "animal"
this.name = name
this.a = [1, 2]
this.sleep = function () {
console.log(this.name + "在睡觉");
}
}
function Animal2(name) {
this.name = name
this.play = function () {
console.log(this.name + "正在玩");
}
}
Animal.prototype.age = 5
Animal.prototype.eat = function (food) {
console.log(this.name + "正在吃" + food);
}
function cat(name) {
//构造继承
Animal.call(this)
Animal2.call(this)
this.name = name
}
const a = new cat("z")
//调用animal1的sleep
a.sleep()
//调用animal的play
a.play()
</script>
这样在父函数里面定义方法this就指向子类
原型链继承
<!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>
</body>
</html>
<script>
function Animal(name) {
this.type = "animal"
this.name = name
this.sleep = function () {
console.log(this.name + "在睡觉");
}
}
Animal.prototype.age = 5
Animal.prototype.eat = function (food) {
console.log(name + "正在吃" + food);
}
function cat(name) {
this.name = name
}
const a = new Animal("猫")
//原型链继承
cat.prototype = new Animal()
cat.prototype.constructor = cat
const b = new cat("狗")
console.log(a.name);
console.log(b.name);
b.sleep()
console.log(cat.prototype.constructor);
</script>
让原型链直接等于父类的构造函数，然后让子类的prototype.constructor指向他自己，因为让原型链直接等于父类的构造函数子类的prototype.constructor指向的就不是它本身了
缺点
组合继承
就是构造函数继承和原型链继承的结合
<!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>
</body>
</html>
<script>
function Animal(name){
this.type="animal"
this.name=name
this.sleep=function(){
console.log(this.name+"在睡觉");
}
}
Animal.prototype.age=5
Animal.prototype.eat=function(food){
console.log(name+"正在吃"+food);
}
function cat(name){
Animal.call(this)
this.name=name
}
const a=new Animal("SS")
//原型链继承
cat.prototype=new Animal()
cat.prototype.constructor=cat
const b=new cat("ss")
b.a="mao"
const c=new cat("sddd")
console.log(b.a);
console.log(c.a);
</script>
寄生继承
<!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>
</body>
</html>
<script>
function Animal(name) {
this.type = "animal"
this.name = name
this.sleep = function () {
console.log(this.name + "在睡觉");
}
}
Animal.prototype.age = 5
Animal.prototype.eat = function (food) {
console.log(name + "正在吃" + food);
}
function cat(name) {
this.aaa="cataa"
const intance = new Animal(name)
intance.__proto__ = Animal.prototype
return intance
}
const b = new cat("ss")
b.a = "mao"
const c = new cat("sddd")
console.log(b.a);
b.eat("ss")
console.log(b.aaa);
</script>
无聊的继承就是把父类复制过来，自己的东西没有了
寄生继承2
寄生组合继承（完美继承）
<!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>
</body>
</html>
<script>
function Animal(name) {
this.type = "animal"
this.name = name
this.sleep = function () {
console.log(this.name + "在睡觉");
}
}
Animal.prototype.age = 5
Animal.prototype.eat = function (food) {
console.log(name + "正在吃" + food);
}
function cat(name) {
this.aaa = "cataaa"
Animal.call(this)
}
//寄生组合继承需要一个第三方函数，把他用立即执行函数抱起来防止污染全局
(function () {
function abc() { }
//让这个第三方函数进行原型链继承
abc.prototype = Animal.prototype
cat.prototype = new abc()
})()
const b = new cat("ss")
b.a = "mao"
const c = new cat("sddd")
console.log(b.a);
b.eat("ss")
console.log(b.aaa);
console.log(b.type);
</script>
创建一个第三方函数，让他的原型链等于父类原型链，子类的原型链等于第三方的构造函数(就是组合继承的升级版，把原型链继承中添加一个第三方函数，让这个第三方函数等于父类原型链，再让子类等于第三方函数的构造函数)
es6 extends 关键字继承
<!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>
</body>
</html>
<script>
function Animal(name) {
this.type = "animal"
this.name = name
this.sleep = function () {
console.log(this.name + "在睡觉");
}
}
Animal.prototype.age = 5
Animal.prototype.eat = function (food) {
console.log(name + "正在吃" + food);
}
class cat extends Animal{
constructor(aaa,name,age){
super(name,age)
this.aaa=aaa
}
play(){
console.log("你好");
}
}
const c=new cat("aaa","猫咪",12)
c.sleep()
c.play()
</script>
