Javascript教程第十章：JS如何实现面向对象
Javascript教程第十章：JS如何实现面向对象
一.面向对象 = 1.检测属性
Object.hasOwnProperty("name") //只检测到自身，不检测原型
"name" in a //检测a中的原型链是否包含name属性，检测自身和原型2.操作 ```js delete Object.AttributeName
Object.assign(object1,object2) 将俩个对象进行合并
Object.keys()
Object.values()
Object.entries() 获得数组，，一般是二维数组d'd'd'd
for of 是操作迭代对象的，Object不可迭代
3.设置原型js
Object.setPrototypeOf(son,parent)
```js
//将a的原型设置为b
let a = {
name : "a"
}
let b = {
name : "b"
}
Object.setPrototypeOf(a,b)
1..多层对象的解构操作
保证左右结构相同 ```js let hd = { name : "后盾人", lesson : { title : "Javascript" } }
let {name, lesson : {title} } = hd; console.log(name,title);
## 2.解构赋值实现配置合并
使用对象的默认参数合并配置项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.对象与原型链属性检测实例console.log("length" in arr) 该方法既检测原型，有检测自身
## 4.计算属性与assign的使用
将数组转换为对象]
let obj = lessons.reduce((obj,cur,index) => {
obj[${cur.category}-${index}] = cur;
return obj
},{})
console.log(obj);
## 5.对象的浅拷贝多种操作方法
### 浅拷贝:不复制对象中的对象格式 方式一:(for-in)：} 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，不是我们希望看到的结果
js
let obj = {
name : "houdunren.com",
user : {
age : 18
}
}
let hd = {...obj}
console.log(hd);
我们可以定义深拷贝函数
js
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.使用工厂函数创建对象
8.面对对象的封装与抽象
使用this定义的属性可以通过外部访问，通过变量定义的属性不可以访问(实现抽象) ```js 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.对象的属性特征}
1.获取属性特征:js
Object.getOwnPropertyDescriptor(user,name)
Object.getOwnPropertyDescriptors(user)
2.修改属性特征:js
Object.defineProperty(user,name,{config})
Object.defineProperties(user,{})
3.属性操作:js
Object.preventExtensions(user); //禁止向对象中添加属性
Object.isExtensible() //检测对象是否是可扩展的
Object.seal() //封闭对象，不可添加不可配置
Object.isSealed() //判断是否封闭
Object.freeze() //冻结对象，不可修改不可添加不可配置
Objcet.isFrozen() //判断是否冻结
```
10.使用set,get访问器保护数据
访问器优先级高
js
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)
```js
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 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()