ES5静态方法

最新推荐文章于 2023-03-01 16:21:00 发布

錯覺づ

最新推荐文章于 2023-03-01 16:21:00 发布

阅读量137

点赞数

文章标签： javascript 前端 typescript

本文链接：https://blog.csdn.net/qq_45215130/article/details/126408277

版权

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

<script>
// 静态方法(构造函数的方法)

// Object.defineProperty(obj,pro,desc)用于定义对象的属性及描述符
// obj 要定义属性的对象
// pro 对象要定义的属性名
// desc 对象属性的描述符对象

// 'use strict'

var obj1 = {
    name: '红浪漫哥哥',
    age: 18,
    _age: 18,
    sex: '男'
}

/* // 描述符第一种配置方式:
Object.defineProperty(obj1,'age',{// 描述符对象
    // 是否可配置(是否可重新修改配置,是否可删除)
    configurable: true,
    // 是否可枚举
    enumerable: true,
    // 是否可读写
    writable: true,
    // 属性的值
    value: 19
}) */

// delete obj1.age // 删除对象属性
// console.log( obj1.age )// undefined

// for (var key in obj1){
//     console.log( key )
// }


// obj1.age = 20
// console.log( obj1.age )

// console.log( obj1.age )// 19



// 描述符第二种配置方式:
// 在属性描述符中可以添加属性访问器 getter 和 setter
// 注意: getter 和 setter 与 writable 和 value 不能同时定义
Object.defineProperty(obj1,'age',{// 描述符对象
    // 是否可配置(是否可重新修改配置,是否可删除)
    configurable: true,
    // 是否可枚举
    enumerable: true,
    // 添加getter
    // get: function (){},
    // set: function (){},
    get(){
        // this -> obj1
        // 当我们访问 obj1.age 时,该函数被调用
        console.log( 'getter被调用...' )
        // get函数的返回值就是对象的age属性值
        // return 22
        return this._age
    },
    set(val){
        // this -> obj1
        // 当我们给age属性赋值时,等号右边的值被传递到set函数中 -> val
        // 当我们设置 obj1.age = xxx 时,该函数被调用
        console.log( 'setter被调用...',val )
        // 用于修改对象的age属性值
        // this.age = val // 导致无限循环调用set
        this._age = val // this._age 中间变量
    }
})

console.log( obj1 )

// 访问对象age属性
console.log( obj1.age )// 18

// 修改对象age属性
obj1.age = 28
console.log( obj1.age )// 28

</script>
</body>
</html>