Prototype chain inheritance:
Advantages: Parent class methods can be reused
Disadvantages: All reference types (array objects) of the parent class will be shared by subclasses, and if one subclass data is changed, other data will be affected
function Person() {
this.name = '张三';
this.eats = ['香蕉', '苹果'];
this.getName = function () {
console.log(this.name);
}
}
Person.prototype.get = function () {
console.log('Person 继承的方法');
}
function Student() {
}
Student.prototype = new Person
console.log('------------------p1---------------');
const p1 = new Student()
p1.get()
p1.eats.push('橘子') // p1 更改了 eats 数组里面的值 ，p2 拿到的就是更改之后的值
p1.name = '李四' // 更改 name 值 ，p2 不受影响
console.log(p1.name);
console.log(p1.eats);
console.log('-----------------p2----------------');
const p2 = new Student()
console.log(p2.name);
console.log(p2.eats);
p2.get()
constructor inheritance
Advantages: The application type of the parent class will not be changed by the subclasses and will not affect each other
Disadvantages: Subclasses cannot access the methods and parameters of the prototype properties of the parent class
function Person() {
this.name = '张三';
this.eats = ['香蕉', '苹果'];
this.getName = function () {
console.log(this.name);
}
}
Person.prototype.get = () => { // 此方法不能使用
console.log('Person 继承的方法');
}
function Student() {
Person.call(this) // 指向 Student
}
console.log('-----------------p1----------------');
const p1 = new Student()
p1.name = 'ssss'
p1.eats.push('菠萝') // 只会自己更改，不会影响别人
console.log(p1);
console.log('-----------------p2----------------');
const p2 = new Student()
console.log(p2);
At this time, we will output the get method, which does not exist
Composition inheritance
Advantages: 1. The parent class can be reused
2. The reference properties of the parent class constructor will not be shared
Disadvantage: The constructor of the parent class will be called twice, and there will be two copies of the same attributes and methods, which will affect performance
function Person() {
this.name = '张三';
this.eats = ['香蕉', '苹果'];
this.getName = function () {
console.log(this.name);
}
}
Person.prototype.get = () => {
console.log('Person 继承的方法');
}
function Student() {
Person.call(this)
}
Student.prototype = new Person // 增
const p1 = new Student()
console.log(p1);
parasitic compositional inheritance
function Person() {
this.name = '张三';
this.eats = ['香蕉', '苹果'];
this.getName = function () {
console.log(this.name);
}
}
Person.prototype.get = () => {
console.log('Person 继承的方法');
}
function Student() {
Person.call(this)
}
// 创建一个中转站
const Fn = function () { }
Fn.prototype = Person.prototype
Student.prototype = new Fn() // 增
const p1 = new Student
p1.get()
console.log(p1); 