Kros的博客 Kros的博客
首页
  • CSS
  • 工具
  • Vue
  • js
  • Vue3
  • 算法
  • 折腾笔记
一言
  • 分类
  • 标签
  • 归档
码云

Kros

凡心所向,素履以往,生如逆旅,一苇以航
首页
  • CSS
  • 工具
  • Vue
  • js
  • Vue3
  • 算法
  • 折腾笔记
一言
  • 分类
  • 标签
  • 归档
码云
  • CSS

  • JavaScript

    • 兼容ie7的水平无限滚动
    • 节流防抖
    • 数组乱序
    • 开启全屏
    • 数据类型
    • 变量提升
    • this调用指向
    • 原型及原型扩展
    • js获取元素属性精度问题
    • setTimeout和setInterval
    • 数组判断
    • dom节点添加或插入元素
    • var、let和const的区别
    • 判断ellipsis是否省略生效
    • 使用ResizeObserver监听元素size变化
    • js自定义事件
    • use strict详解
    • 私有属性
      • js实现类的方式
      • call和apply的理解和使用
      • js失焦和点击事件顺序冲突
      • js中不常见但非常实用的运算符
      • for of和for in的区别
      • defer和async的区别
      • promise值穿透
      • js为什么会出现数字精确度丢失
      • js禁用F12开发者模式
      • 使用scrollTop和scrollTo滚动到目标位置
      • js实现打字机效果
      • 多种方式实现数组去重
      • 替换使用setTimeout
      • encodeURI和encodeURIComponent的区别
      • canvas实现弹跳小球
      • js实现跨标签页通信
      • 事件循环与微任务、宏任务
      • 浏览器存储数据方式
      • 常见的meta元数据使用
      • 使用InterSectionObserver判断元素区域(chatGPT)
    • 工具

    • Vue

    • antdv踩坑记录

    • Vue3

    • 前端
    • JavaScript
    kros
    2023-05-13

    私有属性

    通常情况下我们定义的属性都是公共的,但往往我们实际业务需要把变量私有化不允许外部方式,要想让属性或方法变成私有可以使用一下几种方式:

    # 类的私有属性

    参考类私有域 ,以#为开头的命名的变量和方法会自动转成私有属性。 注意:#也属于名称的一部分,调用时也需要加上

    // class
    class DemoPrivate {
      #value; // 以#开头
      
      #privateMethod() {
        
      }
    }
    
    const instance = new DemoPrivate(123)
    console.log(instance.#value) // 会抛出异常
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

    # TypeScript 私有属性

    如果你使用的是ts,就可以利用ts的private的语法实现变量的私有化

    class PrivateDemo {
      private _value
      
      private setNum(num) {
        this._value = num
      }
    }
    
    1
    2
    3
    4
    5
    6
    7

    # 闭包

    根据闭包 的描述,我们可以实现一个简单的闭包,如下: 可以看出外部函数useScoreOpt中定义的变量total对外部程序是私有,我们只能通过内部函数addNum和getNum实现访问和修改,相当于另类实现了私有属性

    function useScoreOpt() {
      let total = 0; // 内部属性
      function addNum(num) {
        total += num
        return total
      }
      function getNum() {
        return total
      }
      return { add: addNum, getNum: getNum }
    }
    
    let scoreOpt = useScoreOpt()
    console.log(scoreOpt.add(10)) // 10
    console.log(scoreOpt.add(5))  // 15
    console.log(scoreOpt.getNum()) // 15
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    上次更新: 2025/09/05, 8:09:00
    use strict详解
    js实现类的方式

    ← use strict详解 js实现类的方式→

    最近更新
    01
    Find the next perfect square
    09-05
    02
    Regex validate PIN code
    09-05
    03
    Find the odd int
    09-05
    更多文章>
    Theme by Vdoing | Copyright © 2020-2025 kros king
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式
    icon-heart-o icon-heart icon-infinity icon-pause icon-play link next prev