15个例子，全方位总结，Javascript如何面向对象
面向对象是一个老生常谈的话题了，如何使用JavaScript来实现面向对象呢？
本文将从JavaScript对象讲起，全方位阐述JavaScript如何操作对象，一定有你不知道的！
15个例子，全方位总结，Javascript如何面向对象
一.面向对象
1.检测属性
Object.hasOwnProperty("name") //只检测到自身，不检测原型 "name" in a //检测a中的原型链是否包含name属性，检测自身和原型 复制代码2.操作
delete Object.AttributeName Object.assign(object1,object2) 将俩个对象进行合并 Object.keys() Object.values() Object.entries() 获得数组，，一般是二维数组d'd'd'd for of 是操作迭代对象的，Object不可迭代 复制代码
3.设置原型
Object.setPrototypeOf(son,parent) 复制代码
//将a的原型设置为b let a = { name : "a" } let b = { name : "b" } Object.setPrototypeOf(a,b) 复制代码1.多层对象的解构操作
保证左右结构相同
let hd = { name : "后盾人", lesson : { title : "Javascript" } } let {name, lesson : {title} } = hd; console.log(name,title); 复制代码2.解构赋值实现配置合并
使用对象的默认参数合并配置项
function creatEle(options = {}){ let {width = 200, height = 200 , backgroundColor = "green"} = options let divs = document.createElement("div"); divs.style.width = width + "px"; divs.style.height = height + "px"; console.log(width,height,backgroundColor); divs.style.backgroundColor = backgroundColor document.body.appendChild(divs) } creatEle(); 复制代码3.对象与原型链属性检测实例
let arr = ["Array","houdunren"] console.log(arr.hasOwnProperty("length")) 该方法检测自身，不检测原型 console.log("length" in arr) 该方法既检测原型，有检测自身 复制代码4.计算属性与assign的使用
将数组转换为对象
let lessons = [ { name : "css教程", category : "css" }, { name : "php教程", category : "php" }, { name : "java教程", category : "java" }, ] let obj = lessons.reduce((obj,cur,index) => { obj[`${cur.category}-${index}`] = cur; return obj },{}) console.log(obj); 复制代码5.对象的浅拷贝多种操作方法
浅拷贝:不复制对象中的对象格式
let obj = {name : "",age:18,json:{}} 复制代码方式一:(for-in)：
let obj = { name : "houdunren.com", url : "hdcms" } let hd = {} for (const key in object) { hd[key] = obj[key]; } 复制代码方式二(Object.assign()):
let obj = { name : "houdunren.com", url : "hdcms" } let hd = Object.assign({},obj) console.log(hd); 复制代码方式三 : 展开语法
6.深拷贝多层次分析
我们将obj拷贝给hd，但是传递user的时候，由于user是一个对象，所以按址传递，obj和hd公用一个user，不是我们希望看到的结果
let obj = { name : "houdunren.com", user : { age : 18 } } let hd = {...obj} console.log(hd); 复制代码我们可以定义深拷贝函数
function copy(data){ //判断类型确定用数组还是对象接收数据 let obj = data instanceof Array ? [] : {} //迭代数组 for (const [k,v] of Object.entries(data)) { obj[k] = typeof v == "object" ? copy(v) : v; } return obj; } 复制代码7.使用工厂函数创建对象
function FactoryPerson(name,age,address) { // 创建一个新的对象 var obj = new Object(); // 向对象添加属性 obj.name = name; obj.age = age; obj.address = address; obj.sayHello = function () { console.log("I'm %s, and have %d years old. By the way, I live in %s",this.name,this.age,this.address) } // 返回新的对象 return obj; } 复制代码8.面对对象的封装与抽象
使用this定义的属性可以通过外部访问，通过变量定义的属性不可以访问(实现抽象)
function User(name,age){ this.name = name; this.age = age; let show = function(){ console.log(name + age); } } let hd = new User("湘军",18) hd.show(); 复制代码9.对象的属性特征
const usr = { name : "houdunren", age : 18 } 复制代码1.获取属性特征:
Object.getOwnPropertyDescriptor(user,name) Object.getOwnPropertyDescriptors(user) 复制代码
2.修改属性特征:
Object.defineProperty(user,name,{config}) Object.defineProperties(user,{}) 复制代码3.属性操作:
Object.preventExtensions(user); //禁止向对象中添加属性 Object.isExtensible() //检测对象是否是可扩展的 Object.seal() //封闭对象，不可添加不可配置 Object.isSealed() //判断是否封闭 Object.freeze() //冻结对象，不可修改不可添加不可配置 Objcet.isFrozen() //判断是否冻结 复制代码
10.使用set,get访问器保护数据
访问器优先级高
const user = { data : {name : "houdunren" , age : 18}, set age(value){ if(typeof value != "number" || value > 100 || value < 10){ console.log("输入的值并不正确") } this.data.age = value; } get age(){ return this.data.age; } } user.age = 5; 复制代码11.使用 token保存登录信息
let Request = { set token(content){ localStorage.setItem("token",content); }, get token(){ let token = localStorage.getItem("token"); if(!token){ alert("请登陆") } return token; } } Request.token(); console.log(Request.token); 复制代码12.什么是Proxy代理拦截
访问器是对对象的属性进行代理，而Proxy相当于买房子的中介，不直接操作对象
let obj = { name : "海景房", price : 18500 } //新建一个代理，告诉他我要代理海景房 let proxy = new Proxy(obj,{ get(obj,property){ return obj[property] }, set(obj,property,value){ obj[property] = value; } }); proxy.name = "海景房2" console.log(proxy); console.log(proxy.price) 复制代码13.使用 Proxy.apply代理函数
Proxy.apply(func,obj,args)
function factorial(num){ return num === 1 ? 1 : num * factorial(num-1); } let proxy = new Proxy(factorial,{ //第一个是要代理的函数，第二个是对象的作用域，第三个是传递的参数（必须用数组的形式） apply(func,obj,args){ console.time("run") func(args) console.timeEnd("run") } }) 复制代码14.数组使用代理拦截
let lessons = [ { title : "css课程", number : "1084350607" }, { title : "java教程", number : "1091525714" }, { title : "php全面教学", number : "1091525714" } ] let proxy = new Proxy(lessons,{ get(array,key){ let number = array[key].number; const length = 3; array[key].number = number.length >= length ? number.substr(0,3) + "*".repeat(number.length-length) : number; return newAry; } }); console.log(proxy[2]); 复制代码15.VUEJS数据绑定实现，使用Proxy实现数据双向绑定
相当于房东告诉代理，房价发生了变化，代理告诉多个购房用户价格发生了变化。
<input type="text" data_title = "title"> <input type="text" data_title = "title"> <div data_title = "title">更新数据</div> 复制代码
function View(){ let ele = document.querySelectorAll("[data_title]") let proxy = new Proxy({},{ set(obj,property,value){ ele.forEach(item => { item.value = value }) }, get(obj,propert){ } }); this.init = function(){ ele.forEach(item => { item.addEventListener("keyup",function(){ proxy[this.getAttribute("data_title")] = this.value; }) }) } } new View().init()
作者：久染
链接：https://juejin.cn/post/7028190322643435557