js的面向对象+继承

2024-02-18 18:54:58

1.面向对象是一种编程思想

js本身是基于面向对象编程的

js内置了很多类，比如Promise，我们可以通过new Promise() 来创建一个实例处理异步编程

js的一些框架也是基于面向对象的，比如react、vue、jquery，都是通过创建实例进行操作的

js封装的一些插件也是基于面向对象的，通过创建实例来管理他们的私有属性和公共方法，比如swiperjs、拖拽等

2.js的面向对象区别于其它语言

js的面向对象是基于原型和原型链的

js的重载、重写和继承也和其它语言不一样

3.继承-原型链继承

3.1. js的继承是通过把Parent的实例赋值给Child的prototype，子类实例查找属性和方法，是基于__protop__原型链查找机制完成的。（其它语言的继承是通过拷贝实现的）

3.2. js的重写会改写其父类的方法，影响其它子类，比如 Child.prototype.__proto__.func1() = ....这种形式重写父类的方法

3.3 父类的私有属性和公有属性通过继承都变成了子类的共有属性和方法了

// 原型链继承
function Parent(x){
   this.x = x
}

Parent.prototype.getX = function(){
   return this.x
}

function Child(y){
   this.y = y
}

Child.prototype = new Parent(200)
Child.prototype.getY = function(){
   return this.y
}
Child.prototype.constructor = Child

4. 继承-call继承

4.1. 在Child中把Parent当作普通函数执行，通过call把this指向Child实例，让Child实现对Parent的私有属性和方法的继承

4.2. 只能继承Parent的私有方法和属性（因为是把子类当普通方法执行的，和原型链没有关系）

// call方式继承
function Parent(x){
   this.x = x
}

Parent.prototype.getX = function(){
   return this.x
}

function Child(y){
   Parent.call(this,200)
   this.y = y
}

Child.prototype.getY = function(){
   return this.y
}

5.继承-寄生组合继承

5.1. call + 类似原型链继承

5.2 子类能分别继承父类的私有和共有属性和方法

// 寄生组合继承
function Parent(x){
   this.x = x
}

Parent.prototype.getX = function(){
   return this.x
}

function Child(y){
   // call继承私有属性和方法
   Parent.call(this,200)
   this.y = y
}

// Object.create()继承原型属性和方法
Child.prototype = Object.create(Parent.prototype)
Child.prototype.getY = function(){
   return this.y
}
Child.prototype.constructor = Child

/* 实现Object.create(obj)
* 创建一个空对象，让空对象的原型指向obj
*/
Object.create = function(obj){
    function F(){}
    F.prototype = obj
    return new F()
}

6.继承-es6方式

class A{
   constructor(x){
       this.x = x
   }
   getX(){
       return this.x
   }
}
class B extends A{
   constructor(y){
      super()
      this.y = y
   }
    getY(){
        return this.y
    }
}

码农公寓