后盾人：JS课程第十章（对象）
1.函数编程与面向对象的实例对比
let user = { name: "XJ", grade: [ {name: "js", score: 99}, {name: "css", score: 88}, ], average() { let total = this.grade.reduce((t, v) => t + v.score, 0) return `${this.name}的成绩:${total}` } } console.log(user.average());
所有和用户user相关的内容（数据、方法等）都放在user对象中
2.属性基本操作
let user = { name: "XJ", "age name": 18, } user.name user["age name"] //两种方法都可以获取值。常用第一种
3.解构
解构默认值实现配置合并
function createElement(options = {}){ let {width=200,height=100,background='red'} = options const div = document.createElement("div") div.style.width = width + "px" div.style.height = height + "px" div.style.backgroundColor = background document.body.appendChild(div) } createElement({width:120})
4.Object.assign（a,b） //合并对象
5.对象的封装和抽象
function User(name, age){ let data = {name, age } //使用闭包特性对属性进行了抽象化处理 let info = function(){return data.age > 30 ? "中年":"青年"} this.show = function(){ console.log(`${data.name}的年龄${info()}`); } } let lisi = new User("李四", 30) lisi.name = "张三" //此处不会改变构造函数lisi的值 lisi.info = function() { //此处不会改变构造函数lisi内的方法 return "" } lisi.show() //输出“李四的年龄青年”
6.对象属性的特征
Object.entries(arr) 返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。索引为 key， 元素为 value。
Object.getOwnPropertyDescriptor("对象", "对象的属性") 查看元素的属性特征，
Object.getOwnPropertyDescriptors("对象") 查看元素的所有属性特征，
属性的特征
{ “value”： “值” “writable”： true， //对应属性是否可以写， “enumerable”：true， //对应属性时候可以遍历/Object.key（）是否可以获取 “configurable”： true //对应属性是否可以被删除/是都可以重新设置 }
控制属性特征
Object.defineProperty(对象, 属性, { 特征设置 })
禁止向对象添加属性
Object.preventExtensions(对象)
Object.isExtensible(对象) //判断是否被禁止添加属性
封闭对象
Object.seal(对象)
Object.isSealed(对象) //判断时候封闭
冻结对象
Object.freeze(对象)
Object.isFrozen(对象) 判断是否冻结
7.访问器
set 属性 {} //修改属性时限制
get 属性 {} //获取属性时限制
访问器伪属性操作
let lesson = { lists: [ {name: "js", price: 100 }, {name: "php", price: 99 }, ], get total() { return this.lists.reduce((t, l) => t + l.price, 0) } } console.log(lesson.total); //199 lesson.total = 8000 //不会改变total伪属性 console.log(lesson.total); //199
访问器的优先级更高
8.对象代理 proxy
基本语法：new Proxy(对象, {方法})
使用代理实现 Vue 的双向绑定
<body> <input type="text" v-model="title"> <input type="text" v-model="title"> <button v-bind="title"> 添加 </button> <hr><br> <input type="text" v-model="content"> <input type="text" v-model="content"> <button v-bind="content"> 添加 </button> </body> <script> function View() { let proxy = new Proxy( {}, { get(obj, property) { }, set(obj, property, value) { //obj {} //property 传入的值 //value传入的值 document.querySelectorAll(`[v-model="${property}"]`).forEach(item => { item.value = value }) document.querySelectorAll(`[v-bind="${property}"]`).forEach(item => { item.innerHTML = value }) } }) this.init = function () { const els = document.querySelectorAll("[v-model]"); els.forEach(item => { item.addEventListener("keyup", function () { proxy[this.getAttribute("v-model")] = this.value }) }) } } new View().init() </script>
