深入js对象属性

最新推荐文章于 2024-04-14 11:46:37 发布

时间管理大师1i

最新推荐文章于 2024-04-14 11:46:37 发布

阅读量161

点赞数 3

文章标签： javascript vue 面向对象编程 vue.js

本文链接：https://blog.csdn.net/ghxhhh/article/details/108802307

版权

对象属性

js中万物皆对象，对象就可以有属性和方法，例如数组，数组的日常使用不可谓不频繁，我们打印一个普通数组看一下

循环数组可以根据length，或for in还有很多其他的方法 而length这个属性我们在for in的时候  并不会被循环到 这个时候就很好奇了 ，为什么会拿不到呢？好了，接下来进入正题。

Object静态方法——Object.getOwnPropertyDescriptor()

Object.getOwnPropertyDescriptor(object,attribute)
使用方法：可以传入两个参数，第一个参数是一个对象，第二个参数是对象上的属性。
作用 : 获取该属性在对象内的描述什么是描述请往下看。

        var obj = { name: "张三" }
        var descriptor = Object.getOwnPropertyDescriptor(obj, "name")
        console.log(descriptor)

打印结果

这个方法的返回值是一个描述对象，对象内有四条属性，我们一一解读：
configurable:true 该对象是否可删除是否可以重新设置描述对象描述对象就是我们打印的这个对象；
enumerable:true 是否可枚举意思就是是否可以遍历取出
writable:true , 设置是否可修改如果要设置set get 的时候就不要设置这个值至于set get 我们稍后解释；
value: “张三”, 设置属性值如果要设置set get 就不要设置这个值；
接下来我们查看一下数组的length属性

        var arr = [1,2,3,4,5,6]
        var descriptor = Object.getOwnPropertyDescriptor(arr, "length")
        console.log(descriptor)

我们可以看到 configurable 和 enumerable都是false 代表着不可枚举不可删除不可重设，因此我们for in 就拿不到length这个属性了。既然有获取，那就应该有添加接下来介绍一下如何添加。

Object静态方法——Object.Object.defineProperty()

Object.Object.defineProperty(object,attribute,{描述对象})
用法 : 第一个参数添加属性的对象第二个添加的属性名第三个一个对象对象内容如下：

{
    value: 6,
    enumerable:false,
    configurable:false,
    writable:true
}

注意: 不添加的属性默认设置成false;

Object静态方法——Object.defineProperties()

Object.defineProperties(object , {})
用法 : 第一个参数添加属性的对象第二个是一个多条属性的对象例如：

        {
            a:{
                value:10,
                writable:true
            },
            b:{
                value:20,
                writable:true,
                enumerable:true
            },
            c:{
                value:30,
                writable:true,
                configurable:true
            }
        }

Object静态方法——Object.getOwnPropertyNames()；

Object.getOwnPropertyNames(Object);
用法 : 传入一个参数获取所有的属性名返回一个数组,与这功能相似的还有Object.keys(object),也是返回一个数组但是他俩有何不同呢，我们用数组来校验一下:

        var arr = [1, 2, 3, 4, 5, 6]
        var obj1 = Object.keys(arr)
        var obj2 = Object.getOwnPropertyNames(arr);

        console.dir(obj1)
        console.dir(obj2)

可以发现 keys拿不到length 而getOwnPropertyNames 只要有就能拿到 ;

set和get

使用Object.defineProperties，给HTML对象的原型上添加了几个属性
直接上代码

    <style>
         div{
             width: 200px;
             height: 200px;
             background: aqua;
             position: absolute;
             left: 300px;
             top: 300px;
         }
     </style>
</head>

<body>
     <div >
     
     </div>
    <script>
         Object.defineProperties(HTMLElement.prototype, {
        _x:{
            writable:true,
            value:0
        },
        _y:{
            writable:true,
            value:0
        },
        x: {
          enumerable: true,
          set: function (_v) {
              _v=_v.toString();
            this.style.left = _v.indexOf("px") < 0 ? _v + "px" : _v;
            this._x = parseFloat(_v);
          },
          get: function () {
            return this._x;
          },
        },
        y: {
          enumerable: true,
          set: function (_v) {
            _v=_v.toString();
            this.style.top = _v.indexOf("px") < 0 ? _v + "px" : _v;
            this._y = parseFloat(_v);
          },
          get: function () {
            return this._y;
          },
        },
      });
      var div = document.querySelector("div");
      div.x = 600;
      console.log(div.x)
    </script>

我们看一下打印效果: 600

当我们把x属性的get注释后: undefined

所以当我们属性不加value 想要获取属性值的时候我们就需要添加上get 没有get的时候该属性取不到值没有set 该属性无法设置值。

Vue的计算属性中的set get 使用：

<div id="demo">
        姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
        名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
        姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3" ><br>
      </div>

    var vm = new Vue({
          el:'#demo',
          data:{
            firstName:"hhh",
            lastName :"word",
          },
         computed:{
            fullName3:{
                get(){
                   return this.firstName + "-" +this.lastName;
                },
                set(value){
                   const names = value.split("-");
                   this.firstName = names[0];
                   this.lastName = names[1];
                }
            }
         }
      })

这里面的computed 的属性添加就是使用了 Object.defineProperties() 这种方式 ;

下期博客给大家分享一个用这几个对象方法写的万能深拷贝希望大家多多支持!