面向对象三要素之封装和多态

关于封装

关于面向对象三要素，我们在前面讲了关于继承的内容，这篇文章，我们接着讲三要素之封装和多态， “封装”一词语，在开发中经常听到，今天我们要说的是面向对象中的封装，受限于JS的弱类型，我们在JS中，其实对于面向对象的封装的应用还是比较少的，这篇文章，我们将聊一聊“封装”，在学习封装之前，我们先要了解三个关键字

• public--完全开放
• protected--对子类开放
• private--对自己开发

上面这三个关键字，对我们类中的属性，做了一定的约束。
因为JS中没有这三个关键字，所以我们通过JS是没有办法体现其特性的。所以，这里我们将通过typeScript来演示，因为ts是支持的。
我们演示一下。这里我将在之前的代码中直接集成ts，你可以跟着我来，也可以自己找环境去测试。

• 安装ts和ts-loader

yarn add typeScript ts-loader -S

• 初始化ts

tsc --init

这时候项目根目录会生成一个ts.config.json的配置文件，我们暂时使用默认配置。

• 配置ts-loader

// 省略其余配置
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
            },
            {
                test: /\.ts$/,
                exclude: /node_modules/,
                loader: 'ts-loader',
            }
        ]
    },

这时候，我们写一段ts代码

class People  {
    name  // 等价于public name，这里不用写
    age
    protected weight: number // protected关键字代表weight属性是受保护的，能被自己或者子类访问
    constructor (name: string, age: number) {
        this.name = name
        this.age = age
        this.weight = 120
    }
    eat () {
        console.log (`${this.name} eat something`)
    }
    speak () {
        console.log (`My name is ${this.name}, age ${this.age}`)
    }
}

class Student extends People {
    public number
    private girlfriend: string
    constructor (name: string, age: number, number: string) {
        super(name, age)
        this.number = number
        this.girlfriend = '小莉'
    }
    study () {
        console.log (`${this.name} study`)
    }
    getWeight () {
        console.log(`${this.name} is ${this.weight}`)
    }
    getGirlFriend () {
        console.log(`My girlFriend is ${this.girlfriend}`)
    }
}

const Lee:Student = new Student('lee', 25, 'A1')
Lee.getWeight()

代码正常运行，也能正常打印，结果如下

我们通过ts一系列的定义（这部分ts知识需要了解），在‘People’父类中定义了一个weight属性，这个属性是约束为只能被自己和子类访问的，我们也顺利通过之类访问到了这个属性。
这时候，我们再在代码代码中访问，Student的私有变量girlfriend，这时候看看结果，首先，基于TS约束，编辑器就会报出错误

编译时也会报"TS2341: Property 'girlfriend' is private and only accessible within class 'Student'."这样的错。这说明，我们定义在类中的私有变量是不能够被外部所访问的，同样的，我们也不能直接在外面访问关键字protected修饰的属性。上面可以通过getWeight方法访问是因为getWeight方法访问，相当于在子类中访问。可以自行验证。虽然我们无法访问，但实际这些属性，都是存在于新new 出来的对象中的，这一点大家应该很好理解。我们只是约束了它的访问权限
这就是“封装”，

封装的特点

• 减少耦合，不该露的不外露
• 利于数据接口的权限管理
• ES6目前不支持关键字约束，但存在一些约定，比如‘_’开头的，我们认为是private。

关于多态

面向对象三要素，除了“继承、封装”还有一个不经常听到的词叫“多态”，其在js开发中应用极少，但我们介绍面向对象三要素，也是要把它通过例子来简单的说一说，大家做一个了解。
多态，其形式为同一接口的不同表现。
下面我们通过一段js代码来演示多态的形式，实际上的多态要比这复杂的多，因为js的弱类型语言，我们只能尽可能把意思表达出来，了解就好，如果对多态很感兴趣，可以通过java，C#等语言来感受。

class People {
    constructor (name) {
        this.name = name
    }

    saySomething () {
        console.log('I am People')
    }
}

class A extends People {
    constructor (name) {
        super(name)
    }
    saySomething () {
        console.log('I am A')
    }
}

class B extends People {
    constructor (name) {
        super(name)
    }
    saySomething () {
        console.log('I am B')
    }
}

const a = new A('a')
a.saySomething()
const b = new B('b')
b.saySomething()

我们的A和B都继承自People，但我们又对其方法做了重写，导致各自的实例，执行的方法不一样，这就是一个多态的简单表现形式，大家了解一下，用代码感受一下

多态的特点

关于“多态”，在JS中，我们感受一下就好，实际应用并不多，下面我们说一下它的特点

• 保持的之类的开放性和灵活性（不被父类完全约束）
• 面向接口编程

写在最后

这篇文章，我们主要通过代码演示的形式，让大家感受一下面向对象三要素中的“封装”和“多态”。其在JS中的应用比较少，但其思想却是很重要的，其中ts也可以实现继承，但多态只能大致模拟，目前ts应用越来越广泛，大家不妨跟着试试，感受一下封装关键字，然后了解一下多态，这就是本文的目的。