Prototype chain: Each instance object (object) has a private attribute __proto__ that points to the prototype object prototype of its constructor. The prototype object also has its own prototype object __proto__, and look up layer by layer until Object is found. The __proto__ of Object's prototype object is null.
let date = new Date()
console.log(date.__proto__ === Date.prototype); //true
console.log(date.__proto__.constructor === Date); //true
console.log(date.__proto__.__proto__ === Date.prototype.__proto__); //true
console.log(Date.prototype.__proto__.constructor === Object); //true
console.log(Date.prototype.__proto__ === Object.prototype); //true
console.log(Object.prototype.__proto__ === null); //true
Encapsulation: Encapsulate common methods or components to achieve code reuse and make our code more concise.
Inheritance: subclasses inherit the instances and methods in the parent class.
Polymorphism: different objects act on the same operation to produce different effects
1. Prototype chain inheritance
Features: Inherit the properties and methods on the prototype of the parent class.
Disadvantages: When creating a subclass instance, you cannot pass parameters to the parent class constructor, and multiple inheritance cannot be achieved
//父类
function Person(name) {
this.name = name;
this.sleep = function(){
console.log(this.name + '正在睡觉')
}
}
Person.prototype.change = "123木头人"
Person.prototype.sayHi = function () {
console.log("您好啊！");
};
//子类
function Child(age) {
this.age = age
}
Child.prototype = new Person()
Child.prototype.constructor = Child
let child = new Child(10)
console.dir(child)
2. Constructor inheritance
Features: Solve the problem of passing parameters from the subclass constructor to the parent class constructor, which can achieve multiple inheritance (call or apply multiple parent classes).
Disadvantages: methods are defined in the constructor and cannot be reused and cannot inherit the properties on the prototype. And method
//父类
function Person(name) {
this.name = name;
this.sleep = function(){
console.log(this.name + '正在睡觉')
}
}
Person.prototype.change = "123木头人"
Person.prototype.sayHi = function () {
console.log("您好啊！");
};
//子类
function Child(name，age) {
Person.call(this, name)
// Person.apply(this, [name]) //=> apply后面的参数是个数组.
this.age = age;
}
let child = new Child("校长",10)
console.dir(child)
3. Combination inheritance
Features: Combining methods 1 and 2, functions can be reused, properties and methods can be inherited, and properties and methods of prototype can be inherited.
Disadvantages: properties and methods of the parent class will be mounted twice (there are two name and sleep ), produce small bugs,
//父类
function Person(name) {
this.name = name;
this.sleep = function(){
console.log(this.name + '正在睡觉')
}
}
Person.prototype.change = "123木头人"
Person.prototype.sayHi = function () {
console.log("您好啊！");
};
//子类
function Child(name，age) {
Person.call(this, name)
// Person.apply(this, [name]) //=> apply后面的参数是个数组.
this.age = age;
}
Child.prototype = new Person()
Child.prototype.constructor = Child
let child = new Child("校长",10)
console.dir(child)
4. Parasitic combination inheritance
Features: Repair the deficiencies of combined inheritance through parasitic methods, and achieve perfect inheritance.
The Object.create() method creates an empty object, allowing properties and methods to be inherited to the object’s __proto__
//父类
function Person(name) {
this.name = name;
this.sleep = function(){
console.log(this.name + '正在睡觉')
}
}
Person.prototype.change = "123木头人"
Person.prototype.sayHi = function () {
console.log("您好啊！");
};
//子类
function Child(name，age) {
Person.call(this, name)
// Person.apply(this, [name]) //=> apply后面的参数是个数组.
this.age = age;
}
Child.prototype = Object.create(Person.prototype)
Child.prototype.constructor = Child
let child = new Child("校长",10)
console.dir(child)
5.ES6 class extend inheritance
//class 相当于es5中构造函数
//class中定义方法时，前后不能加function，全部定义在class的protopyte属性中
//class中定义的所有方法是不可枚举的
//class中只能定义方法，不能定义对象，变量等
//class和方法内默认都是严格模式
//es5中constructor为隐式属性
class People {
constructor(name, age) {
this.name = name;
this.age = age;
}
sleep() {
console.log(`${
this.name} ${
this.age} 正在睡觉`)
}
}
//继承父类
class Child extends People {
constructor(name, age) {
//继承父类属性
super(name, age);
}
sleep() {
console.log(this);
//继承父类方法
super.sleep()
}
}
let child = new Child('小红',18);
console.log(child);
child.sleep(); //小红 18 正在睡觉
Summary: The difference between ES5 inheritance and ES6 inheritance. ES5 inheritance
first creates its own this point in the subclass, and finally adds the method to this.
ES6 inheritance uses keywords to first create the instance object this of the parent class, and finally in the subclass class Modify this