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.ageget:function(){console.log('get >>>> ')return 20},// 赋值给对象属性age时自动调用并赋值set(newValue){// this.age = newValueconsole.log('set >>>> ')}})console.log('111',obj.age)obj.age = 18console.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.nameget() {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(代理)上，直接对代理的做一系列操作。我们去买房，房产中介就相当于我们的代理，我们不需要直接向卖家沟通。

捕获器(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.eventvar target = e.target || e.srcElement // 事件目标对象var index = target.dataset.indexproxyArr.splice(index, 1)})}//添加元素function bindAdd() {var btn = document.querySelector('button')btn.onclick = function () {var inputEle = document.querySelector('input')var inputValue = inputEle.valueproxyArr.push(inputValue)inputEle.value = '' // 清空输入框}}showList() // 初始化执行onDelete() // 初始化执行bindAdd() // 初始化绑定添加事件</script></body>

浅拷贝深拷贝

一、先了解内存

内存简单划分为堆区域和栈区域
复杂数据类型数据存储在堆区域，基本数据类型变量和引用变量存储在栈区域
二、拷贝- 复制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实现深拷贝

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->objlet newObj = JSON.parse(JSON.stringify(obj))newObj.name = 'rose'newObj.age = 20newObj.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 = 20newObj.score = 98newObj.fun.swiming = '玩游戏'console.dir(newObj)console.dir(obj)</script></body>