JS_对象进阶

如果你自以为会对象深拷贝的话，快来看看这篇对象进阶的文章吧~~~

1.创建对象

  • 对象创建的三种方式

    1. var obj = new Object();
    2. var obj = {}；
    3. var obj = Object.create();
    • var obj1 = Object.create(obj);

    把obj作为原型，创建obj1对象，obj上面有什么内容,obj1就有

    var obj = {a : 1};
var obj1 = Object.create(obj);
var obj2 = Object.create(obj1);
obj1.a = 10;
obj2.a = 100;
console.log(obj.a, obj1.a, obj2.a);//1 10 100
console.log(obj, obj1, obj2);
    img1.jpg

  • 对比两种创建方式

    如果对象没有对象属性，则获取离他最近的一层的原型链属性；

    如果有对象属性.直接返回对象属性

    应当直接设置对象属性(实例属性)，不能直接设置原型链属性

    var obj = {a : 1};
var obj1 = Object.create(obj);
obj.a = 10;
console.log(obj1.a);  //10
console.log(obj === obj1.__proto__);//true

  • __proto__

    var arr = [1, 2, 3, 4];
console.log(arr.__proto__);
arr.__proto__.slice1 = function () {
    console.log("aaa");
}
var arr1 = [4, 5, 6];
console.log(arr1.__proto__);
//在arr的原型上添加了slice方法，arr1也能访问到

2.复制对象

  • Object.assign

    用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

    第一个参数是要复制到的目标对象，后面参数均为源对象

  • 同名属性的替换

    const target = { a: { b: 'c', d: 'e' } }
const source = { a: { b: 'hello' } }
Object.assign(target, source);
// { a: { b: 'hello' } }

  • 只能浅复制,属性的引用对象会仍旧是引用关系

    var obj3 = {};
var obj4 = obj3;
obj3 = Object.assign(obj3, obj);
console.log(obj3 === obj4);   //true

  • 不可枚举属性不能复制

    var obj = {a : 1};
var obj1 = Object.create(obj);
obj1.a = 100;
console.log(obj1);
var obj2 = Object.assign({}, obj);
console.log(obj2);
    obj1.jpg
    obj2.jpg

  • 浅拷贝对象

    1. 遍历所有的内容
      for (var prop in obj) {

    ​ }

    1. 可以复制多个
      Object.assign({}, obj);

    2. 只能复制一个（没有引用关系）
      var obj1 = JSON.parse(JSON.stringify(obj));

    3. 覆盖原对象的引用地址

      var obj3 = { e: 20 };

      var obj4 = obj3;

      obj3 = { ...obj };

      console.log(obj3 === obj4); //false

3.定义属性和获取属性

  • Object.defineProperty

    在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

    var obj = {};
Object.defineProperty(obj,"a",{
    configurable:false, //不可删除,不可修改描述对象
    writable:false, //只读，不可修改
    enumerable:false,//设置为不可枚举，不能用for in枚举，但可以继承
    value:10
})
    • 如果没有设置configurable，enumerable，writeable时，默认为false
    var obj = {};
