javaScript面向对象的三个基本特征介绍

javaScript面向对象的三个基本特征介绍

了解过面向对象的同学应该都知道,面向对象三个基本特征是:封装、继承、多态,但是对于这三个词具体可能不太了解。对于前端来讲接触最多的可能就是封装与继承,对于多态来说可能就不是那么了解了。

封装

在说封装之先了解一下封装到底是什么?

什么是封装

封装:将对象运行所需的资源封装在程序对象中——基本上,是方法和数据。对象是“公布其接口”。其他附加到这些接口上的对象不需要关心对象实现的方法即可使用这个对象。这个概念就是“不要告诉我你是怎么做的,只要做就可以了。”对象可以看作是一个自我包含的原子。对象接口包括了公共的方法和初始化数据。(节选自百度百科)

立即学习“Java免费学习笔记(深入)”;

我对于封装的理解,可能还有一个步骤就是抽离,首先你要清楚在一个对代码中你应该抽离那些属性方法,有了这些为基础才能更好的做好封装。

封装无非就是其属性和方法封装。

类:封装对象的属性和行为

方法:封装具体逻辑功能

访问封装:访问修饰封装无非就是对其访问权限进行封装

class Employees {    constructor(name,age){        this.name = name;        this.age = age;    }    getInfo(){        let {name,age} = this;        return {name,age};    }    static seyHi(){        console.log("Hi");       }}let lisi = new Employees("Aaron",18);lisi.seyHi();   // lisi.seyHi is not a functionlisi.getInfo();  // {name: "Aaron", age: 18}Employees.seyHi();  // Hi

登录后复制

在Employees中抽出的公共属性有name,age,公共方法有getInfo,seyHi,然而getInfo与seyHi所不同的是seyHi使用了static修饰符,改变其为静态方法,seyHi只属于Employees这个类。然而getInfo方法则是属于实例的。

这里使用了static对seyHi方法对其进行了访问权限的封装。

再举一个例子。

Promise.then()  //  Promise.then is not a functionlet p1 = new Promise(() => {})p1.then();  //  Promise {}Promise.all([1]);   //  Promise {: Array(1)}

登录后复制

从上面的代码中可以看出Promise也使用了static对其方法的访问权限进行了封装。

继承

继承:说到继承并不太陌生,继承可以使得子类具有父类的各种的公有属性和公有方法。而不需要再次编写相同的代码。在令子类别继承父类别的同时,可以重新定义某些属性,并重写某些方法,即覆盖父类别的原有属性和方法,使其获得与父类别不同的功能。(节选自百度百科)

子类继承父类后,子类具有父类属性和方法,然而也同样具备自己所独有的属性和方法,也就是说,子类的功能要比父类多或相同,不会比父类少。

class Employees {    constructor(name){        this.name = name;    }    getName(){        console.log(this.name)    }    static seyHi(){        console.log("Hi");       }}class Java extends Employees{    constructor(name){        super(name);    }    work(){        console.log("做后台工作");    }}let java = new Java("Aaron");java.getName();java.work();// java.seyHi();    //  java.seyHi is not a function

登录后复制

从上面的例子可以看出继承不会继承父类的静态方法,只会继承父类的公有属性与方法。这一点需要注意。

子类继承之后既拥有了getName方法,同样也拥有自己的worker方法。

多态

多态:按字面的意思就是“多种状态”,允许将子类类型的指针赋值给父类类型的指针。(节选自百度百科)

说白了多态就是相同的事物,调用其相同的方法,参数也相同时,但表现的行为却不同。多态分为两种,一种是行为多态与对象的多态。

多态的表现形式重写与重载。

什么是重写

重写:子类可继承父类中的方法,而不需要重新编写相同的方法。但有时子类并不想原封不动地继承父类的方法,而是想作一定的修改,这就需要采用方法的重写。方法重写又称方法覆盖。(节选自百度百科)

class Employees {    constructor(name){        this.name = name;    }    seyHello(){        console.log("Hello")    }    getName(){        console.log(this.name);    }}class Java extends Employees{    constructor(name){        super(name);    }    seyHello(){        console.log(`Hello,我的名字是${this.name},我是做Java工作的。`)    }}const employees = new Employees("Aaron");const java = new Java("Leo");employees.seyHello();   //  Hellojava.seyHello();    //  Hello,我的名字是Leo,我是做Java工作的。employees.getName();    //  Aaronjava.getName(); //  Leo

登录后复制

通过上面的代码可以看出Java继承了Employees,然而子类与父类中都存在seyHello方法,为了满足不同的需求子类继承父类之后重写了seyHello方法。所以在调用的时候会得到不同的结果。既然子类继承了父类,子类也同样拥有父类的getName方法。

什么是重载

重载就是函数或者方法有相同的名称,但是参数列表不相同的情形,这样的同名不同参数的函数或者方法之间,互相称之为重载函数或者方法。(节选自百度百科)

