javascript 类定义常见注意事项

javascript 类定义常见注意事项

1、类中不可以用function定义方法

2、类中的构造函数可以定义,也可以不定义,不定义的情况下系统会自动补充一个默认的constructor(){} 构造函数

3、类的静态变量,必须用类名才可以访问到,类申请出来的变量,是访问不到该静态变量的,只会动态为对象 新增一个非静态变量。

4、类中的变量可以显示申明,但是不能使用 let、const、var关键字。也可以不申明,用到的时候用this.xxx,进行动态创建。

5、可以使用属性构造器,用定义方法的方式,定义属性。优势是可以为属性的访问时,增加自定义逻辑触发。

6、由于不能用const方法,申请变量,如果要定义只读属性,可以使用get 构造器定义一个返回常数的方式( return "常数" ),变相定义一个只读属性。

7、使用 Object.freeze 修饰对象,可以让对象类的属性变得不可更改。

javascript 复制代码
    class Person{
        userName; //在类中,不可以用let、const、var等申明属性
        //expectJob   属性也可以不申明,直接使用,也是正确的使用方法。
        static nickName;//  注意这里是静态类,只有使用类名Person.nickName,才能访问到他,用对象.nickName,是访问不到它的,只会新创建一个非静态的nickName。
        constructor(name,job='coding'){  //构造函数也可以不定义,系统会自动补充一个默认的constructor(){}
            this.userName=name;
            this.expectJob=job;//属性也可以不申明,直接使用
        }
        getName(){
            return this.userName;
        }

        getExpectJob(){
            return this.expectJob;
        }

        getNickName(){
            return this.nickName;
        }

        setNickName(value){
            return this.nickName=value;
        }

        getStaticNickName(){
            return Person.nickName;
        }

        setStaticNickName(value){
            return Person.nickName=value;
        }

        //只读属性构造器,访问的时候只需要用Person.PI ,如果用该类申请的对象person.PI是访问不到该属性的。
        // 这里还有个属性构造器的概念。 属性构造器只需要用get xx(),set xx(value),就可以定义出属性,静态非静态都可以定义。
        static get PI() {  //
            return 3.14159265359;
        }

        //用Object.freeze 冻结对象,使得对象属性/变量 不可以修改
        static get DEFAULT_CONFIG() {
            return Object.freeze({
                theme: 'dark',
                language: 'zh-CN',
                version: '1.0.0'
            });
        }
    }

    //这里没有传递函数,相当于new Person(undefined,undefined),
    // 由于job有默认值coding,最终expectJob被初始化为coding
    const  person=new Person();
    person.setNickName('Alice');
    person.setStaticNickName('Static Alice');
    console.log(`person.getName() = ${ person.getName() }`); // undefined
    console.log(`person.getExpectJob() = ${ person.getExpectJob() }`); // coding
    console.log(`person.expectJob = ${ person.expectJob }`); // undefined
    console.log(`person.getNickName() = ${ person.getNickName() }`); // Alice
    console.log(`person.getStaticNickName() = ${ person.getStaticNickName() }`); //Static Alice
    console.log(`Person.nickName = ${ Person.nickName }`);// Static Alice
    console.log(`person.nickName = ${ person.nickName }`);// Alice
    console.log(`Person.PI = ${ Person.PI }`); // 3.14159265359
    console.log(`Person.PI = ${ person.PI }`); // undefined

    Person.DEFAULT_CONFIG.theme = 'light';  // 静默失败(被冻结) ,只能用Person类访问
    console.log(`Person.DEFAULT_CONFIG.theme = ${ Person.DEFAULT_CONFIG.theme }`); //dark

浏览器console输出内容:

相关推荐
SomeB1oody2 小时前
【Python深度学习】1.1. 多层感知器MLP(人工神经网络)介绍
开发语言·人工智能·python·深度学习·机器学习
天下无贼!2 小时前
【功能实现】基于Vue3+TS实现大文件分片上传
开发语言·javascript·node.js·vue·html5
程序员小寒2 小时前
JavaScript设计模式(九):工厂模式实现与应用
开发语言·前端·javascript·设计模式
派大星酷2 小时前
线程池-----Executors
java·开发语言
小碗羊肉2 小时前
【从零开始学Java | 第二十八篇】可变参数
java·开发语言
weixin199701080162 小时前
《米思米商品详情页前端性能优化实战》
前端·性能优化·php
zhensherlock2 小时前
Protocol Launcher 系列:Agenda 优雅组织你的想法与日程
javascript·macos·ios·typescript·node.js·mac·ipad
清汤饺子2 小时前
Cursor + Claude Code 组合使用心得:我为什么不只用一个 AI 编程工具
前端·javascript·后端
weitingfu2 小时前
Excel VBA 入门到精通(二):变量、数据类型与运算符
java·大数据·开发语言·学习·microsoft·excel·vba