关于Object.defineProperty 的基础知识

Object.defineProperty 这个方法大家耳熟能详,可以对 对象的属性进行添加或修改的操作。即可以进行  数据劫持 。vue就是通过这个方法来劫持数据的。

平时我们创建对象的时候,一般通过对象字面量的方式创建:

var student = {
  name:"小明",
  age:10
}

对象的属性在创建的时候,都带有一些特征值(特性),JS通过这些特征值来定义它们的行为。

ECMA-262 第 5 版在定义只有内部才用的特性(attribute)时,描述了属性(property)的各种特征。

ECMA-262 定义这些特性是为了实现 JavaScript 引擎用的,因此在 JavaScript 中不能直接访问它们。

为了表示特性是内部值,该规范把它们放在了两对儿方括号中,例如[[Enumerable]]。

ECMAScript 中有两种属性:数据属性和访问器属性。

                    -------------《JavaScript高级程序设计(第三版)》 第六章

属性描述符

MDN上,对于对象的属性在创建的时候,带有的特征值,叫的是属性描述符。包含数据描述符和存取描述符。

a)数据属性(数据描述符):

  1. [[Configurable]] :能否通过 delete 删除属性,能否修改属性的特性,或者能否把属性修改为访问器属性。
  2. [[Enumerable]]:能否通过 for ·· in 或者 Object.key() 枚举。
  3. [[Writable]]:属性的值能否被修改。
  4. [[Value]]:属性的值,可以是任何有效的 JavaScript 值(数值,对象,函数等)

b)访问器属性(存取描述符): 

  1. [[Configurable]] :能否通过 delete 删除属性,能否修改属性的特性,或者能否把属性修改为访问器属性。
  2. [[Enumerable]]:能否通过 for ·· in 或者 Object.key() 枚举。
  3. [[Get]]:在读取属性时调用的函数。
  4. [[Set]]:在写入属性时调用的函数。

属性描述符的默认值:有两种情况

 1) 当使用对象字面量或者构造函数的形式创建属性的时候,enumerable 、configurable 、 writable都为 true ,value、get、set都为undefined 。所以平时定义对象的时候,我们可以随意增删改查。

2) 当使用Object.defineProperty、Object.defineProperties 或 Object.create 函数的情况下添加的属性。enumerable 、configurable、writable都为 false;value、get、set都为undefined。

  可以通过Object.getOwnPropertyDescriptor(对象名,属性名)来获取属性描述符的默认值

  Object.defineProperty :

  Object.create :

怎么修改默认属性默认值?

这种两个方括号 [[ ]] 的方式,我感觉就和指向对象的原型的指针类似,ECMA-262 第 5 版 称这个指针为 [[prototype]] ,也是没有标准的方式访问,但是主流浏览器都提供了__proto__属性来访问。

这上面的属性描述符都有自己的默认值,但是如果我想修改某些数据描述符的默认值呢?它并不能直接访问啊,比如 obj.age.[[Enumerable]] 这样是不行的。既然不能直接访问,那么我怎么去修改对象中某些属性的指定特性呢?

以前可以使用非标准的方式:  对象.__defineGetter__( "属性", function(){} )  或者  对象.__defineSetter__( "属性", function(){} )  。不过这方法已经被废弃了,虽然有些浏览器还支持,但是不建议使用。

这时候就需要用到 Object.defineProperty 这个方法了。

语法:Object.defineProperty(obj,prop,descriptor)

  1. obj,即需要修改属性的对象。必填。
  2. prop,需要修改的属性。必填。
  3. descriptor,属性修饰符配置项,是个对象。属性修饰符不填的情况下,这个参数也不能少,最少也要是一个 { } 空对象。
  4. 最终返回处理后的 obj 对象

descriptor 也是分数据描述符存取描述符。功能也是一样

a) 数据描述符:

  1. configurable
  2. enumerable
  3. writable
  4. value

b) 存取描述符

  1. configurable
  2. enumerable
  3. get
  4. set

上面的这些属性都是可以直接访问配置的。

数据描述符和存取描述符用法都很简单。不过需要注意的是:

  1. 数据属性符的writable或value 与 存取描述符的get或set不能同时存在 。会报错。
  2. 存取描述符的get与set也可以不同时存在,如果只指定get表示属性不能写(意思进行赋值操作,最后属性还是为undefined,即使最初属性定义了初始值),只指定set表示属性不能读(意思是获取属性的时候是undefined,整个对象都为{ }。即使最初定义了一些属性的)。
  3. 存取描述符的get与set是个函数,函数里的 this 指向的是 需要修改属性的对象即obj

