• js对象的深入理解(六)


    一、对象的创建(四种模式)
    1.工厂模式
    工厂模式示例:

        function createPerson(name,age){
        var obj = {
            name:name,
            age:age,
            sayName:function(){}
        };
            return obj;
        }
        var p1 = createPerson("tom",12);
        var p2 = createPerson("jerry",10);

    缺点:
    a.创建的对象都是Object类型【无法识别对象
    b.每个对象相同的方法【不存储在相同的存储空间】占据不同的内存空间【对象相同的方法重复创建内存空间,造成内存冗余】

    2.构造函数模式
    构造函数示例:

        function Person(name,age){
            this.name = name;
            this.age = age;
            this.sayName = function(){};
        }
        var p1 = new Person("tom",12);
        var p2 = new Person("jerry",10);

    new关键字的作用
    a.创建了一个新实例对象
    b.使构造方法中的this【作用域】指向该新实例对象
    c.执行构造函数中的代码
    d.返回这个新实例对象
    优点:可以识别对象
    缺点:实例对象的相同方法【不存储在相同的存储空间】在创建实例时均被重复创建【代码、内存冗余

    解决对象相同方法的创建冗余问题:
    可以在全局范围中声明一个函数,然后将引用传递给对象中的函数属性。但是这样做会导致全局函数过多,体现不了对象的封装性

    3.原型模式
    原型模式示例:

        function Person(){}
        Person.prototype.name = 'tom';
        Person.prototype.age = 12;
        Person.prototype.sayName = function(){};
    
        var p1 = new Person();
        p1.name = 'jerry';
        var p2 = new Person;
        p2.name = 'terry';

    优点:解决了对象的相同方法存储空间重复调用的问题【解决了代码、内存冗余问题
    缺点:同一类型的对象的相同属性共用原型对象中的对应属性的属性值【对象间的隔离性较差

    4.组合模式(构造函数-原型模式)【目前在ECMAScript中使用最广泛,认同度最高的一种创建自定义类型的方法
    a.在构造函数模式中定义对象自身的属性及与其他相同类型对象的不同的方法
    b.在原型模式中定义同类型对象的相同方法


    组合模式示例:

        function Person(name,age){
            this.name = name,
                this.age = age,
            this.friends = []
        }
        Person.prototype = {
            constructor : Person,
            sayName:function(){}
        }
        var p1 = new Person("terry",11);
        var p2 = new Person("larry",12);
        p1.friends.push("tom");
        p2.friends.push("jack");
        onsole.log(p1);     //["tom"]
        console.log(p2);     //["jack"]

    优点:可以识别对象,也解决了对象的相同方法存储空间重复调用的问题【解决了代码、内存冗余问题】,隔离性较差问题也不存在


    二、对象的属性类型
    1、对象属性的特性【configurable、enumerable、writable、value
    [[Configurable]]:【默认为true】
    a.是否可以使用delete删除该属性值
    b.是否可以修改相应属性的特性

    [[Enumerable]]:【默认为true】
    是否可以通过for-in循环遍历该属性。【是否可枚举

    [[Writable]]: 【默认为true】
    是否可以修改相应属性的值。

    [[Value]]: 【默认为true】
    设置相应属性的数据值 name:jacky
    要修改属性默认的特性,必须使用ECMAScript5的Object.defineProperty()方法

    访问器属性:【可以隐藏真实属性的数据,利用其对应的访问器属性对外公开展示。即:我们看到的可能不是真正的属性值
    访问器属性不包含数据值,包含一对setter,getter方法。
    [[Get]] 在获取属性时调用的函数,默认为undefined
    [[Set]] 在写入属性时调用的函数,默认为undefined

    修改单个属性特性值需要使用下面方法:
    defineProperty(属性所在的对象,属性的名字,一个描述符对象);
    当configurable:false 时,不能修改该属性特性的特性值

    2.对属性特性的相关操作方法【使用下面方法定义的属性其configurable特性值一般为false
    a、Object.defineProperty(属性对应的对象,属性的名字,一个描述符对象)【定义单个属性

    eg:

        var obj = {
            name:'tom',
            age:21
        };
        Object.defineProperties(obj,'name'{
            writable:false  //obj对象中的name属性不可修改
        });
        obj.name = 'jerry';  //这条语句无效,name属性的writable特性值为false不可修改

    b、Object.defineProperties(属性对应的对象,所需要定义的多个属性的描述对象)【定义多个属性
    eg:

        var obj = {
            name:'tom',
            _age:21
        };
        Object.defineProperties(book,{
            _age:{//数据属性
                value:22,
                configurable:false  //_age属性不能delete,不能重新定义该属性
            },
    
            age:{//访问器属性
                get:function(){
                    return this._age-2
                },
                set:function(age){
                    this._age = age
                }
            }
        });
        console.log(obj.age);  //20                    

    c、Object.getOwnPrototypeDescriptor(属性对应的对象,属性的名字)【读取属性的特性信息

        var descriptor = Object.getOwnPropertyDescriptor(obj,"_age");
        console.log(descriptor.value); //22
        console.log(descriptor.configurable) //false
  • 相关阅读:
    加法图灵机
    Experiment 1
    进制转换
    快速排序
    辗转相除、线段交点、多角形面积公式
    JS如何优雅监听容器高度变化
    解决react和其他框架之间的交互问题
    MacBook Pro触控板手势
    代理 请求登录失效(显示未登录)问题
    Web端 长按事件
  • 原文地址:https://www.cnblogs.com/nzcblogs/p/11197289.html
Copyright © 2020-2023  润新知