写文章

javascript对象复习

吐槽君 分类：javascript

对象

对象是什么

对象，什么是对象，你有对象吗，正经程序员谁有对象？，你是正经程序员吗。

在我个人的理解里，其实对象是对函数和数据的分类，把有关系的数据和函数装起来就是对象，这样就可以方便我们管理代码。

​ 而官方的定义是具体的一个事物就是对象，所以有了那句编程界的名言，万物皆对象，所以不要说程序员没用对象，一切都是程序员的对象

let No={
    name: '不忘',    //对象内的这些都叫属性
    faceValue:'帅出天际',
    haveGirl(){     //对象内的函数叫方法
        console.log(this.name+'有无数妹子，因为他的颜值'+this.faceValue);
    }
}
//一个No对象

属性的基本操作

属性的增查改删

let No={
    name: '不忘',
    faceValue:'很高',
    haveGirl(){
        console.log(this.name+'有无数妹子，因为他的颜值'+this.faceValue);
    }
}
No.study="热爱"//增加
console.log(No.study);//查询
console.log(No['study']);//查询
No.faceValue='帅出天际';//修改
delete No.study;//删除

取值和取址

对象是引用类型，所以对象所存的数据的方式你可以当作放到一个地方，而变量名存放的是那个地方的地址

let first={ num:'32'}  //first内放的是一个地址， 地址指向存放数据num的位置
let second= first      //将first的地址复制到second中
console.log(first);
console.log(second);
second.num=64			//将second中的num修改
console.log(first);		//因为first和second的地址指向同一个位置，所以first的num也发生修改
console.log(second);

对象的扩展运算

对象的扩展和数组一样的，不过是把对象展开

let No={
    name: '不忘',
    faceValue:'很高',
    haveGirl(){
        console.log(this.name+'有无数妹子，因为他的颜值'+this.faceValue);
    }
}
let Nof={
    ...No, //展开
    study:'热爱'
}

console.log(Nof);

对象的解构赋值

  1. 解构的基础用法

    let No={
    name: '不忘',
    faceValue:'很高',
    haveGirl(){
        console.log(this.name+'有无数妹子，因为他的颜值'+this.faceValue);
    }
}
let {name, faceValue}=No
console.log(name);

  2. 对象赋值的简写

    let name='不忘'
let faceValue='很高'

let No={name,faceValue}
console.log(No);

  3. 多层解构

    let No={
    name: '不忘',
    faceValue:'很高',
    girlfriend:{
        first:'冰冰'
    },
    haveGirl(){
        console.log(this.name+'有无数妹子，因为他的颜值'+this.faceValue);
    }
}

let {girlfriend:{first}}=No//只解构一部分是没有问题的
console.log(first);

  4. 解构默认值

    let No={name:'不忘',faceValue:'很高'}
let {name,faceValue,girlfriend='冰冰'}=No
console.log(girlfriend);
//多用于默认参数

  5. 参数解构

    function look(name,{age,faceValue}) {
   console.log(name,age,faceValue);
}

look('不忘',{age:'18',faceValue:'很高'})

对象和原型链上的属性检测

let No= {name:'张三'};

let Nof={father:'张三爸爸'}

Object.setPrototypeOf(No,Nof)//将Nof设置为No的父级

console.log(No);
console.log(No.hasOwnProperty('father'));//检测不到原型链上的属性
console.log('father' in No);//都可以检测

计算属性

let a=1
let No={}
No[`a-${a}`]=a
console.log(No);

assign方法

let a={name:'不忘'}
let No={girlfriend:'冰冰'}

No=Object.assign(No,a)//合并两个对象
console.log(No);

对象遍历

let No={
    name: '不忘',
    faceValue:'很高',
    haveGirl(){
        console.log(this.name+'有无数妹子，因为他的颜值'+this.faceValue);
    }
}

console.log(Object.keys(No));//第一种，遍历属性名

console.log(Object.values(No));//第二种，遍历属性值

console.log(Object.entries(No));//第三种，遍历属性名和属性值

for(const key in No){
    console.log(No[key]);
}

for (const iterator of Object.keys(No)) {
    console.log(iterator);
}

for (const iterator of Object.values(No)) {
    console.log(iterator);
}

for (const [key,value] of Object.entries(No)) {
    console.log(key);
}

浅拷贝，深拷贝

浅拷贝

let No={
    name: '不忘',
    faceValue:'很高',
    haveGirl(){
        console.log(this.name+'有无数妹子，因为他的颜值'+this.faceValue);
    }
}

let Nof=Object.assign({},No)

let Nos={}
for (const key in No) {
   Nos[key]=No[key]
}

let Not={...No}


No.faceValue='高出天际'
console.log(Nof);
console.log(Nos);
console.log(Not);

深拷贝

let No={
    name: '不忘',
    faceValue:'很高',
    girlfriend:{
        name: '冰冰',
        address: '北京'
    },
    haveGirl(){
        console.log(this.name+'有无数妹子，因为他的颜值'+this.faceValue);
    }
}


function deepCopy(object) {
    let newObject={}
    for (const key in object) {
        newObject[key]= typeof object[key]==='object'?deepCopy(object[key]):object[key]
    }
    return newObject;
}

