JavaScript高级编程--对象详解

对象详解

Object.prototype.hasOwnProperty() 返回布尔

(原型对象的方法)
表示是否是对象自身的属性。所有实例对象都可以访问
这个方法会查找一个对象是否有某个属性,但是不会去查找它的原型链
沿原型链上查找的方法不是它自身的
在这里插入图片描述
在这里插入图片描述

Object.defineProperty() 类方法

  • 作用:
    1. 给对象动态添加属性
    2. 将对象属性绑定到另一个对象上(见下)
    3. 数据劫持-监听对象数据变化, 实现数据变化自动更新界面 (vue2.x实现原理应用)(见下)

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

  • 参数

obj : 要定义属性的对象。
prop:要定义或修改的属性的名称或 Symbol 。
descriptor:要定义或修改的属性描述符对象。

  • 数据属性:

1.configurable:表示能否通过delete删除属性从而重新定义属性,
能否修改属性的特性,或者能否把属性修改为访问器属性,默认值为false。
2.enumerable:表示能否通过for in循环访问属性,默认值为false
3.writable:表示能否修改属性的值。默认值为false。
4.value:包含这个属性的数据值。默认值为undefined。
在这里插入图片描述

  • 访问器属性:

1.get:在读取 / 访问属性时自动调用的函数,默认值是undefined
2.set:在 写入 / 赋值 属性的时自动调用的函数,默认值是undefined
在这里插入图片描述

function test1() {
				let obj = {}
				Object.defineProperty(obj, 'name', {
					value: 'jack',
					configurable: true, // 允许删除属性
					writable: true, //允许修改属性值
					enumerable: true, // 遍历对象for-in
				})
				// obj = {name:'jack'}
				console.log(obj.name)

				// delete obj.name  // 删除对象属性
				// obj.name = 'rose' // 修改对象属性值
				console.log(obj.name)

				for (const key in obj) {
					console.log(key, obj[key])
				}
			}
 let obj = {}
                Object.defineProperty(obj,'age',{
                    // 访问对象age属性时自动调用  obj.age
                    get:function(){
                        console.log('get >>>> ')
                        return 20
                    },
                    // 赋值给对象属性age时自动调用并赋值
                    set(newValue){
                        // this.age = newValue
                        console.log('set >>>> ')
                    }
                })
                console.log('111',obj.age)
                obj.age = 18
                console.log('222',obj.age)
  • 返回值

    被传递给函数的对象。

作用

1、 将对象属性绑定到另一个对象上

<!-- 
        Object.defineProperty作用
          1. 将对象属性绑定到另一个对象上
     -->
	</head>
	<body>
		<script>
			let obj = {
				name: 'jack',
				age: 18,
			}
			let vm = {}
			// 将obj对象的所有属性动态添加到vm对象上

			//1. 遍历obj对象
			for (const key in obj) {
				// 2. 动态给vm添加属性
				Object.defineProperty(vm, key, {
					// vm.name
					get() {
						return obj[key]
					},
                    // vm.name = 'rose'
					set(newValue) {
						// 原值与新值相同直接返回
						if (obj[key] == newValue) {
							return
						}
						obj[key] = newValue // 设置属性新值
					},
				})
			}
		</script>
	</body>

2、 数据劫持—利用set,在 赋值 属性的时自动调用的函数,实现自动刷新

<!-- 
        数据劫持
           将obj对象的属性能过Object.defineProperty方法绑定到vm对象上,
           转变成getter和setter方法.
           vm对象数据变化,自动更新界面
           vm.message = 'helloworld'
     -->
</head>
<body>
    <div>内容</div>
    <script>
        let obj = {
            message:''
        }
        let vm = {}

        for(const key in obj){
            Object.defineProperty(vm, key, {
                get(){
                    return obj[key]
                },
                set(value){
                    obj[key] = value
                    // 更新div内容
                    document.querySelector('div').innerHTML = value
                }
            })
        }
    </script>
</body>

代理Proxy

理解:简单理解就是我们不直接对对象、函数或者数组进行操作,而是把它挂载到Proxy(代理)上,直接对代理的做一系列操作。我们去买房,房产中介就相当于我们的代理,我们不需要直接向卖家沟通。
v

在这里插入图片描述

捕获器(trap)

使用代理的主要目的是可以定义捕获器(trap)。捕获器就是在处理程序对象中定义的“基本操作的“拦截器”。
每个处理程序对象可以包含零个或多个捕获器,每个捕获器都对应一种基本操作,可以直接 或间接在代理对象上调用。每次在代理对象上调用这些基本操作时,代理可以在这些操作传播到目标对 象之前先调用捕获器函数,从而拦截并修改相应的行为。
捕获器一共13种
apply 、construct、defineProperty、deleteProperty、
get、getOwnPropertyDescriptor、getPrototypeOf、has、isExtensible
ownKeys、preventExtensions、set、setPrototypeOf

get()

在这里插入图片描述
get 的参数: target 目标对象 property 属性 receiver 处理程序
在这里插入图片描述

set()—设置新值触发

在这里插入图片描述
在这里插入图片描述
示例: 不改变原对象,检查年龄数据类型number, 给年龄后添加岁字

在这里插入图片描述

代理的应用—实现页面更新

