在 JS 中如何实现类

ES5中 使用原型实现类

function Chicken(name) {
  this.name = name;
}
Chicken.prototype.skill = function () {
  console.log(`我是${this.name},我可以唱跳 rap 篮球`);
};
const chicken = new Chicken("练习时长两年半的练习生");
chicken.skill(); 

上面 Chicken 函数就是一个类

ES6中使用 class

class Chicken {
    constructor(name){
        this.name = name
    }
    skill(){
        console.log(`我是${this.name},我可以唱跳 rap 篮球`);
    }
}
const chicken = new Chicken("练习时长两年半的练习生")
chicken1.skill()

在 JS 中如何实现继承

ES5中使用原型实现继承

function Human(name) {
  this.name = name;
}
Human.prototype.run = function () {
  console.log(`我可以run`);
};

function Persion(age) {
  // 关键代码
  Human.call(this, "练习时长两年半的练习生"); //相当于 this.name = "练习时长两年半的练习生"  实现了 name 属性的继承
  this.age = age;
}
// 关键代码
Persion.prototype.__proto__ = Human.prototype;//实现原型链中方法的继承
Persion.prototype.skill = function () {
  console.log(`我是${this.name},我可以唱跳 rap 篮球`);
};

注意：Persion.prototype.proto = Human.prototype; 在浏览器中__proto__是浏览器实现的属性，应该避免使用
那应该如何实现呢？
让 Persion.prototype = Human.prototype不就好了

function Human(name) {
  this.name = name;
}
Human.prototype.run = function () {
  console.log(`我可以run`);
};

function Persion(age) {
  // 关键代码
  Human.call(this, "练习时长两年半的练习生"); //相当于 this.name = "练习时长两年半的练习生"  实现了 name 属性的继承
  this.age = age;
}
// Persion.prototype.__proto__ = Human.prototype; // 关键代码  实现原型链的继承
Persion.prototype = new Human();
Persion.prototype.skill = function () {
  console.log(`我是${this.name},我可以唱跳 rap 篮球`);
};
const p = new Persion(16)
p.skill()
console.dir(p)

这样就将Persion.prototype -->Human.prototype
看下 p的结构

WechatIMG45.jpg

p 中有 name属性，p的原型中（也就是 Human.prototype）也有个 name属性
看着不太美观，如何只想Persion.prototype继承 Human 的方法，不继承 name属性？

function Human(name) {
  this.name = name;
}
Human.prototype.run = function () {
  console.log(`我可以run`);
};

function Persion(age) {
  // 关键代码
  Human.call(this, "练习时长两年半的练习生"); // 关键代码  实现 Human name 属性的继承
  this.age = age;
}
// Persion.prototype.__proto__ = Human.prototype; // 关键代码  实现原型链的继承
let f = function(){}
f.prototype = new Human()
Persion.prototype = new f()
Persion.prototype.skill = function () {
  console.log(`我是${this.name},我可以唱跳 rap 篮球`);
};
const p = new Persion(16)
p.skill()
console.dir(p)

上面声明一个空函数f，f 的 prototype指向 Human 的 prototype,Persion 的 prototype指向 f 的 prototype 这样子对象 p 的原型中就没有 name属性了

image.png

ES6中使用class extends 实现继承

class Human {
  constructor(name) {
    this.name = name;
  }
  run() {
    console.log(`我可以run`);
  }
}

class Persion extends Human {
  constructor(age) {
    super("练习时长两年半的练习生");
    this.age = age;
  }
  skill() {
    console.log(`我是${this.name},我可以唱跳 rap 篮球`);
  }
}
const p = new Persion(16)
p.run()
p.skill()
console.dir(p)

看下结构

image.png