javascript中有没有多态

javascript中有没有多态

浏览次数:686次
信息来源: 银河系资源网
更新日期: 2022-09-19
文章简介

JavaScript中有多态;多态表示的是同一操作作用于不同的对象上面可以产生不同的解释和不同的执行结果,JavaScript中的多态体现在子类中可直接实现同名函数即可覆盖父类函数,JavaScript中的父类函数都可以直接覆盖。...

JavaScript中有多态;多态表示的是同一操作作用于不同的对象上面可以产生不同的解释和不同的执行结果,JavaScript中的多态体现在子类中可直接实现同名函数即可覆盖父类函数,JavaScript中的父类函数都可以直接覆盖。

本教程操作环境:windows10系统、javascript1.8.5版

javascript中有多态

含义

同一操作作用于不同的对象上面,可以产生不同的解释和不同的执行结果

比方说,我养了一只猫和一只狗,我对它们发出同一个指令 “叫一下”,猫会喵喵喵,而狗会汪汪汪,所以让它们叫一下就是同一操作,而叫声不同则是不同的执行结果。

用伪代码来实现就是这样的:

function getVoice(animals) {
    if(animals instanceof Cat){
        console.log('喵~');
        
    }
    if(animals instanceof Dog){
        console.log('汪~');
    }
}
class Cat {}
class Dog {}
getVoice(new Cat()); // '喵~'
getVoice(new Dog()); // '汪~'

那么如果我们想增加一个动物呢?再多加一个判断?那么之后我每次都想要加一个动物的叫声就都要修改一次 getVoice?是不是有点繁琐呢?

所以我们要想想如何解决这个问题~

对象的多态性

其实多态最根本的作用就是通过把过程化的条件语句转化为对象的多态性,从而消除这些条件分支语句。

通俗一点来讲,就是把 “做什么” 和 “谁去做以及怎么去做” 分离开,抽象概括就是把 “不变的事物” 和 “可能改变的事物” 分离开。

最开始我们举的例子中就可以拆分理解成这样:

不变的事物是:动物发出叫声 可能改变的事物是:什么动物发出什么样的叫声

那我们就可以把 “动物发出叫声” 这个动作分布到各个类上(封装到各个类上),然后在发出叫声的 getVoice 函数中调用"叫"这个动作就可以了。

上面这个例子就可以修改成这样啦~

function getVoice (animals) {
    if (animals.sound instanceof Function) {
        // 判断是否有animal.sound且该属性为函数
        animals.sound();
    }
}
class Cat {
    sound () {
        console.log('喵~');
    }
}
class Dog {
    sound () {
        console.log('汪~');
    }
}
getVoice(new Cat()); // '喵~'
getVoice(new Dog()); // '汪~'

多态的实际应用

多态在设计模式中应用得比较广泛,比如 组合模式 / 策略模式等等。~~

虽然我们在平时的开发中不太用的到,但是一旦我们涉及到一些设计模式的话,多态还是很有用的

JS的封装与多态

除了继承,封装与多态也是面向对象思想的组成部分。JS的封装、多态也是通过属性的灵活应用“模拟”实现的。

通过在类中设置公共属性,并在子类中实现,就可以模拟封装。

而多态的体现,则更为简单,在子类中直接实现同名函数即可覆盖(override)父类函数。JS中没有类似C#中的virtualde 关键字,所有父类函数都可以直接覆盖。

示例:

function calc(value1,value2){
this.data1=value1;
this.data2=value2; 
this.GetResult;
this.toString=function(){
if(this.GetResult)
return this.GetResult()+"";
return "0";
}
}
 
function sumCalc(value1,value2){
calc.call(this,value1,value2)
this.GetResult=function(){ 
return this.data1+this.data2;
}
}
function productCalc(value1,value2){
calc.call(this,value1,value2)
this.GetResult=function(){ 
return this.data1*this.data2;
}
}
var s=new sumCalc(2,3);
alert(s.toString());  //弹框5
var p=new productCalc(2,3);
alert(p.toString());  //弹框6

