Object.defineProperty将普通对象转化为响应式对象

今天药忘吃喽~ 2023-02-10 05:28 239阅读 0赞

let per = {
    	name:"小明",
    	age:"20",
    	sex:"男",
    	hobby:{
    		ball:"basketball"
    	},
    	course:[{
    		name:"高数"
    	},{
    		name:"大学英语"
    	}]
    }
    //数组常用操作
    let ARRAY_METHOD = [
     	'push',
       	'pop',
       	'shift',
       	'unshift',
       	'reverse',
       	'sort',
       	'splice'
     ];
     //修改数组原型链结构，调用数组方法的时候，增加响应式处理
     //获取数组的所有原型方法
     let array_methods = Object.create(Array.prototype);
     ARRAY_METHOD.forEach(method=>{
     	//重新定义方法
     	array_methods[method] = function(){
     		//将方法传进来的数据进行响应式化
     		for(let i = 0; i < arguments.length; i++){
     			reactify(arguments[i]);
     		}
     		let res = Array.prototype[method].apply(this,arguments);
     		return res;
     	}
     })
    
    /*
    Object.defineProperty(obj, prop, descriptor)
    三个参数：
    obj：要定义属性的对象
    prop：要定义或修改的属性的名称或 Symbol
    descriptor：要定义或修改的属性描述符
    configurable:true 该属性的对象能够改变，也能够被删除
    enumerable:true 是否可以出现在对象的枚举属性中，即能否for...in.
    value 该属性对应的值
    writable:true 属性能否做赋值运算，为true时不能和get、set同时存在
    get 属性的 getter 函数,当访问该属性时，会调用此函数
    set 属性的setter函数，当修改属性时，会调用此函数
    */
    function defineReactive(target,key,value,enumerable){
    	//数据由参数传入，参数在函数内部起到一个局部作用域的作用，避免变量全局污染，闭包
    	//如果是非数组的引用类型
    	if(typeof value === "object" && value != null){
    		//引用类型递归处理
    		reactify(value);
    	}
    
    	Object.defineProperty(target,key,{
    		configurable:true,
    		enumerable:!!enumerable,//是否可枚举
    		//响应式即表示在get、set上做一些别的操作
    		get(){//获取值的时候触发
    			console.log(`读取当前对象的${key}`)
    			return value;
    		},
    		set(newVal){//设置值的时候触发
    			console.log(`设置当前对象的${key}`)
    			if(typeof newVal === "object" && newVal!=null){
    				reactify(newVal);
    			}
    			value = newVal;
    		}
    	})
    }
    
    //将对象转化为响应式对象
    function reactify(obj){
    	//直接对obj进行判断
    	//判断这个obj不是引用类型，是不是数组
    	//如果是引用类型则需要递归深层次的将所有数据转化为响应式的
    	//如果是数组，循环数组，递归将其内的所有元素进行响应式化
    	if(Array.isArray(obj)){
    		obj.__proto__ = array_methods;
    		for (var i = 0; i < obj.length; i++) {
    			reactify(obj[i])
    		}
    	}else{
    		let keys = Object.keys(obj);
    		for(let i = 0; i < keys.length; i++){
    			let key = keys[i];
    			let value = obj[key];
    			defineReactive(obj,key,value,true);
    		}
    	}
    }
    
    reactify(per);

结果展示：  
![在这里插入图片描述][20200522135503941.png]

[20200522135503941.png]: https://img-blog.csdnimg.cn/20200522135503941.png

发表评论取消回复

表情：

评论列表（有 0 条评论，239人围观）

还没有评论，来说两句吧...

相关阅读

相关 ps如何将智能对象转化为普通图层

选择需要改变的图层右键 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9

川长思鸟来/ 2023年06月27日 12:41/ 0 赞/ 88 阅读

相关 Object.defineProperty将普通对象转化为响应式对象

let per = { name:"小明", age:"20", sex:"男", hobby:{ ball:"ba

今天药忘吃喽~/ 2023年02月10日 05:28/ 0 赞/ 240 阅读

相关 SpringBoot将对象转化Map

SpringBoot将对象转化Map 前言我们在开发的过程中可能会遇到这样的一个场景：我们需要将一个对象中的属性名和值放在一个`Map`中，当属性比较少的时候你可

分手后的思念是犯贱/ 2023年01月01日 03:47/ 0 赞/ 247 阅读

相关 JS中将对象转化为数组,数组转对象

[https://www.cnblogs.com/wancheng7/p/8735168.html][https_www.cnblogs.com_wancheng7_p_873

朱雀/ 2022年12月24日 06:58/ 0 赞/ 291 阅读

相关 JS中将对象转化为数组

把一个对象转数组 obj：{'未完成':5, '已完成':8, '待确认':4, '已取消':6} 转为 newObj:[{"未完成":5},{

布满荆棘的人生/ 2022年11月27日 05:30/ 0 赞/ 110 阅读

相关 Gson转化为对象

import com.google.gson.Gson; public class Main { public static

拼搏现实的明天。/ 2022年10月01日 01:49/ 0 赞/ 305 阅读

相关将对象转化为字符串

将对象转化为字符串 System.out.println()方法我们很熟悉，用来控制台输出，比如System.out.println("abc")，会输出字符串"abc"

红太狼/ 2022年09月19日 10:56/ 0 赞/ 423 阅读

相关将JSON对象转化为实体对象

public static Object json2Object(JSONObject json, Class pojo) throws Exception {

╰+哭是因爲堅強的太久メ/ 2022年07月18日 00:06/ 0 赞/ 456 阅读

相关将xml文件对象转化为Map对象

一、基本思路先将xml文件转化为document对象，并获取到根节点，然后依次遍历二级节点如果二级节点拥有子节点的话：进入递归如果二级节点没有子节点的话：将数据

逃离我推掉我的手/ 2022年05月14日 09:35/ 0 赞/ 754 阅读

相关 JS中将对象转化为数组

[JS中将对象转化为数组][JS] 前言其实这本来应该是一个很基础的问题了，但我之做一想记录一下是因为之前因为对象转数组的时候卡住了后来弄了出来，但最近再遇到这个问题

傷城~/ 2021年09月07日 06:06/ 0 赞/ 585 阅读