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


Posted in Javascript onJuly 29, 2019

面向对象的三大特性

封装

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

我们在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 相关文章推荐
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 Javascript
微信小程序 地图定位简单实例
Oct 14 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 Javascript
ECMAScript6--解构
Mar 30 Javascript
深入探究node之Transform
Jul 20 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
vue select选择框数据变化监听方法
Aug 24 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
Feb 11 Javascript
一文彻底理解js原生语法prototype,__proto__和constructor
Oct 24 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 #Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 #Javascript
js实现多张图片每隔一秒切换一张图片
Jul 29 #Javascript
javascript面向对象程序设计实践常用知识点总结
Jul 29 #Javascript
javascript中this的用法实践分析
Jul 29 #Javascript
学习LayUI时自研的表单参数校验框架案例分析
Jul 29 #Javascript
jquery.pager.js分页实现详解
Jul 29 #jQuery
You might like
盘点被央视点名过的日本动画电影 一部比一部强
2020/03/08 日漫
VFP与其他应用程序的集成
2006/10/09 PHP
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
php实现两表合并成新表并且有序排列的方法
2014/12/05 PHP
php文件上传你必须知道的几点
2015/10/20 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
Laravel 将数据表的数据导出,并生成seeds种子文件的方法
2019/10/09 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
JQuery select标签操作代码段
2010/05/16 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
js调试系列 初识控制台
2014/06/18 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
2015/03/23 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
Vue加载组件、动态加载组件的几种方式
2018/08/31 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
2020/02/05 Javascript
python 网络编程常用代码段
2016/08/28 Python
Python实现的HMacMD5加密算法示例
2018/04/03 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
基于python实现名片管理系统
2018/11/30 Python
使用Python实现批量ping操作方法
2020/05/06 Python
基于Python组装jmx并调用JMeter实现压力测试
2020/11/03 Python
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
泰国最新活动和优惠:Megatix
2020/05/07 全球购物
大学生作弊检讨书
2014/02/19 职场文书
体现团队精神的口号
2014/06/06 职场文书
物理课外活动总结
2014/08/27 职场文书
郭明义观后感
2015/06/08 职场文书
客户答谢会致辞
2015/07/30 职场文书
攻略丨滑雪究竟该选哪款对讲机?
2022/02/18 无线电
nginx配置之并发频次限制
2022/04/18 Servers