Object.defineProperty( obj , "a" , {
  value:20;       
}
for (var attr in obj) {
  console.log(attr);
}
// 属性 a 不可枚举 ;  不能被for in 循环遍历出来;
obj.a = 10;
// 属性 a 只读     ;  不能被赋值 (赋值无效);
delete obj.a;
// 属性 a 不可被删除 ;
    • 当设置set || get时，不能定义value和writable属性
    var obj = {};
Object.defineProperty(obj,"b",{
    configurable : false,
    enumerable : false,
    set : function(value){
        this._a = value;
    },
    get:function(){
        return this._a;
    }
})
    • 向对象中添加length属性
    var obj = {
      a : 1,
      b : 2,
      c : 3,
      d : 4
}
Object.defineProperty(obj,"length",{
      get : function(){
            var length = 0;
            for(var attr in this){
                  length ++;
            }
            // console.log(this);// 指向当前的对象;
            return length ; 
      },
      set : function(val){
      // console.log("这是set拦截器打印的内容",val);
         if(val === 0){
                for(var attr in this){
                    delete this[attr];
                }
         }
      }
})
console.log(obj.length);  //4

  • Object.getOwnPropertyNames

    返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组

    var obj = {};

Object.defineProperties(obj, {
    a: {
        enumerable: false,
        value: 10,
        configurable: true,
        writable: true
    },
    b: {
        configurable: true,
        value: 100
    }
})

var names = Object.getOwnPropertyNames(obj);
console.log(names);// ["a", "b"]

for (var i = 0; i < names.length; i++) {
    console.log(names[i],obj[names[i]]);
}
// a 10
// b 100

  • getOwnPropertyDescriptor遍历描述对象

    返回指定对象上一个自有属性对应的属性描述

    （自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性）

    var obj = {};

Object.defineProperties(obj, {
    a: {
        enumerable: false,
        value: 10,
        configurable: true,
        writable: true
    },
    b: {
        configurable: true,
        value: 100
    }
})
for (var i = 0; i < names.length; i++) {
    console.log(Object.getOwnPropertyDescriptor(obj,names[i]));
}
//{value: 10, writable: true, enumerable: false, configurable: true}
//{value: 100, writable: false, enumerable: false, configurable: true}

4.对象深复制

  • 版本1

    class Box {
    static ARG = ["a", "b"];
    constructor(a, b) {
        this.a = a;
        this.b = b;
    }
    play() {
        console.log(this.a + this.b);
    }
}

var obj = {
    a: 1,
    b: "a",
    c: false,
    d: {
        e: undefined,
        f: null,
        g: [1, 2, 3, 4, 5],
        h: new Date(),
        i: /^[a-z]{2,4}$/gi,
        j: new Box(4, 5),
        k: {
        }
    }
}

Object.defineProperties(obj.d.k, {
    l: { value: 10 },
    m: {
        configurable: true,
        writable: true,
        value: 20
    },
    n: {
        enumerable: true,
        value: function () {
            console.log("aaaa");
        }
    },
    o: {
        value: new Image()
    }
})

function cloneObject(target, source) {
    var names = Object.getOwnPropertyNames(source);
    for (let i = 0; i < names.length; i++) {
        var desc = Object.getOwnPropertyDescriptor(source, names[i]);
        if (typeof desc.value === "object" && desc.value !== null) {
            var obj;
            if (desc.value instanceof HTMLElement) {
                obj = document.createElement(desc.value.nodeName);
            } else {
                switch (desc.value.constructor) {
                    case Box:
                        obj = new desc.value.constructor(desc.value[Box.ARG[0]], desc.value[Box.ARG[1]]);
                        break;
                    case RegExp:
                        obj = new desc.value.constructor(desc.value.source, desc.value.flags);
                        break;
                    default:
                        obj = new desc.value.constructor();
                }
            }

            cloneObject(obj, desc.value);
            Object.defineProperty(target, names[i], {
                value: obj,
                enumerable: desc.enumerable,
                writable: desc.writable,
                configurable: desc.configurable
            })
        } else {
            Object.defineProperty(target, names[i], desc);

        }
    }

    return target;
}

var obj1 = cloneObject({}, obj);
obj.d.k.m = 100;
console.log(obj1);

  • <u>版本二（由于篇幅过长，后续介绍）</u>

5.对象方法

  • freeze()

    冻结一个对象。

    一个被冻结的对象再也不能被修改；

    冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。

    此外，冻结一个对象后该对象的原型也不能被修改。

    const obj={a:1,b:2}; //适用于做配置静态属性

    Object.freeze(obj);

    const obj = { a: 1, b: 2 };
Object.freeze(obj);
obj.a = 2; //debugger; 断点
delete obj.a;
console.log(obj);
//{a: 1, b: 2}

  • in判断是否为对象属性或者原型属性

    var obj = { a: 1, b: 2 };
Object.defineProperty(obj, "c", {
    value: 10
})
var obj1 = Object.create(obj);

console.log("c" in obj1);//true

  • hasOwnProperty判断是否为对象属性，不能判断原型属性

    var obj = { a: 1, b: 2 };
var obj1 = Object.create(obj);

console.log(obj.hasOwnProperty("a"));//true
console.log(obj1.hasOwnProperty("a"));//false

  • isPrototypeOf 判断obj是否为obj1的原型链

    var obj = { a: 1, b: 2 };
var obj1 = Object.create(obj);
console.log(obj.isPrototypeOf(obj1));//true

  • typeof返回操作数的类型

    number string boolean undefined object function symbol

    console.log(typeof 42); // "number"
console.log(typeof 'blubber');// "string"
console.log(typeof true); //  "boolean"

  • instanceof 判断该对象的原型链上是否有这个类型

    var arr = [1, 2, 3];
class Box extends Array {
    constructor() {
        super();
    }
}
let b = new Box();
console.log(arr instanceof Array);//true
console.log(arr instanceof Object);//true

console.log(b instanceof Object);//true
console.log(b instanceof Array);//true
console.log(b instanceof Box);//true

  • constructor 判断该对象的抽象类

    class Box extends Array {
    constructor() {
        super();
    }
}
let b = new Box();
console.log(b.constructor===Box);//true

  • propertyIsEnumerable 判断对象下某个属性是否可以枚举

    var obj = { a: 1, b: 2 };
Object.defineProperty(obj, "c", {
    value: 10
})
var obj1 = Object.create(obj);
console.log(obj.propertyIsEnumerable("b"));//true
console.log(obj1.propertyIsEnumerable("b"));//false

6.预习案例

使以下语句为true

(obj.a === 1 && obj.a === 2 && obj.a === 3)

  • 方法一
var n = 1;
var obj = {
    a:n;
}
Object.defineProperty(obj, "a", {
    get: function() {
        return n++;
    }
})
console.log(obj.a === 1 && obj.a === 2 && obj.a === 3);
  • 方法二
{
    $data: {
        a: 1
    }
}

Object.defineProperty(obj, "a", {
    get: function () {
        return this.$data.a++;
    }
})
console.log(obj.a === 1 && obj.a === 2 && obj.a === 3);

关于set 和 get的知识点，请戳这里

本文为博主原创文章，转载请附上原文出处链接

share.jpg
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,922评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,591评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,546评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,467评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,553评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,580评论 1赞 293
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,588评论 3赞 414
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,334评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,780评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,092评论 2赞 330
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,270评论 1赞 344
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,925评论 5赞 338
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,573评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,194评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,437评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,154评论 2赞 366
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,127评论 2赞 352