【JavaScript】25_面向对象——封装

简介: # 6、封装面向对象的特点:封装、继承和多态1.封装- 对象就是一个用来存储不同属性的容器- 对象不仅存储属性,还要负责数据的安全- 直接添加到对象中的属性,并不安全,因为它们可以被任意的修改- 如何确保数据的安全: 1.私有化数据 - 将需要保护的数据设置为私有,只能在类内部使用 2.提供setter和getter方法来开放对数据的操作 - 属性设置私有,通过getter setter方法操作属性带来的好处 1. 可以控制属性的读写权限 2. 可以在方法中对属性的值进行验证- 封装主要用来保证数据的安全- 实现封装的方式

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>
相关文章
|
9天前
|
设计模式 JavaScript
JS发布订阅模式封装(纯手工)
发布订阅模式是JS常用的设计模式,在面试中也会经常遇到,以下是我的手写实现方式,经测试效果不错,小伙伴们们可以直接拷贝使用。
|
3月前
|
设计模式 JavaScript 前端开发
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
JavaScript的继承机制基于原型链,它定义了对象属性和方法的查找规则。每个对象都有一个原型,通过原型链,对象能访问到构造函数原型上的方法。例如`Animal.prototype`上的`speak`方法可被`Animal`实例访问。原型链的尽头是`Object.prototype`,其`[[Prototype]]`为`null`。继承方式包括原型链继承(通过`Object.create`)、构造函数继承(使用`call`或`apply`)和组合继承(结合两者)。ES6的`class`语法是语法糖,但底层仍基于原型。继承选择应根据需求,理解原型链原理对JavaScript面向对象编程至关重要
76 7
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
|
2月前
|
JavaScript 前端开发 容器
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
90 2
|
2月前
|
JavaScript
js函数封装 —— 金额添加千分位分隔符
js函数封装 —— 金额添加千分位分隔符
28 2
|
3月前
|
自然语言处理 JavaScript 前端开发
JavaScript闭包是函数访问外部作用域变量的能力体现,它用于封装私有变量、持久化状态、避免全局污染和处理异步操作。
【6月更文挑战第25天】JavaScript闭包是函数访问外部作用域变量的能力体现,它用于封装私有变量、持久化状态、避免全局污染和处理异步操作。闭包基于作用域链和垃圾回收机制,允许函数记住其定义时的环境。例如,`createCounter`函数返回的内部函数能访问并更新`count`,每次调用`counter()`计数器递增,展示了闭包维持状态的特性。
42 5
|
2月前
|
JavaScript
js 高频实用函数封装汇总(持续更新)
js 高频实用函数封装汇总(持续更新)
27 0
|
2月前
|
JavaScript
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
33 0
|
2月前
|
前端开发 JavaScript 开发者
前端 JS 经典:通用性函数封装思路
前端 JS 经典:通用性函数封装思路
25 0
|
2月前
|
前端开发 JavaScript
前端 JS 经典:封装全屏功能
前端 JS 经典:封装全屏功能
25 0
|
2月前
|
JavaScript
js【函数封装】数组反转
js【函数封装】数组反转
13 0