ES6之类的其他书写方式

ES6之类的其他书写方式

js 复制代码
const methodName="sayHello";
class Person{
    constructor(name, age, sex){
        this.name = name;
        //this.getAge();
        //this.setAge();
        this.age = age;
        this.sex = sex;
    }
    get age(){
        return this._age;
    }
    set age(age){
        if(typeof age !== "number"){
            throw new TypeError("age property must be a number");
        }else if(age < 0){
            age = 0;
        }else if(age > 1000){
            age = 1000;
        }
        this._age = age;
    }
    [methodName](){
        console.log(this.name,this.age,this.sex)
    }
}
const p1 = new Person("张三", 18, "男");
p1[methodName]()

这里是类的一些其他特点。

类的可计算成员名,和对象初始化的可计算属性类似,可以将成员名变成\[\]+表达式的形式。

getter和setter,在之前时期,我们可以使用函数的方式来进行 age 的读取和赋值的过程。但这种方式与属性的书写方式不一致,需要使用 p1.getAge() ,p1.setAge() 的方式。采用 getter 和 setter 可以直接写成属性的形式,p1.age , p1.age=10 。也可使用 Object.defineProperty 的方式书写。

静态成员是定义在构造函数的属性。无法通过实例对象访问。例如:

js 复制代码
class Chess{
    constructor(name){
        this.name = name;
    }
    static width = 100;
    static height = 100;
    static show(){
        console.log(this.name)
    }
}
console.log(Chess.width, Chess.height)
Chess.show()

使用 static 关键字可以定义静态属性,可以通过 console.dir() 查看。

字段初始化器

js 复制代码
class Test {
    a=1;
    b=2;
    print=()=> {
        console.log(this)
    }
}
// function Test() {
// }
// Test.prototype.print=function(){
//     console.log(this)
// }
const t1 = new Test();
const t2 = t1.print;
t2()

字段初始化器是指可以直接给成员赋值,这些成员会添加到构造器里。也可以赋值给一个方法,不过方法里的this指向存在问题。this会指向window,这时使用箭头函数可以使this永远绑定到对象上,虽然会造成一定的内存浪费。

类表达式,可以将类用在参数或返回值中。

js 复制代码
const test=class{
    print(){
        console.log(this)
    }
}
new test().print()
相关推荐
伟大的兔神15 分钟前
我做了一个本地优先的 AI 图片工作台:Loomora v1.0.0 正式发布
前端·javascript·vue.js
fangzhanpeng1683 小时前
(前端)2.js变量作用域样例
开发语言·前端·javascript
码艺-Alimjan5 小时前
Vue项目源码备份最佳实践:无视node_modules,打包体积仅2MB
前端·javascript·vue.js
xixiaoyunya6 小时前
JavaScript 异步编程全解析:从回调地狱到 async/await 的演进之路
开发语言·javascript·ecmascript
张元清6 小时前
React useScrollLock Hook:为弹窗锁住页面滚动 (2026)
javascript·react.js
Sayai6 小时前
【无标题】ECharts 实现日志量异常检测:基线 ±Kσ 基带 + 灵敏度切换(Vue2 实战)
前端·javascript·echarts
默_笙7 小时前
💌 为了把"主题色"传给孙子组件,我翻了五层楼——直到遇见了 useContext
前端·javascript
小KK_8 小时前
JS 事件循环从小白视角入门:宏任务、微任务与 async/await 一网打尽
前端·javascript
kisshyshy9 小时前
从 useRef 到 Web Worker:理解 React 可变对象与浏览器多线程
前端·javascript·react.js
执行部之龙11 小时前
AI 前端流式输出手写与扩展知识
前端·javascript·面试·agent