<body>
    <div></div>
    <script>
        let obj = {
            message:''
        }
        let proxyObj = new Proxy(obj,{
            get(target,propery){
                return target[propery]
            },
            set(target,propery,value){
                target[propery] = value // 通过代理对象改变目标对象属性值
                // 更新界面操作-更改div内容
                document.querySelector('div').innerHTML = value
            }
        })
        proxyObj.message = 'hello'
    </script>
</body>

代理Proxy与Object.definePropery区别

       Object.definePropery 处理数组要特殊处理   都需要用一个循环
       代理Proxy 直接处理

TodoList 案例改进

<body>
		<div class="container">
			<input type="text" placeholder="请输入内容" /><button>确定</button>
			<ul></ul>
		</div>

		<script>
			// 目标对象
			var arr = ['html', 'css'] // 数据
			// 代理对象
			let proxyArr = new Proxy(arr,{
				get(target,propery){
					return target[propery]
				},
				set(target,propery,value){
					target[propery] = value
					// 代理对象数组数据变化,自动刷新界面
					showList()
					return true //???
				}
			})
			/*
              数据操作-实现显示列表
                遍历数组,拼接字符串,将字符串作用内容设置给显示元素
                点击确定按钮,获取输入框内容,添加数组
            */
			function showList() {
				var liArr = proxyArr.map(function (item, index) {
					return `<li data-index="${index}">${item}</li>`
				})
				var liStr = liArr.join('')
				var ulEle = document.querySelector('ul')
				ulEle.innerHTML = liStr
			}

			// 删除元素
			function onDelete() {
				//  删除事件操作委托给ul上级元素处理
				var ulEle = document.querySelector('ul')
				ulEle.addEventListener('click', function (e) {
					e = e || window.event
					var target = e.target || e.srcElement // 事件目标对象
					var index = target.dataset.index
					proxyArr.splice(index, 1)
				})
			}

			//添加元素
			function bindAdd() {
				var btn = document.querySelector('button')
				btn.onclick = function () {
					var inputEle = document.querySelector('input')
					var inputValue = inputEle.value
					proxyArr.push(inputValue)
					inputEle.value = '' // 清空输入框
				}
			}

			showList() // 初始化执行
			onDelete() // 初始化执行
			bindAdd() // 初始化绑定添加事件
		</script>
	</body>

浅拷贝 深拷贝

一、先了解内存

  1. 内存简单划分为堆区域和栈区域
  2. 复杂数据类型数据存储在堆区域,基本数据类型变量和引用变量存储在栈区域
    二、拷贝- 复制obj对象得到一个全新的对象
    1、浅拷贝 – 复制的obj对象只复制一层,如果对象属性值中有对象,则对象不能复制(如fun:{})只能赋值对象的地址
    2、深拷贝 – 完全复制的obj对象,如果对象属性值是对象一起复制得到全新对象

在这里插入图片描述
浅拷贝:
在这里插入图片描述
深拷贝:
在这里插入图片描述
Object.assign(obj)或展开运算符{…obj}
缺点:只能拷贝一层,如果属性值是对象,无法拷贝
let newObj = obj //不是拷贝,只是将地址给了newObj,还是同一个对象
展开运算符实现的是浅拷贝;只能拷贝一层,如果属性值是对象,无法拷贝
在这里插入图片描述

深拷贝

在这里插入图片描述

JSON对象

  • JSON.stringify(obj)

              obj -> 字符串  对象转字符串
              注: 只能是Object形式对象,不能是Math,Date...
              '{name:"jack",age:18,fun:{swiming:"游泳"}}'  <- JSON字符串
    

在这里插入图片描述
在这里插入图片描述

  • JSON.parse(str)

              字符串 -> obj  对象
              注: 字符串必须 是 json格式
    

在这里插入图片描述
在这里插入图片描述

利用JSON实现深拷贝
  1. JSON.parse(JSON.stringify(obj))
    缺点: 数据类型是Function或数据值为undefined无法拷贝
  // 利用JSON实现深拷贝
  let obj = {
				name: 'jack',
				age: 18,
				fun: {
					swiming: '游泳',
				},
                say:function(){
                    console.log('说话');
                },
                score:undefined
			}
            // let str = JSON.stringify(obj)  //obj->str
            // let newObj = JSON.parse(str)  // str->obj
            let newObj = JSON.parse(JSON.stringify(obj))
            newObj.name = 'rose'
            newObj.age = 20
            newObj.fun.swiming = '玩游戏'
            console.dir(newObj)
            console.dir(obj)

在这里插入图片描述

3. 递归 cloneDeep()—完美的拷贝,完全拷贝

<body>
		<script>
            function cloneObj(obj){
                let newObj = Array.isArray(obj)? []:{} // 存储拷贝的原对象属性方法
                for(const key in obj){
                    if(obj[key] && typeof obj[key] === 'object'){
                        newObj[key] = cloneObj(obj[key])
                    }else{
                        newObj[key] = obj[key]
                    }
                }
                return newObj
            }

			let obj = {
				name: 'jack',
				age: 18,
				fun: {
					swiming: '游泳',
				},
				say: function () {
					console.log('说话')
				},
				score: undefined,
			}

            let newObj = cloneObj(obj)

            newObj.name = 'rose'
            newObj.age = 20
            newObj.score = 98
            newObj.fun.swiming = '玩游戏'

            console.dir(newObj)
            console.dir(obj)


		</script>
	</body>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值