还有个Object.defineProperties() 可以劫持多个属性。有兴趣的可以去 MDN 看看

如果对象的属性中还有对象,那么这时候需要深层遍历,一般的方法是:

var obj = {
    name:"zjj",
    sex:‘male‘,
    money:100,
    info:{
        face:‘smart‘
    }
}

observe(obj)
console.log(obj)
obj.sex = ‘female‘
obj.info.face = 20;
obj.info.hobit = ‘girl‘;
console.log(obj)

function observe(target){
    if (!target || typeof target !== ‘object‘) return;

    Object.keys(target).forEach(function(val){
        defineProp(target,target[val],val)
    })
}

function defineProp(curObj,curVal,curKey){
    observe(curVal) //再次遍历子属性
    Object.defineProperty(curObj,curKey,{
        enumerable:true,
        configurable:true,
        get:function(){
            console.log(‘获取了属性‘,curVal)
            return curVal
        },
        set:function(newData){
            console.log(‘设置了属性‘,newData)
            curObj = newData;
        }
    })
}
        

这样,目标对象中的属性的值为对象的时候也能进行数据劫持了。不过我疑惑的点是:添加不存在的属性时,为什么调用的是get方法???后面搞懂了再来解决这个问题

Object.defineProperty的缺点:

  1. 无法监控到数组下标的变化,导致直接通过数组的下标给数组设置值,不能实时响应。所以vue才设置了7个变异数组(push、pop、shift、unshift、splice、sort、reverse)的 hack 方法来解决问题。
  2. 只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。如果能直接劫持一个对象,就不需要递归 + 遍历了。所以 vue3.0 会使用 Proxy 来替代Object.defineProperty

Proxy:代理

  听说vue3.0 会用 proxy 替代 Object.defineProperty()方法。所以预先了解一些用法是有必要的。

  proxy 能够直接 劫持整个对象,而不是对象的属性,并且劫持的方法有多种。而且最后会返回劫持后的新对象。所以相对来讲,这个方法还是挺好用的。不过兼容性不太好。

  关于proxy的介绍与用法,可以看看 阮一峰老师的 这篇文章

题外话:ECMAScript  与  JavaScript  的关系

参考:这里

Netscape 公司最初创建了一个用于浏览器的脚本语言,后与Sun 公司(创建了Java)联合发布了该脚本语言,命名为Javascript;后来微软也出了一个 JScript,用于IE3.0浏览器;还有Cenvi的ScriptEase。于是Netscape 公司决定将 JavaScript 提交给国际标准化组织 ECMA,希望 JavaScript 能够成为国际标准。

1997年7月,ECMA的TC93(39号技术委员会)发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准。由于商标和其它协议的原因,只有Netscape 公司能使用Javascript 这个名称,所以最后将这种语言称为 ECMAScript。而现在我们所说的 JavaScript 是 ECMAScript + DOM + BOM的集合。DOM和BOM是W3C制定的规范。

现在说的ES5就是 ECMAScript 5.0版,而ES6就是 ECMAScript 6 后更名为 ECMAScript 2015(简称ES2015),后面每一年的6月份都会发布一个新的版本,不过增加的内容并不多。ES7(ES2016)、ES8 (ES2017)、ES9 (ES2018),现在2019.7月了,这个时候都已经出了ES10(ES2019)。不过ES10还是一个草案,并没有多少浏览器支持。主流的都是ES5 和 ES6。

原文地址:https://www.cnblogs.com/zjjDaily/p/11227623.html

时间: 2024-10-07 05:24:15

关于Object.defineProperty 的基础知识的相关文章

JS基础知识回顾:ECMAScript的语法(二)

ECMAScript中有五种简单数据类型(也称为基本数据类型):Undefined.Null.Boolean.Number.String ECMAScript还有一种复杂数据类型——Object,Object本质上是由一组无序的名值对组成的. ECMAScript不支持任何创建自定义类型的机制,而所有值最终都将是上述六种数据类型之一,由于ECMAScript的数据类型具有动态性,因此的确没有再定义其他数据类型的必要了. 监狱ECMAScript是松散类型的,因此需要有一种手段来检测给定变量的数据

javascript——基础知识——Object

Object对象是javascript中所有对象的父对象,它的所有方法和属性在所有其他对象中都可用.提供所有 JavaScript 对象共有的功能.当然这些方法可以在用户定义的对象中重新定义,JavaScript 将在适当的时候调用这些方法. 属性: 属性 说明 __proto__ Property 为对象指定原型.仅 IE11支持 constructor 指定创建一个对象的函数. prototype 为对象的类返回原型的引用. 方法: 功能 描述 Object.create 创建一个具有指定原

