<万博manbetx平台> 如何封装类中的私有成员 - JavaScript 经典案例 - 万博manbetx平台中文网
点击切换帐号登陆
帐号密码登陆

如何封装类中的私有成员

# 1.如何封装类中的私有成员

**知识点**
1. 构造函数与类
2. 类成员的访问
3. 类中私有成员的方法

----------------------------------------

## 1. 构造函数与类
- JavaScript本无类,它的类是通过*构造函数*模拟的
- *构造函数*与普通函数本无区别,仅仅是必须关键字`new`调用

----------------------------------------

## 2. 类成员的访问
- 类内部使用实例引用: `let F = function(){this.pro = value}`
- 类外部使用类实例访问: `let o = new F(); o.pro`

----------------------------------------

## 3. 类中私有成员的访问
- 声明: `let _pro = value`
- 访问: 自定义获取与设置方法完成

----------------------------------------

### 示例: code/demo01.万博manbetx平台

```万博manbetx平台
<!DOCTYPE 万博manbetx平台>
<万博manbetx平台>
<head>
    <meta charset="UTF-8">
    <title>如何封装类中的私有成员</title>
</head>
<body>
<script>
    // js中的类,是通过构造函数模拟
    let Stu1 = function (name, course, grade) {
        this.name = name;
        this.course = course;
        this.grade = grade;
    };

    let stu1 = new Stu1('peter', 'javascript', 88);
    console.log( stu1.name + '的' + stu1.course + '成绩是:' + stu1.grade );
    console.log ('\n');
    // 运行结果: peter的javascript成绩是:88

    // 成绩是学生的隐私, 不能随意让人查看,仅限管理员: admin查看
    // 应该如何操作呢?
    // 将成绩字段设置为私有成员, 仅限用户名为admin查看
    // 利用函数作用域对全局不可见的的特征实现

    let Stu2 = function (name, course, grade) {
        this.name = name;
        this.course = course;
        let _grade = grade;
    };

    let stu2 = new Stu2('peter', 'javascript', 88);
    console.log( stu2.name + '的' + stu2.course + '成绩是:' + stu2._grade );
    console.log ('\n');
    // peter的javascript成绩是:undefined
    // 为什么this.grade是undefined呢? 因为grade是属于构造函数的,不属于它的实例,当然也不能通过this来引用
    // 于是成功了实现类中的成员隐藏,即类中的私有成中的封装
    // 那么,如何才能访问到类中的私有成员呢? 这里的访问有二层意思: 即读取与设置
    // 所以需要在类中,为这个私有成员,量身定制二个方法: 获取器和设置器

    let Stu3 = function (name, course, grade) {
        this.name = name;
        this.course = course;
        let _grade = grade;
        // 闭包: 只要变量与函数位于同一个词法作用域内,那么函数就可以访问这些变量,即使作用域消失仍可以访问
        // 词法作用域,也叫静态作用域,  就是用户写代码时,就确定好的,不会因为程序执行而发生改变
        // 闭包: 简单的理解,就是子函数可以父函数中的变量,即使在全局,父函数作用域消失的情况下,仍可以访问
        // 闭包能实现的原因是: 同一个词法作用域中的成员是平级的,彼此是可见的,当然也是可以访问的,成员包括变量和函数
        this.getGrade = function () {
           return  (this.name === 'admin') ? _grade : '无权查看';
        };
        this.setGrade = function (newGrade) {
            return  (this.name === 'admin') ? _grade = newGrade : '无权设置';
        }
    };

    let stu3 = new Stu3('peter', 'javascript', 88);
    console.log( stu3.name + '的' + stu3.course + '成绩是:' + stu3.getGrade() );
    console.log( stu3.name + '的' + stu3.course + '成绩是:' + stu3.setGrade(95) );

    console.log ('\n');

    let stu4 = new Stu3('admin', 'javascript', 88);
    console.log( stu4.name + '的' + stu4.course + '成绩是:' + stu4.getGrade() );
    console.log( stu4.name + '的' + stu4.course + '成绩是:' + stu4.setGrade(95) );

</script>
</body>
</万博manbetx平台>
```


任务

?不会了怎么办
无数据提示暂无评论哟...我要评论
网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号