let Not=deepCopy(No)

No.girlfriend.name='黑嘉嘉'

console.log(Not);

创建对象

工厂模式创建对象

function boy(name,age){
    return {
        name,
        age,
        isDog(){
            console.log(this.name+'今年'+this.age+'岁了'+',还是单身狗');
        }
    }
}

let zhangsan=new boy('张三','20')
let lisi=new boy('李四','23')
zhangsan.isDog()
lisi.isDog()

构造函数创建对象

function boy(name,age){
        this.name=name,
        this.age=age,
        this.isDog=function(){
            console.log(this.name+'今年'+this.age+'岁了'+',还是单身狗');
    }
}

let zhangsan=new boy('张三','20')
zhangsan.isDog()

封装和抽象

function boy(name,age){
        data={name,age},
        this.isDog=function(){
            console.log(data.name+'今年'+data.age+'岁了'+',还是单身狗');
    }
}

let zhangsan=new boy('张三','20')
zhangsan.isDog()

对象的属性特征

查看属性特征

let No={
    name: '不忘',
    faceValue:'很高',
    haveGirl(){
        console.log(this.name+'有无数妹子，因为他的颜值'+this.faceValue);
    }
}

console.log(JSON.stringify(Object.getOwnPropertyDescriptor(No,'name'),null,2));
console.log(JSON.stringify(Object.getOwnPropertyDescriptors(No),null,2));

// {
//   "value": "不忘", //值
//   "writable": true,//可写入，可修改
//   "enumerable": true,//可遍历，可查询
//   "configurable": true，//可重配置，可删除
// }

设置属性特征

let No={
    name: '不忘',
    faceValue:'很高',
    haveGirl(){
        console.log(this.name+'有无数妹子，因为他的颜值'+this.faceValue);
    }
}
Object.defineProperty(No, 'name', {//设置单个
    value: '回忆',
    writable: true,
    enumerable: true,
    configurable: true

})

Object.defineProperties(No,{//设置多个
    name:{
        value: '回忆',
        writable: true,
        enumerable: true,
        configurable: true
    },
    faceValue:{
        value: '',
        writable: true,
        enumerable: true,
        configurable: true
    }
})

不允许添加属性

let No={
    name: '不忘',
    faceValue:'很高',
    haveGirl(){
        console.log(this.name+'有无数妹子，因为他的颜值'+this.faceValue);
    }
}

Object.preventExtensions(No)//禁止添加属性
Object.isExtensible(No)//是否添加属性

封闭对象：不能添加，删除，修改对象特征

let No={
    name: '不忘',
    faceValue:'很高',
    haveGirl(){
        console.log(this.name+'有无数妹子，因为他的颜值'+this.faceValue);
    }
}

Object.seal(No)//封闭对象
Object.isSealed(No)//是否封闭对象

冻结对象

let No={
    name: '不忘',
    faceValue:'很高',
    haveGirl(){
        console.log(this.name+'有无数妹子，因为他的颜值'+this.faceValue);
    }
}

Object.freeze(No)//冻结对象
Object.isFrozen(No)//是否冻结对象

访问器

基础用法

let No={
    name: '不忘',
    data:{age:20},
    faceValue:'很高',
    haveGirl(){
        console.log(this.name+'有无数妹子，因为他的颜值'+this.faceValue);
    },
    set age(value){  //数据修改时触发
        if (value>18) {
            console.log('成年了');
        } else{
           return console.log('小屁孩');
        }
       this.data.age=value
    },
    get age(){  //查寻数据是触发
      return  this.data.age
    }
}

No.age=12
console.log(No.age);

伪造属性

let No={
    name: '不忘',
    faceValue:'很高',
    haveGirl(){
        console.log(this.name+'有无数妹子，因为他的颜值'+this.faceValue);
    },
    get girlfriend(){
        return '冰冰，黑嘉嘉' 
    }
}

console.log(No.girlfriend);

​ 访问器优先级:访问器优先级更高

let No={
    name: '不忘',
    faceValue:'很高',
    girlfriend:'冰冰', 
    haveGirl(){
        console.log(this.name+'有无数妹子，因为他的颜值'+this.faceValue);
    },
    get girlfriend(){
        return '黑嘉嘉' 
    }
}

console.log(No.girlfriend);

proxy代理

基础用法

let No={
    name: '不忘',
    faceValue:'很高',
    haveGirl(){
        console.log(this.name+'有无数妹子，因为他的颜值'+this.faceValue);
    }
}
let proxy=new Proxy(No,{
    get(obj,property){
        return obj[property]
    },
    set(obj,property,value){
        obj[property]=value
    }
});

console.log(proxy.name);
proxy.name='回忆'
console.log(proxy.name);
console.log(proxy);

控制函数

function factorial(num) {
    return  num==1?1:num*factorial(num-1)
}

let proxy=new Proxy(factorial,{
    apply(func,obj,args){
        console.log(func);
        console.log(obj);
        console.log(args);
    }
});

proxy.apply({a:1},[5])

回复

我来回复

  • 暂无回复内容