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 相关文章推荐
IE8 浏览器Cookie的处理
Jan 31 Javascript
javascript 异步页面查询实现代码(asp.net)
May 26 Javascript
js在指定位置增加节点函数insertBefore()用法实例
Jan 12 Javascript
在Javascript中处理字符串之big()方法的使用
Jun 08 Javascript
node.js实现爬虫教程
Aug 25 Javascript
jquery实现垂直和水平菜单导航栏
Aug 27 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 Javascript
Echarts基本用法_动力节点Java学院整理
Aug 11 Javascript
selenium+java中用js来完成日期的修改
Oct 31 Javascript
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 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
深入解析PHP中的(伪)多线程与多进程
2013/07/01 PHP
使用php检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
非常经典的PHP文件上传类分享
2016/05/15 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
JavaScript学习点滴 call、apply的区别
2010/10/22 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
jQuery+ajax实现无刷新级联菜单示例
2015/05/21 Javascript
jquery Deferred 快速解决异步回调的问题
2016/04/05 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
Python新手实现2048小游戏
2015/03/31 Python
Python中的多重装饰器
2015/04/11 Python
Python中tell()方法的使用详解
2015/05/24 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
python3实现点餐系统
2019/01/24 Python
Django框架模板的使用方法示例
2019/05/25 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
Django集成MongoDB实现过程解析
2020/12/01 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
狗狗玩具、零食和咀嚼物的月度送货服务:Super Chewer
2018/08/22 全球购物
印度第一网上礼品店:IGP.com
2020/02/06 全球购物
2014年师德承诺书
2014/05/23 职场文书
新教师培训方案
2014/06/08 职场文书
农村门前三包责任书
2014/07/25 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
解决Windows Server2012 R2 无法安装 .NET Framework 3.5
2022/04/29 Servers
关于mysql中string和number的转换问题
2022/06/14 MySQL