`

Object.defineProperty

阅读更多

1. 概念
    1. mdn定义的defineProperty
    2. Object.defineProperty() 方法
        1. 会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性,
        2. 并返回这个对象。
2. 语法
    1. Object.defineProperty(obj, prop, descriptor)
    2. 参数:
        1. obj  需要定义属性的对象。
        2.  prop 需定义或修改的属性的名字。
        3.  descriptor  将被定义或修改的属性的描述符。
    3. 返回值
        1. 返回传入函数的对象,即第一个参数obj
3. 学习这个属性的目的
    1. 该方法允许精确添加或修改对象的属性。
    2. 一般情况下,
        1. 我们为对象添加属性是通过赋值来创建并显示在属性枚举中
        2. (for...in 或 Object.keys 方法), 但这种方式添加的属性值可以被改变,
        3. 也可以被删除。而使用 Object.defineProperty() 则允许改变这些额外细节的默认设置。
    3. 在写框架的时候
        1. 例如,默认情况下,使用  Object.defineProperty() 增加的属性值是不可改变的。
4. 注意:
    1. 第三个参数都会为第二个参数(属性的操作)
    2. 第二个参数可以是之前已经存在的,也可以是新增加的,对属性的用法的限制
5. 第三个参数对象的取值
    1.  configurable : true,可以被删除的;默认是false,不可以被删除的;
    2.   enumerable : true, 可以对第二个参数的属性进行遍历;false默认值,不可以;
    3.   value : 该属性对应的值。默认为 undefined//新增的就是直接赋值,对象中就存在的就是修改
    4.   writable : 
        1.   当且仅当该属性的 writable 为 true 时,该属性才能被赋值运算符改变。
        2.   默认为 false。
    5. get 和  set
        1. 5.1 get
            1.  一个给属性提供 getter 的方法,
            2.  如果没有 getter 则为 undefined。
            3.  该方法返回值被用作属性值
            4.  undefined
        2. set
            1. 一个给属性提供 setter 的方法,
            2. 如果没有 setter 则为 undefined。
            3. 该方法将接受唯一参数,并将该参数的新值分配给该属性。
            4. 默认为 undefined。


6. 代码
    1. 正常的直接进行创建一个对象
        1. 利用对象的动态操作特性进行给对象操作属性
        2. 代码

                          /*
			    * 一般情况下:
			    *       动态给对象添加属性
			    * 添加的属性值可以被改变
			    * */
			    /*var obj = {};
			    obj.name = 'waxun';
			    obj['age'] = 18;
			    //Object {name: "waxun", age: 18}
			    console.log(obj);*/

 

 2. 使用可以自己控制
       1. 代码

/*
			    * Object.defineProperty()
			    * */
			    var obj = {
			        age : 18
			    };
			    var nameV;//只是一个给set和get的一个中间变量
				    Object.defineProperty(obj,'name',{
				//        configurable : false,
				//        enumerable : false,
				//        value : 'waxun',
				//        writable : false,
				        get : function(){
				            console.log('get方法被调用');
				            return nameV;//进行返回set进行设置的值
				        },
				        set : function(newVal){
				            console.log('set方法被调用');
				            nameV = newVal;
				        }
				    });
				    //Object {age: 18, name: undefined}
				    //给obj添加了name属性,值为undefiend
				//    console.log(obj);
				
				    //Object {} 设置configurable : true,可以被删除的
				   /* delete obj['name'];
				   //Object {age: 18, name: undefined}
				    console.log(obj);
				    */
				
				    //Object {age: 18, name: undefined},true还是打印原来的值,不可以被删除
				   /* delete obj['name'];
				    //Object {name: undefined}
				    delete obj['age'];
				    console.log(obj);*/
				
				    //Object {age: 18, name: undefined}
				    //enumerable : true18  undefined/false 只打印18
				   /* console.log(obj);
				    for(var k in obj){
				        console.log(obj[k]);
				    }*/
				
				    //Object {age: 18, name: "waxun"}
				//    console.log(obj);
				
				    //writable true:可写,Object {age: 18, name: "kaguo"}
				    //false :Object {age: 18, name: undefined},不可以进行赋值运算
				//    obj.name = 'kaguo';
				//    console.log(obj);
				
				    //get
				    //get方法被调用  waxun
				    //直接在获得通过defineProperty定义的属性的时候,就进行get获取值的操作,并且将get的返回值给
				    //第二参数的属性赋值
				
				
				    //set  和 get  的配合使用
				    //set方法被调用,将右边的kaguo,调用     set方法进行设置值
				    obj.name = 'kaguo';
				    //通过取值的方式,调用get方法,进行取值   get方法被调用
				    console.log(obj.name);

 

0
0
分享到:
评论

相关推荐

    js中Object.defineProperty()方法的不详解.docx

    在JavaScript中,`Object.defineProperty()`方法是一个非常强大的工具,它允许我们精确地控制对象属性的行为。这个方法在处理数据绑定、访问控制等高级场景时尤为有用。下面将详细讲解`Object.defineProperty()`的...

    Object.defineProperty 的 IE 补丁object-defineproperty-ie-master.zip

    在JavaScript的世界里,`Object.defineProperty` 是一个非常重要的方法,它允许我们对对象的属性进行精细控制。然而,这个功能在早期版本的IE浏览器(尤其是IE8及以下)中并不支持,这给开发者带来了不小的困扰。`...

    1.(原理分析类)Object.defineProperty.rar

    在前端开发中,`Object.defineProperty()` 是一个非常重要的 JavaScript API,它允许我们对对象的属性进行细粒度的控制。这个方法是理解 JavaScript 操纵对象属性行为的关键,特别是对于数据绑定、响应式系统和优化...

    详谈Object.defineProperty 及实现数据双向绑定

    Object.defineProperty() 和 Proxy 对象,都可以用来对数据的劫持操作。何为数据劫持呢?就是在我们访问或者修改某个对象的某个属性的时候,通过一段代码进行拦截行为,然后进行额外的操作,然后返回结果。那么vue中...

    vue源码学习之Object.defineProperty 对数组监听

    Vue 源码学习之 Object.defineProperty 对数组监听 在 Vue 源码学习中,Object.defineProperty 对数组监听是一个非常重要的知识点。本文将详细介绍 Object.defineProperty 对数组监听的原理和实现方法。 Object....

    vue用Object.defineProperty手写一个简单的双向绑定的示例

    Vue 使用 Object.defineProperty 实现简单的双向绑定 Vue 中的双向绑定是指视图层(View)和模型层(Model)之间的同步更新。使用 Object.defineProperty 可以手写一个简单的双向绑定示例。 什么是双向绑定? ...

    vue源码学习之Object.defineProperty对象属性监听

    本文介绍了vue源码学习之Object.defineProperty对象属性监听,分享给大家,具体如下: 参考版本 vue源码版本:0.11 相关 vue实现双向数据绑定的关键是 Object.defineProperty ,让我们先来看下这个函数。 在MDN上...

    defineProperty:Object.defineProperty

    `Object.defineProperty`是JavaScript语言中的一个非常重要的方法,它允许我们对对象的属性进行精确的控制。这个方法在深入理解JavaScript对象属性特性和优化代码逻辑时具有关键作用。本文将详细探讨`Object....

    js中Object.defineProperty()方法的不详解

    `Object.defineProperty()`是JavaScript中用于对象操作的一个强大方法,它可以让你精确地定义对象的属性,包括属性的值、可写性、可枚举性和可配置性等特性。这个方法接收三个参数:`object`、`propName`和`...

    JavaScript的Object.defineProperty详解

    =与Object.defineProperty 为JavaScript对象新增或者修改属性,有两种不同方式:直接使用=赋值或者使用Object.defineProperty()定义。如下: // 示例1 var obj = {}; // 直接使用=赋值 obj.a = 1; // 使用Object....

    js代码-Object.defineProperty()

    在JavaScript中,`Object.defineProperty()` 是一个非常重要的方法,它允许我们精确地定义或修改对象的属性。这个方法提供了一种直接操作对象属性的方式,包括访问器(getter和setter)和数据属性描述符,这对于创建...

    define-properties:一次定义多个不可枚举的属性。 使用`Object.defineProperty`(如果可用); 退回旧发动机的标准配置

    使用Object.defineProperty如果可用); 退回旧发动机的标准配置。 现有属性不会被覆盖。 接受属性名称映射到谓词,该谓词为true时将强制覆盖。例子var define = require ( 'define-properties' ) ;var assert = ...

    使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置

    在JavaScript中,`Object.defineProperty` 是一个非常强大的方法,它允许我们精确地定义或修改对象上的属性。这个方法可以用来创建数据属性和访问器属性,提供了对属性的读写操作的控制,包括读取和修改时的行为。在...

    使用Object.defineProperty实现简单的js双向绑定

    具体到avalon.js的实现,它采用了Object.defineProperty方法,并且针对老旧浏览器采用VBScript进行了兼容处理,使得在这些低级浏览器中也能实现数据的双向绑定。avalon.js的方法虽然比上面提到的简单示例代码复杂得...

    Vue Object.defineProperty及ProxyVue实现双向数据绑定

    本文将深入探讨如何使用`Object.defineProperty`和`Proxy`在Vue中实现这一功能。 首先,让我们理解`Object.defineProperty`在双向数据绑定中的作用。在Vue中,当我们创建一个新的Vue实例时,Vue会遍历`data`选项中...

    Vue-Object.defineProperty:Vue源码解析之手写Vue源码-源码解析

    现在前端面试Vue中都会问到响应式原理以及如何实现的,如果你还只是简单回答通过Object.defineProperty()来劫持属性可能已经不够了。 本篇文章通过学习文档及视频教程实现手写一个简易的Vue原始码实现数据双向绑定...

    vue.js的双向数据绑定Object.defineProperty方法的神奇之处

    今天小编就为大家分享一篇关于vue.js的双向数据绑定Object.defineProperty方法的神奇之处,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧

Global site tag (gtag.js) - Google Analytics