【JavaScript】18_面向对象的三大特性

6、封装

面向对象的特点：
封装、继承和多态

1.封装

• 对象就是一个用来存储不同属性的容器

• 对象不仅存储属性，还要负责数据的安全

• 直接添加到对象中的属性，并不安全，因为它们可以被任意的修改

• 如何确保数据的安全：
  1.私有化数据

  • 将需要保护的数据设置为私有，只能在类内部使用
    2.提供setter和getter方法来开放对数据的操作
  • 属性设置私有，通过getter setter方法操作属性带来的好处
    1. 可以控制属性的读写权限
    2. 可以在方法中对属性的值进行验证

• 封装主要用来保证数据的安全

• 实现封装的方式：
  1.属性私有化 加#
  2.通过getter和setter方法来操作属性
  get 属性名(){
  return this.#属性
  }

  ​ set 属性名(参数){
  ​ this.#属性 = 参数
  ​ }

    <script>
        class Person {
            #address = '花果山'// 实例使用#开头就变成了私有属性，私有属性只能在类内部访问

            #name
            #age
            #gender

            constructor(name,age,gender){
                this.#name = name
                this.#age = age
                this.#gender = gender
            }

            sayHello(){
                console.log(this.#name)
            }

            //getter方法，用来读取属性
            getName(){
                return this.#name
            }
            // setter方法，用来设置属性
            setName(){
                this.#name = name
            }

            getAge(){
                    return this.#age
                }

            setAge(age){
                if(age >= 0){
                    this.#age = age
                }
            }

            get gender(){
                return this.#gender
            }

            set gender(gender){
                this.#gender = gender
            }
        }

        const p1 = new Person("孙悟空", 18, "男")
        // p1.age = "hello"

        // p1.getName()
        p1.setAge(-11) // p1.age = 11  p1.age
        // p1.setName('猪八戒')
        p1.gender = "女"
        console.log(p1.gender)
    </script>

7、多态

定义一个函数，这个函数将接收一个对象作为参数，他可以输出hello并打印对象的name属性

多态

• 在JS中不会检查参数的类型，所以这就意味着任何数据都可以作为参数传递
• 要调用某个函数，无需指定的类型，只要对象满足某些条件即可
• 如果一个东西走路像鸭子，叫起来像鸭子，那么它就是鸭子
• 多态为我们提供了灵活性

    <script>
        class Person{
            constructor(name){
                this.name = name
            }
        }

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

        class Test{

        }

        const dog = new Dog('旺财')
        const person = new Person("孙悟空")
        const test = new Test()

        // console.log(dog)
        // console.log(person)
       function sayHello(obj){
            // if(obj instanceof Person){
                console.log("Hello,"+obj.name)
            // }
       }

       sayHello(dog)
    </script>

8、继承

• 可以通过extends关键来完成继承
  时，就相当于将另一个类中的代码复制到了当前类中（简单理解）
• 继承发生时，被继承的类称为 父类（超类），继承的类称为 子类
  的代码，并且可以在不修改一个类的前提对其进行扩展

​ 封装 —— 安全性
​ 继承 —— 扩展性
​ 多态 —— 灵活性

    <script>
        class Animal{
            constructor(name){
                this.name = name;
            }

            sayHello(){
                console.log('动物在叫')
            }
        }

        class Dog extends Animal{

        }

        class Cat extends Animal{

        }

        class Snake extends Animal{

        }

        const dog = new Dog('旺财')
        const cat = new Cat('汤姆')

        dog.sayHello()
        cat.sayHello()

        console.log(dog)
        console.log(cat)
    </script>

方法重写

​ - 通过继承可以在不修改一个类的情况下对其进行扩展

OCP 开闭原则

​ - 程序应该对修改关闭，对扩展开放

    <script>
        class Animal{
            constructor(name){
                this.name = name
            }

            sayHello(){
                console.log("动物在叫~")
            }
        }

        class Dog extends Animal{
            // 在子类中，可以通过创建同名方法来重写父类的方法
            sayHello(){
                console.log("汪汪汪")
            }
        }

        class Cat extends Animal{
            // 重写构造函数
            constructor(name, age){
                // 重写构造函数时，构造函数的第一行代码必须为super()
                super(name) // 调用父类的构造函数
                this.age = age
            }
            
            sayHello(){
                // 调用一下父类的sayHello
                super.sayHello() // 在方法中可以使用super来引用父类的方法
                console.log("喵喵喵")
            }
        }

        const dog = new Dog("旺财")
        const cat = new Cat("汤姆", 3)

        dog.sayHello()
        cat.sayHello()
        console.log(dog)
        console.log(cat)
    </script>