zoukankan      html  css  js  c++  java
  • 前端开发JS——对象与原型

    27、创建对象
    ①工厂模式批量创建对象  缺点:无法对象识别,即所有对象都是Object类型;方法内存空间浪费/封装不太完善
    function sayName(){    //可以有效节省内存空间
      console.log(this.name);
    }
    function createObject(name, age, gender){
    var obj = {
    name:name,
    age:age,
    gender:gender,
    sayName: sayName,    //将方法写在外面,可以有效节省内存空间
    };
    return obj;    //或者直接返回对象
    }
     
    var o1 = createObject('zhangsan', 12, 'man');
    var o2 = createObject('lisi', 15, 'woman');
    var dog = createObject('erha', 4, 'man');
    console.log(o1, o2, dog);
    //通过实例找构造函数
    console.log(o1.constructor);     //Object
     
    ②构造函数模式创建对象 
    自定义构造函数     问题:方法内存空间浪费/封装不太完善
              
    function sayName(){    //可以有效节省内存空间
      console.log(this.name);
    }
    function Person(name, age, gender){
    //this指向new关键字创建的实例
    this.name = name;
    this.age = age;
    this.gender = gender;
    sayName: sayName,    //将方法写在外面,可以有效节省内存空间
    }
    var p1 = new Person("terry",11,"man");
    console.log(p1)
    console.log(p1.constructor);    //[Function: Person]
     
    function Dog(name, age, color){
    //this指向new关键字创建的实例
    this.name = name;
    this.age = age;
    this.color= color;
    sayName: sayName,    //将方法写在外面,可以有效节省内存空间
    }
    var d1 = new Dog("erha",2,"red");
    console.log(d1)
    console.log(d1.constructor);   //[Function: Dog]
     
    ③原型模式创建对象 
    问题: 实例的数据隔离不安全,因为里面的数据共享
    function Person(){}
    Person.prototype.name = 'zhangsan';
    Person.prototype.friends = [];
    Person.prototype.sayName = function(){
      console.log(this.name);
    };
    var p1 = new Person();
    consoe.log(p1.name);    //zhangsan
    var p2 = new Person();
    consoe.log(p1.name);    //zhangsan
    p1.friends.push('terry');
    console.log(p1.friends);  //['terry']
    console.log(p2.friends);  //['terry']
    console.log(p1.sayName === p2.sayName);   //true
     
    ④组合使用构造函数模式和原型模式 
    //每个实例自有的放到构造函数中,实例共享的放到原型对象中
    function Person(name, age, gender){
    //this指向new关键字创建的实例
    this.name = name;
    this.age = age;
    this.gender = gender;
    this.friends = [];
    }
    Person.prototype = {    //实例共享的数据
    constructor : Person,
    sayName:function(){
      alert(this.name);
           }
    }
     
    var p1 = new Person("terry",11,"man");
    console.log(p1);
    console.log(p1.constructor);   //{Function: Person]
    var p2 = new Person("larry",11,"woman");
    p1.friends.push('hello');
    console.log(p1.friends);   //['hello']
    console.log(p2.friends);   //[]
     
    console.log(Person('aaaa'))   //undefined, 因为this指针需要指向new关键字,这里只有Person,没有new,所以它没有返回对象,返回的是undefined
     
    28、对象深入了解
              ①可枚举性:
                        在打印一个对象,所能看到的属性,这些属性的可枚举性都是true;
                        for-in循环返回的属性,这些属性的可枚举性也都是true。
     
              ②对象的属性类型:
    [[Configurable]]: 表示是否通过delete删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问 器属性直接定义在对象中,默认为true)
     
    [[Enumerable]]: 表示能否通过for-in循环返回属性。(直接定义在对象中,默认为true)
     
    [[Wriable]]: 表示能否修改属性的值。(直接定义在对象中,默认为true)
     
    [[Value]]: 包含这个属性的数据值 name:jacky
     
              ③对象的属性特性
    var obj = {
      name:'zhangsan',
      age:12,
    };
    console.log(obj); //{name:'zhangsan', age: 12,}
     
    读取属性的特性 Object.getOwnPropertyDescriptor();获取指定属性的描述符该方法接受两个参数, 第一个为属性所在的对象,第二个为要读取其描述符的属性名称
     
    //获取属性的描述信息
    console.log(Object.getOwnPropertyDescriptor(obj, 'name'));   //{vale: 'zhangsan', writerable:true, enumerable:true, configurable: true}
     
    要修改属性默认的特性,必须使用ECMAScript5的Object.defineProperty()方法 defineProperty(属性所在的对象,属性的名字,一个描述符对象);
     
    //修改属性的描述信息
    Object.defineProperty(obj, 'name', {
    //设置属性不可枚举
    enumerable: false,   ------->console.log(obj);   //{age:12}
    //设置属性不可修改
    writable:false,             -------->obj.name = 'lisi'; console.log(obj.name); //zhangsan
    //设置属性值
    value:'terry',              --------->console.log(obj.name);     //terry
    //设置属性是否可以删除delete,是否可以重新定义,是否可以配置
    configurable:false,         --------->别人就不能改变这个属性
    })
     
    ④访问器属性      没有值,有get方法和set方法, configurable的属性默认为false
    var obj = {
      name:'zhangsan',
      age:12,
      _weight:100,
    };
    Object.defineProperty(obj, 'weight', {
      get:function(){
        return this._weight-5;
      },
      set:function(param){
        this._weight = param
      },
      //enumerable:true,
    });
    /*Object.defineProperty(obj, '_weight', {
      enumerable:false
    });*/
    console.log(obj.weight);   //95
    obj.weight = 130
    console.log(obj.weight);   //125
    console.log(obj._weight);   //130
    console.log(obj);  //   {name:'zhangsan', age: 12, weight: [Getter|Setter]}
                        console.log(Object.getOwnPropertyDescript(obj, 'weight'));
    console.log(Object.getOwnPropertyDescript(obj, '_weight'));
  • 相关阅读:
    Interface Collector
    Package java.util.stream
    Java环境变量配置&解决版本不一致问题 (转)
    数据库事务
    svn:重新设置客户端账户密码
    Mybatis:使用bean传值,当传入值为Null时,提示“无效的列类型”的解决办法
    Spring:在普通Java类中获取由Spring所管理的Bean
    在Eclipse中导入dtd和xsd文件,使XML自动提示(转)
    linux 如何显示一个文件的某几行
    软件质量特征 ISO9126
  • 原文地址:https://www.cnblogs.com/aitiknowledge/p/11571455.html
Copyright © 2011-2022 走看看