3.04.22class 与 extends关键字

最新推荐文章于 2023-02-19 20:20:06 发布

以哲_ok

最新推荐文章于 2023-02-19 20:20:06 发布

阅读量199

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/m0_59593735/article/details/125231954

版权

3.04.22 class 与 extends关键字

1.Object.defineProperty方法

1.Object.defineProperty

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
vue2的底层使用该方法封装数据的双向绑定
在ES6中，由于 Symbol类型的特殊性，用Symbol类型的值来做对象的key与常规的定义或修改不同，而Object.defineProperty 是定义key为Symbol的属性的方法之一。
语法：Object.defineProperty(obj, prop, descriptor)
- 返回值被传递给函数的对象。
- obj 要定义属性的对象。
- prop 要定义或修改的属性的名称或 Symbol。
- descriptor 要定义或修改的属性描述符,是一个对象参数。
  - 描述符有两种主要形式：数据描述符和存取描述符。
  - 数据描述符是一个具有值的属性，该值可以是可写的，也可以是不可写的。
  - 存取描述符是由 getter 函数和 setter 函数所描述的属性。
  - 一个描述符只能是这两者其中之一；不能同时是两者。不然控制台会报错。
数据描述符:

    {
        value:prop的属性值	
        ,
        configurable:当且仅当该属性的 configurable 键值为 true 时，该属性的描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为 false。
        ,
        enumerable:当且仅当该属性的 enumerable 键值为 true 时，该属性才会出现在对象的枚举属性中。默认为 false。
        ,
        writable:当且仅当该属性的 writable 键值为 true 时，属性的值，也就是上面的 value，才能被赋值运算符改变。默认为 false。
    }

存取描述符：

    {
        configurable:当且仅当该属性的 configurable 键值为 true 时，该属性的描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为 false。
        ,
        enumerable:当且仅当该属性的 enumerable 键值为 true 时，该属性才会出现在对象的枚举属性中。默认为 false。
        ,
        get: function () {} 属性的 getter 函数，如果没有 getter，则为 undefined。当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值。默认为 undefined。
        ,
        set: function () {} 属性的 setter 函数，如果没有 setter，则为 undefined。当属性值被修改时，会调用此函数。该方法接受一个参数（也就是被赋予的新值），会传入赋值时的 this 对象。默认为 undefined。

    }

用法：

<!DOCTYPE html>
<html lang="en">
<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>
        var obj={

        };
        //1.数据描述符:
        Object.defineProperty(obj,"name",{
                value:"欧宽",
                configurable:false,
                enumerable:true,
                writable:true
            }
        )
        console.log(obj);//{name: '欧宽'}

        //2.存取描述符：
        var obj2={
            name:null
        }
        var arr=[];
        Object.defineProperty(obj2,"name",{
            configurable:true,
            enumerable:true,
            get:function(){
                return "小怡";
            },
            set:function(value){
                name=value;
                arr.push(name);
            }

        })
        var box=obj2.name;
        console.log(box);//小怡
        console.log(obj2);//{name:"小怡"}

        obj2.name ="ling";
        var box2=obj2.name;
        console.log(box2);//小怡
        console.log(obj2);//{name:"小怡"}
        console.log(arr); //['ling']

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

通过普通方法定义的对象，即通过赋值操作添加的普通属性是可枚举的，在枚举对象属性时会被枚举到（for…in 或 Object.keys 方法），可以改变这些属性的值，也可以删除这些属性。但是Object.defineProperty该方法用于精确地添加或修改对象的属性。这个方法允许修改默认的额外选项（或配置）。默认情况下，使用 Object.defineProperty() 添加的属性值是不可修改（immutable）的。也不能进行枚举对象属性，for…in会失效。

2.Object.definePropertys

Object.defineProperties与ObjectdefineProperty的作用一样，Object.defineProper

最低0.47元/天解锁文章

以哲_ok

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3.04.22class 与 extends关键字

3.04.22 class 与 extends关键字1.Object.defineProperty方法1.Object.definePropertyObject.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。vue2的底层使用该方法封装数据的双向绑定在ES6中，由于 Symbol类型的特殊性，用Symbol类型的值来做对象的key与常规的定义或修改不同，而Object.defineProperty 是定义key为Symbol的属
复制链接

扫一扫