JavaScript 继承封装多态实现及原理详解

网络编程 2024/11/15 佚名

3 1 2

面向对象的三大特性

封装

所谓封装，也就是把客观事物封装成抽象的类，并且类可以把自己的数据和方法只让可信的类或者对象操作，对不可信的进行信息隐藏。封装是面向对象的特征之一，是对象和类概念的主要特性。简单的说，一个类就是一个封装了数据以及操作这些数据的代码的逻辑实体。在一个对象内部，某些代码或某些数据可以是私有的，不能被外界访问。通过这种方式，对象对内部数据提供了不同级别的保护，以防止程序中无关的部分意外的改变或错误的使用了对象的私有部分。

我们在vue项目中使用混入将公有代码提出来，混入到每个需要的组件中，让我们的代码更简洁

我们也可以将一些公用的方法，工具进行封装，达到代码复用，让我们的代码更简洁

继承

所谓继承是指可以让某个类型的对象获得另一个类型的对象的属性的方法。它支持按级分类的概念。继承是指这样一种能力：它可以使用现有类的所有功能，并在无需重新编写原来的类的情况下对这些功能进行扩展。通过继承创建的新类称为“子类”或“派生类”，被继承的类称为“基类”、“父类”或“超类”。继承的过程，就是从一般到特殊的过程。要实现继承，可以通过“继承”（Inheritance）和“组合”（Composition）来实现。继承概念的实现方式有二类：实现继承与接口继承。实现继承是指直接使用基类的属性和方法而无需额外编码的能力；接口继承是指仅使用属性和方法的名称、但是子类必须提供实现的能力；

实现继承的几种方式

call继承

function a (){
    this.c=111
  }
  function b(){
    a.call(this)
  }
  let d = new b()
  console.log(d.c) // 111

上面代码相当于函数b继承了函数a的私有属性，通过改变父类的this实现继承

原型继承

 function a (){
    this.c=111
  }
  a.prototype.getName=function(){
    return '你好'
  }
  function b(){
    // a.call(this)
  }
  b.prototype=new a()
  b.constructor=b
  let d = new b()
  console.log(d.c) // 111
  console.log(d.getName()) // 你好

原型继承通过将父类的实例赋值给子类的原型，这种方法子类可以继承父类的私有方法也可以继承父类的私有方法

寄生组合继承

 function a (){
    this.c=111
  }
  a.prototype.getName=function(){
    return '你好'
  }
  function b(){
    a.call(this)
  }
  b.prototype=Object.create(a.prototype)
  let d = new b()
  console.log(d.c) // 111
  console.log(d.getName()) // 你好

寄生组合继承就是使用call继承改变this，实现私有继承私有，使用object.create实现公有继承公有

es6 extends 继承

class parent{
    constructor(){
      this.a=1
    }
    name(){
      return 2
    }
  }
  class child extends parent{
    
  }
  let A = new child()
  console.log(A.a) // 1
  console.log(A.name()) // 2

这里通过关键字extends实现子类继承父类的私有和公有，这里需要注意如果子类里面写了constructor，就必须写super否则会报错

class parent{
    constructor(){
      this.a=1
    }
    name(){
      return 2
    }
  }
  class child extends parent{
    constructor(){
    // 这里不写super会报错，报错信息如下
    }
  }
  // ncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor at new child

多态

所谓多态就是指一个类实例的相同方法在不同情形有不同表现形式。多态机制使具有不同内部结构的对象可以共享相同的外部接口。这意味着，虽然针对不同对象的具体操作不同，但通过一个公共的类，它们（那些操作）可以通过相同的方式予以调用。

重载

函数重载是指在同一作用域内，可以有一组具有相同函数名，不同参数列表的函数，这组函数被称为重载函数。重载函数通常用来命名一组功能相似的函数，这样做减少了函数名的数量，避免了名字空间的污染，对于程序的可读性有很大的好处。

js通过函数名找到对应的函数对象
然后根据函数按照定义时的参数，和表达式参数列表按顺序匹配，多余的参数舍去，不够的参数按undefined处理
然后执行函数代码。

 // 可以跟据arguments个数实现重载
  function add() {
    var sum = 0 ;
    for ( var i = 0 ; i < arguments.length; i ++ ) {
      sum += arguments[i];
    }
    return sum;
  }
  console.log(add()) // 0
  console.log(add(1,2)) // 3
  console.log(add(1,2,3)) // 6

重写

“实例中的指针仅指向原型，而不是指向构造函数”。

“重写原型对象切断了现有原型与任何之前已经存在的对象实例之间的关系；它们引用的仍然是最初的原型”。

var parent = function(name,age){
  this.name = name;
  this.age = age;
}
 
parent.prototype.showProper = function(){
  console.log(this.name+":"+this.age);
}
 
var child = function(name,age){
  parent.call(this,name,age);
}
 
// inheritance
child.prototype = Object.create(parent.prototype);
// child.prototype = new parent();
child.prototype.constructor = child;
 
// rewrite function
child.prototype.showProper = function(){
  console.log('I am '+this.name+":"+this.age);
}

var obj = new child('wozien','22');
obj.showProper();

上面这段代码通过使用寄生组合继承，实现子类私有继承父类私有，子类公有继承父类公有，达到重写父类的showProper

面向对象的5大原则

单一职责原则
开放封闭原则
替换原则
依赖原则
接口分离原则

单一职责原则

单一职责原则就是我们说的一个方法只做一件事，就比如现在的项目结构，就遵循了单一职责原则

开放封闭原则

开放封闭原则就是对修改关闭，对扩展开放

class a {
   add(){
     return 11
   }
 }
 class b extends a{
   
 }
 let c = new b()
 console.log(c.add()) // 111

我们可以使用extends继承父类，可以再b里面修改add函数，实现对修改关闭，对扩展开放

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

javascript,继承,封装,多态

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“JavaScript 继承封装多态实现及原理详解”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

JavaScript 继承封装多态实现及原理详解

教你搭建按需加载的Vue组件库(小结)

Vue2.0实现简单分页及跳转效果

评论“JavaScript 继承封装多态实现及原理详解”

更新日志

友情链接

JavaScript 继承 封装 多态实现及原理详解

教你搭建按需加载的Vue组件库(小结)

Vue2.0实现简单分页及跳转效果

评论“JavaScript 继承 封装 多态实现及原理详解”

更新日志

友情链接

JavaScript 继承封装多态实现及原理详解

评论“JavaScript 继承封装多态实现及原理详解”