JavaScript对象的增强知识

1 Object.defineProperty

2 数据属性描述符

3 存取属性描述符

4 Object.defineProperties

5 对象的其他方法补充

对象增强-数据属性描述符

<!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 = {
      name: "why",
      age: 18
    }

    // 默认情况下属性都是没有特别的限制
    // obj.name = ""
    // delete obj.name
    // console.log(obj.name)


    // 可以对对象中的属性进行某些限制


    var obj = {
      name: "why", // configurable: true
      age: 18
    }

    Object.defineProperty(obj, "name", {
      configurable: false, // 告诉js引擎, obj对象的name属性不可以被删除
      enumerable: false, // 告诉js引擎, obj对象的name属性不可枚举(for in/Object.keys)
      writable: false, // 告诉js引擎, obj对象的name属性不写入(只读属性 readonly)
      value: "coderwhy" // 告诉js引擎, 返回这个value
    })

    delete obj.name
    console.log(obj)

    // 通过Object.defineProperty添加一个新的属性,从这里创建的参数是不能被配置、修改的
    Object.defineProperty(obj, "address", {})
    delete obj.address
    console.log(obj)

    console.log(Object.keys(obj))

    obj.name = "kobe"
    console.log(obj.name)
    

  </script>

</body>
</html>

对象增强-存取属性描述符

<!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>
    // vue2响应式原理
    var obj = {
      name: "why"
    }

    // 对obj对象中的name添加描述符(存取属性描述符)
    var _name = ""
    Object.defineProperty(obj, "name", {
      configurable: true,
      enumerable: false,
      set: function(value) {
        console.log("set方法被调用了", value)
        _name = value
      },
      get: function() {
        console.log("get方法被调用了")
        return _name
      }
    })

    obj.name = "kobe"
    obj.name = "jame"
    obj.name = "curry"
    obj.name = "coderwhy"

    // 获取值
    console.log(obj.name)

  </script>

</body>
</html>

对象增强-多个属性描述符

<!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 = {
      name: "why",
      age: 18,
      height: 1.88
    }

    // Object.defineProperty(obj, "name", {})
    // Object.defineProperty(obj, "age", {})
    // Object.defineProperty(obj, "height", {})

    // 新增的方法
    Object.defineProperties(obj, {
      name: {
        configurable: true,
        enumerable: true,
        writable: false
      },
      age: {
      },
      height: {
      }
    })

  </script>

</body>
</html>

对象增强-额外方法的补充

<!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 = {
      name: "why",
      age: 18
    }

    // 1.获取属性描述符
    console.log(Object.getOwnPropertyDescriptor(obj, "name"))
    console.log(Object.getOwnPropertyDescriptors(obj))

    // 2.阻止对象的扩展
    Object.preventExtensions(obj)
    obj.address = "广州市"
    console.log(obj)

    // 3.密封对象(不能进行配置)
    Object.seal(obj)
    delete obj.name
    console.log(obj)

    // 4.冻结对象(不能进行写入)
    Object.freeze(obj)
    obj.name = "kobe"
    console.log(obj)

  </script>

</body>
</html>

JavaScript对象的增强知识

猜你喜欢