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

今天药忘吃喽~ 2023-02-10 05:28 153阅读 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 条评论，153人围观）

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

相关阅读

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

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

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

相关 SpringBoot将对象转化Map

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

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

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

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

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

相关 Gson转化为对象

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

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

相关将对象转化为字符串

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

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

相关将对象转化为json格式反序列化处理

/// <summary> /// 将对象序列化为json数据 /// </summary> p

一时失言乱红尘/ 2022年09月14日 06:26/ 0 赞/ 189 阅读

相关 java对象转化为JSON格式

package com.gbt.utils; import java.beans.IntrospectionException; import

分手后的思念是犯贱/ 2022年08月04日 05:09/ 0 赞/ 305 阅读

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

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

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

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

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

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

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

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

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