class Employees {    constructor(arg){        let obj = null;        switch(typeof arg)        {            case "string":                  obj = new StringEmployees(arg);                  break;            case "object":                  obj = new ObjEmployees(ObjEmployees);                  break;            case "number":                obj = new NumberEmployees(ObjEmployees);                break;        }        return obj;    }}class ObjEmployees {    constructor(arg){        console.log("ObjEmployees")    }}class StringEmployees {    constructor(arg){        console.log("StringEmployees")    }}class NumberEmployees {    constructor(arg){        console.log("NumberEmployees")    }}new Employees({})   // ObjEmployeesnew Employees("123456") //  StringEmployeesnew Employees(987654)   //  NumberEmployees

登录后复制

因为JavaScript是没有重载的概念的所以要自己编写逻辑完成重载。

在上面的代码中定义了Employees,ObjEmployees,StringEmployees,NumberEmployees类,在实例化Employees的时候在constructor里面进行了判断,根据参数的不同返回不同的对应的类。

这样完成了一个简单的类重载。

总结

封装可以隐藏实现细节,使得代码模块化;

继承可以扩展已存在的代码模块(类),它们的目的都是为了——代码重用。

多态就是相同的事物,调用其相同的方法,参数也相同时,但表现的行为却不同。多态分为两种,一种是行为多态与对象的多态。

在编程的是多多运用这个写思想对其编程时很有用的,能够使你的代码达到高复用以及可维护。

相关免费学习推荐:js视频教程

以上就是javaScript面向对象的三个基本特征介绍的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2725156.html

(0)
上一篇 2025年3月7日 23:20:39
下一篇 2025年2月19日 07:11:08

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 如何设计算法?常见的算法范式介绍

    如何设计算法?下面本篇文章给大家分析一下常见的算法范式。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 首先明确三个概念: 算法: 按步骤解决问题的过程。 范式: 思考问题的模式。 算法范式: 为问题构建高效解决方案的常规…

    2025年3月7日
    200
  • 你需要知道的关于javascript计时器的所有内容

    先从一个面试题开始: JavaScript 面试题:setTimeout 和 setInterval 的源代码是在哪里实现的? (不能百度和谷歌 ) 在继续往下看之前,请先在你的头脑中回答问题 你的答案可能会是 V8(或其他VM),但很遗憾…

    2025年3月7日
    200
  • Node.js 15正式版发布,将替代Node.js 14成为当前的的稳定发行版

    前两天,Node.js官方发布了Node.js 15的正式版本,Node.js 15 将替代 Node.js 14 成为当前的的稳定发行版,后者将在本月晚些时候升级为 LTS(长期支持)版本。如果大家想体验下Node.js 15 的最新功能…

    2025年3月7日
    200
  • js数组怎么去重?

    js数组去重方法:1、使用ES6的Set对象去重;2、利用for嵌套for,然后splice去重;3、利用indexOf去重;4、利用对象的属性不能相同的特点进行去重;5、利用Map数据结构去重;6、利用reduce+includes去重。…

    2025年3月7日
    200
  • js数组去重方法的总结

    js数组去重的方法:1、利用ES6 Set去重;2、利用for嵌套for,然后splice去重;3、利用indexOf去重;4、利用sort()去重;5、利用对象的属性不能相同的特点进行去重等等。 推荐:《js视频教程》 数组去重,一般都是…

    2025年3月7日
    200
  • JavaScript 中判断变量是否为数字

    今天javascript栏目如何判断变量是否为数字。 大家都说简历没项目写,我就帮大家找了一个项目。 简介 JavaScript 是一种动态类型语言,这意味着解释器在运行时确定变量的类型。实际上,这也允许我们在相同的代码中使用相同的变量来存…

    2025年3月7日
    200
  • 详解JS中的JSON和JSONP

    简单地使用json并不能支持跨域资源请求,为了解决这个问题,需要采用jsonp数据交互协议。众所周知,js文件的调用不受跨域与否的限制,因此如果想通过纯web端跨域访问数据,只能在远程服务器上设法将json数据封装进js格式的文件中,供客户…

    2025年3月7日
    200
  • 详解构建可运行的JavaScript规范的方法

    编程不仅仅是给计算机下达如何完成一项任务的指令,它还包括以一种精确的方式与他人交流思想,甚至是与未来的自己。这样的交流可以有多个目标,也许是为了共享信息,或者只是为了更容易地修改—如果你不理解或不记得很久以前做过什么,那么就很难修改。 当我…

    2025年3月7日
    200
  • 十五条 JavaScript 编程技巧

    .markdown-body{word-break:break-word;line-height:1.75;font-weight:400;font-size:15px;overflow-x:hidden;color:#333}.markd…

    2025年3月7日 编程技术
    200
  • 分享5个JS函数的高级技巧

    函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。函数对任何一门语言来说都是一个核心的概念,在javascript中更是如此。本文将深入介绍函数的5个高级技巧。 作用域安全的构造函数 构造函数其实就是一个使用new操作符调用的函数…

    2025年3月7日
    200

发表回复

登录后才能评论