javascript之Object.defineProperty的奥妙

直切主题 今天遇到一个这样的功能: 写一个函数,该函数传递两个参数,第一个参数为返回对象的总数据量,第二个参数为初始化对象的数据.如: var o = obj (4, {name: 'xu', age: 21}) // 返回了一个能容纳4条数据的对象,初始数据为name:'xu'和age: 21 返回的该对象总会有以下属性:overLength(数据容纳量).size(当前数据条数) 返回的对象应该有以下方法:cache(保存一条数据).delete(删除一条数据) 每一次引用某属性后,该属性值

Java基础知识整理(一)

概述 公司业务需要,产品既要有.NET又需要Java,没得选择,只能业余时间学习Java,整体觉得Java也.NET还是很相似的,只是语法有差别,差别也不是很大,这就将学习Java的基础知识整理下,以便于自己的学习.作为个.NET程序猿也可以学习Java ,毕竟技多不压身,学习多也要精通. 开发工具 eclipse ,开发java类似.NET 需要装JDK类似.NET Framework. Java开发工具eclipse设置 1.设置字体:window设置: 2.设置快捷键:window--ke

javascript的基础知识及面向对象和原型属性

自己总结一下javascript的基础知识,希望对大家有用,也希望大家来拍砖,毕竟是个人的理解啊 1.1 类型检查:typeof(验证数据类型是:string) var num = 123; console.log(typeof num); // 1.2 in 运算符 作用:判断指定属性是否存在于指定的对象中. 如果指定的属性存在于指定的对象中,则 in 运算符会返回 true. 语法: 属性 in 对象 返回值:true 或者 false 示例: var obj = { age: 18 };

第三章 nodejs基础知识(上)

本章主要介绍一些nodejs的基础知识: 1. 什么是nodejs中的控制台,如何向控制台进行标准输出流与标准错误输出流的输出: 2. 什么是nodejs中的全局作用域,在nodejs中预先提供了哪些全局函数以及全局变量: 3. 什么是nodejs中的事件处理机制以及事件环进制,如何在nodejs中为各种事件指定事件触发以及事件取消时执行的回调函数: 4. 如何使用nodejs 中的调试器进行应用程序的调试: 3.1 nodejs中的控制台 在nodejs中,使用console对象代表控制台.在

java基础知识回顾之java Thread类学习(七)--java多线程通信等待唤醒机制(wait和notify,notifyAll)

1.wait和notify,notifyAll: wait和notify,notifyAll是Object类方法,因为等待和唤醒必须是同一个锁,不可以对不同锁中的线程进行唤醒,而锁可以是任意对象,所以可以被任意对象调用的方法,定义在Object基类中. wait()方法:对此对象调用wait方法导致本线程放弃对象锁,让线程处于冻结状态,进入等待线程的线程池当中.wait是指已经进入同步锁的线程,让自己暂时让出同步锁,以便使其他正在等待此锁的线程可以进入同步锁并运行,只有其它线程调用notify方

java基础知识回顾之java Thread类学习(六)--java多线程同步函数用的锁

1.验证同步函数使用的锁----普通方法使用的锁 思路:创建两个线程,同时操作同一个资源,还是用卖票的例子来验证.创建好两个线程t1,t2,t1线程走同步代码块操作tickets,t2,线程走同步函数封装的代码操作tickets,同步代码块中的锁我们可以指定.假设我们事先不知道同步函数用的是什么锁:如果在同步代码块中指定的某个锁(测试)和同步函数用的锁相同,就不会出现线程安全问题,如果锁不相同,就会发生线程安全问题. 看下面的代码:t1线程用的同步锁是obj,t2线程在操作同步函数的资源,假设不

JS基础知识回顾:引用类型(一)

在ECMAScript中引用类型是一种数据结构,用于将数据和功能组织在一起,而对象时引用类型的一个实例. 尽管ECMAScript从技术上讲是一门面向对象的语言,但它不具备传统的面向对象语言所支持的类和接口等基本结构,所以虽然说引用类型与类看起来想死,但他们并不是相同的概念. 不过引用类型有的时候也可以被称为对象定义,因为他们描述的是一类对象所具有的属性和方法. 新对象是使用new操作符后跟一个构造函数来实现的,构造函数本身就是一个函数,只不过该函数时处于创建新对象的目的而定义的. ECMASc