如上,sumCalc类与productCalc类都继承并实现了calc类,并实现了“抽象函数”GetResult()。这就是JS封装的实现方式。

另外,JS中的所有类都继承于Object,而Object有自己的toString()函数。所以,上面calc类的toString()函数实际上覆盖了原有的函数----多态的体现。

标签: javascript
一起聊聊JavaScript函数的定义与基本使用
« 上一篇
Vue3中的lazy函数详解:懒加载组件提高应用性能的应用
下一篇 »
  • react-dnd怎么实现拖拽
    1774阅读
    实现方法:1、利用“import{DndProvider}from 'react-dnd'”定义一个可拖拽的范围;2、利用“import{useDrag}from 'react-dnd'”将DragSource包裹住组件,使其可以拖动即可。本教程操作环境:Window...
  • 引入Css样式中link和rel是什么意思
    1010阅读
    引入Css样式中的link和rel:1、link是html中用于定义文档与外部资源关系的标签,最常见的用途就是连接css样式表;2、rel是规定当前文档与被链接文档或者资源之间关系的属性,引入样式语法为“<link rel="stylesheet"...
  • 浅析Node中Express的错误处理中间件
    992阅读
    本篇文章带大家了解一下Node中Express的错误处理中间件,介绍一下定义错误处理中间件、与 async/await 一起使用的方法,希望对大家有所帮助!Express 的错误处理中间件可帮助您处理错误,而无需重复同样的工作。假设...
  • jquery中prev的含义是什么
    938阅读
    在jquery中,prev的含义是返回前一个同级元素;该方法用于返回前一个共享相同父元素的元素,并且该方法只返回一个元素,会沿着DOM元素的前一个同级元素向后遍历,语法为“元素对象.prev(搜索前一个同级元素范围的选择...
  • javascript怎么修改元素的style属性
    930阅读
    在javascript中,可以利用setAttribute()方法来修改style属性,该方法可以为一个已存在的指定属性修改属性值,语法“元素对象.setAttribute("style","样式代码");”。本教程操作环境:windows7系统、javascript1.8.5...
  • jquery怎么增加一个li元素
    855阅读
    增加li元素的方法:1、用“$("ul").append(li元素)”;2、用“$(li元素).appendTo("ul")”;3、用“$("ul").prepend(li元素)”;4、用“$(li元素).prependTo("ul")”。本教程操作环境:windows7系统、jquery1.10.2版...
  • jquery怎么移除多个class
    853阅读
    在jquery中,可以使用removeClass()方法来移除多个class类,只需要给该方法传入类名作为参数即可,语法“$(selector).removeClass("类名列表")”,多个类名间使用空格分隔;若省略参数,则会移除所有类。本教程操作环...
  • es6中引入了什么作用域
    842阅读
    es6中引入了“块级作用域”;es5中只有全局作用域和函数作用域,es6中由一对大括号包裹形成的作用域就是块级作用域,并明确允许在块级作用域中声明函数,函数声明语句的行为类似于let,在块级作用域之外不可引用。本...
  • web前端笔试题库之CSS篇
    828阅读
    之前的文章《web前端笔试题库之HTML篇》中,我们分享了一些关于HTML的前端面试题。下面本篇文章就接着上一篇,分享css部分的笔试题(附答案),大家快看看能答对几个!1、Q: CSS 属性是否区分大小写? ``` ul { ...
  • jquery怎么根据id改变元素值
    814阅读
    jquery根据id改变值的方法:1、给元素设置id属性;2、使用“$("#id属性值")”语句获取指定元素对象;3、使用“元素对象.html("新值")”、“元素对象.text("新值")”或“元素.val("新值")”语句来修改元素值。本教程操...

如本文对您有帮助,随意赞赏一下!