zoukankan      html  css  js  c++  java
  • Object.defineProperty基本使用

    1.Object.defineProperty

    给一个对象定义一个新的属性或者在修改一个对象现有的属性,并返回这个对象

    语法:

      Object.defineProperty(参数1,参数2,参数3)

      参数1:目标对象

      参数2:要修改或者添加的属性名称

      参数3:目标对象属性的一些特征(是一个对象)

          参数1:

            value:属性值

          参数2:

            writable:对象属性值时候可以被修改   true允许   false不允许

          参数3:

            configurable:对象属性是否可以被删除  true允许  false不允许

          参数4:

            enumerable:对象属性是否可以被枚举

          参数5:

            get():给一个属性提供getter方法,当访问这个对象的属性值的时候触发该方法

          参数6:

            set():给一个属性提供setter方法,当设置属性值的时候触发该方法‘

    2.value

       var obj = {};
         Object.defineProperty(obj,"name",{
             value:"张三"
         })
        
        Object.defineProperty(obj,"age",{
             value:"28"
         })
        
        console.log(obj)

    3.writable

        var obj = {};
        Object.defineProperty(obj,"name",{
            value:"张三",
            writable:false//当设置为false的时候当前对象的属性值不允许被修改
        })
        
        obj.name = "李四"
        console.log(obj.name)//张三
    
        var obj = {};
        Object.defineProperty(obj,"name",{
            value:"张三",
            writable:true//当设置为true的时候当前对象的属性值允许被修改
        })
        
        obj.name = "李四"
        console.log(obj.name)//李四

    4.configurable

        var obj = {};
        Object.defineProperty(obj,"name",{
            value:"张三",
            configurable:false//当设置为false的时候对象的属性不允许被删除
        })
        
        delete obj.name;
        console.log(obj.name)//张三
    
        var obj = {};
        Object.defineProperty(obj,"name",{
            value:"张三",
            configurable:true//当设置为true的时候对象的属性允许被删除
        })
        
        delete obj.name;
        console.log(obj.name)//undefined

    5.enumerable

        var obj = {name:"张三",age:"18"}
    
        Object.defineProperty(obj,"name",{
            enumerable:false//当设置为false的时候对象的属性不可被枚举
        })
    
        Object.defineProperty(obj,"age",{
            enumerable:true//当设置为true的时候对象的属性可被枚举
        })
    
        console.log(Object.keys(obj))

    6.for in 与 Object.keys()的区别

        function Person(name,age){
            this.name=name;
            this.age=age;
        }
        Person.prototype = {
            sex:"男"
        }
        var man = new Person("张三",18);
        
        console.log(Object.keys(man));//["name","age"]
    
        for(var key in man){
            console.log(key);//name age sex
        }
    总结
    Object.keys():返回一个数组,数组值为对象自有的属性,不会包括继承原型的属性
    for in:遍历对象可枚举属性,包括自身属性,以及继承自身的原型属性

    7.get()&&set()

        var obj = {name:"张三"}
        Object.defineProperty(obj,"name",{
            get(){
                console.log("被访问了")//当被访问的时候会触发get()方法
            },
            set(newVal){
                console.log("被设置了"+newVal)//当被设置的时候会触发set()方法
            }
        }) 
        obj.name;//输出:被访问了
        obj.name="李四"//输出:被设置了李四
    注意:当使用了get()方法或者set()方法的时候就不能使用value和writable中的任何一个属性否则会报错
  • 相关阅读:
    ios开发启动页面
    C++再学习之路(五)
    C++再学习之路(四)
    opencv再学习之路(九)---制作对焦图像
    opencv再学习之路(八)---轮廓检测
    C++再学习之路---例程(一) 文本查询
    opencv再学习之路(五)---灰度直方图显示
    opencv再学习之路(七)---图像单个元素的访问
    opencv再学习之路(六)---模板匹配
    C++再学习之路(三)
  • 原文地址:https://www.cnblogs.com/shy0113/p/10557035.html
Copyright © 2011-2022 走看看