js面向对象特征

Jenny_Tong 发布于2019-08-23 15:23 / 2297人阅读

摘要：我们都知道面向对象拥有三大特征，分别为封装继承多态，其实在脚本语言中是不存在多态的，但是可以用的方式实现多态中的两种效果重载重写，那下面我们就来说一下面向对象的特征封装把抽象出的属性和对属性的方法封装在一起对外实现接口开放，说白了就是封装一

我们都知道js面向对象拥有三大特征，分别为封装、继承、多态，其实在javaScript脚本语言中是不存在多态的，但是可以用js的方式实现多态中的两种效果重载、重写，那下面我们就来说一下面向对象的特征

封装

把抽象出的属性和对属性的方法封装在一起对外实现接口开放，说白了就是封装一个方法或是类可以传入参数，供相同功能的外界使用，来达到相同的目的，便于对代码的管理

代码

   class Package {
       constructor (animal){
           this.animal = animal
       }
       zoo (animal) {
           console.log("this is"+ this.animal)
       }
       static private () {
           console.log("我是私有方法")
       }
   }

   let newPackage = new Package("大象")
   newPackage.zoo()
   newPackage.private() // Uncaught TypeError: newPackage.private is not a function

上面的一个比较简单的封装例子，通过animal参数传递来达到我们想要的结果，但是class类里面的静态方法是不会对外开放的所以会找不到这个函数

继承

继承可以使得子类具有父类别的各种属性和方法，而不需要再次编写相同的代码。在令子类别继承父类别的同时，可以重新定义某些属性，并重写某些方法，即覆盖父类别的原有属性和方法，使其获得与父类别不同的功能。另外，为子类追加新的属性和方法也是常见的做法。

代码

class PackageSon extends Package{
    constructor(animal, food){
        super(animal);
        this.food = food
    }
    zoo () {
        console.log("这是"+ this.animal)
    }
    eat () {
        console.log(this.animal+this.food)
    }
}

let newPackageSon = new PackageSon("大象", "吃草")
newPackageSon.zoo()
newPackageSon.eat()

上面的例子使用到了es6 class 语法糖内的super方法，其实它是实现了在这里指向了父类中的this对象，然后子类的构造函数再对其进行修改，然后zoo函数实现了对父类的重写，eat函数是子类新增的函数

多态

最开始我们已经知道了js严格讲是没有多态的，多态可以表现出我们的代码的多种状态，同一操作作用于不同的对象，可以有不同的解释，产生不同的执行结果。

重载表现代码
// 重载

class overload {
    init (callback) {
        if (callback === "go") {
            console.log("我是go")
        }else if(callback === "eat") {
            console.log("我是eat")
        }else {
            console.log("我是sprot")
        }
    }
}

var newOverload = new overload()
newOverload.init("go")
newOverload.init("eat")
newOverload.init("sprot")

上面是一个重载的例子，它根据我们调用构造函数传入不同的参数，来实现不同的效果，其实这里也使用上面讲到了的封装，所以面向对象的特征是无处不在

重写表现代码
// 重写

class  rewrite {
    go () {
        console.log("我在走路")
    }
    sport () {
        console.log("我在运动")
    }
}
class  rewriteSon extends rewrite{
    go () {
        console.log("我回家了")
    }
}

var newRewriteSon = new rewriteSon()
newRewriteSon.go()
newRewriteSon.sport()

上面是一个简单的重写例子，我们这里用到了继承，通过创建rewrite父类，编写了两个函数分别实现不同的操作，rewriteSon子类继承了父类上面的两个方法，子类中又重新写了相同名字的go方法，所以子类会把继承过来父类中的go方法覆盖掉，从而实现自己想要的操作，打印sport方法时会依旧得出继承父类方法的操作，所以子类只重写了go方法

GPU云服务器云服务器 js 面向对象视频 oop面向对象 js js面向对象开发表格对象面向对象

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101977.html

JavaScript面向对象的三大特征

摘要：什么是面向对象本文不在论述。接下来说一下面向对象的三大特征在当中的实现。封装实现封装实现就是是对象内部的变化对外界是透明的不可见。这种做法使对象之间低耦合便于维护升级团队协作开发。。概述本来打算写设计模式的，在谈论js的设计模式之前先说一下js的面向对象,因为很多设计模式的实现都掺杂着面向对象的思想,所以先做一下前期铺垫。 js我们都知道是一种动态类型脚本型语言,变量类型无法保证,...

chaosx110 2019-08-20 14:15 评论0 收藏0
JS面向对象一:MVC的面向对象封装

摘要：自己的理解的第一个参数就是的值如果没用默认是那个调用函数的当前的对象在全局作用域中就是被隐藏的所以不写且在全局作用于调用函数的时候就是可以使用或者自己指定的指向 JS面向对象一:MVC的面向对象封装 MDNjavascript面向对象面向对象(Object-Oriented) showImg(https://segmentfault.com/img/remote/1460000016...

Scliang 2019-08-26 12:16 评论0 收藏0
js面向对象编程的理解

摘要：构造函数对象初始化的瞬间被调用的方法。接下来看下自己做的一个小例子面向对象编程大家好这是一辆它的颜色是它的内饰是牧马人越野车绿色的简约精致的法拉利跑车红色的豪华舒畅的效果图注构造函数始终都应该以一个大写字母开头。 js的面向对象编程的理解面向对象的语言有一个标志，即拥有类的概念，抽象实例对象的公共属性与方法，基于类可以创建任意多个实例对象，一般具有封装、继承、多态的特性！但JS中对象...

wuaiqiu 2019-08-23 11:48 评论0 收藏0
大前端2018现在上车还还得及么

摘要：面向对象三大特征继承性多态性封装性接口。第五阶段封装一个属于自己的框架框架封装基础事件流冒泡捕获事件对象事件框架选择框架。核心模块和对象全局对象，，，事件驱动，事件发射器加密解密，路径操作，序列化和反序列化文件流操作服务端与客户端。第一阶段： HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础：Js基础教程、js内置对...

stormgens 2019-08-01 18:25 评论0 收藏0