Javascript教程第十章：JS如何实现面向对象

一.面向对象

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.使用工厂函数创建对象

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()