zoukankan      html  css  js  c++  java
  • javascript对象的几种创建方式整理

    1.工厂模式

    //工厂模式虽然解决了创建多个相似对象的问题,但却没有解决对象识别的问题(即怎样知道一个对象的类型)。

    function createPerson(name,age,job){
      var o = new Object();
      o.name = name;
      o.age = age;
      o.job = job;
      o.sayName = function(){
        alert(this.name);
      };
      return o;
    }
    var person1 = createPerson('suga',29,'singer');
    var person2 = createPerson('bts',20,'singer');
    person1.sayName();
    person2.sayName();

    2.构造函数模式

    function Person(name,age,job){
      this.name = name;
      this.age = age;
      this.job = job;
      this.sayName = function(){
        alert(this.name);
      };
    }
    var person1 = Person('suga',29,'singer');
    var person2 = Person('bts',20,'singer');

     与工厂模式相比,具有以下特点:

    1. 没有显式创建对象;
    2. 直接将属性和方法赋给了this对象;
    3. 没有return语句;
    4. 要创建新实例,必须使用new操作符;(否则属性和方法将会被添加到window对象)
    5. 可以使用instanceof操作符检测对象类型

      构造函数的问题:

      构造函数内部的方法会被重复创建,不同实例内的同名函数是不相等的。可通过将方法移到构造函数外部解决这一问题,但面临新问题:封装性不好。

    3.原型模式

    function Person(){}
    Person.prototype.name = "suga";
    Person.prototype.age = 29;
    Person.prototype.job = "singer";
    Person.prototype.sayName = function() {
      alert(this.name);
    }

    var person1=new Person();
    var person2=new Person();
    person1.name="果果";
    alert(person1.name); --来自实例
    alert(person2.name); --来自原型
    当为对象实例添加一个属性时,这个属性就会屏蔽原型对象中保存的同名属性。

    4.混合构造函数和原型模式

    function Person(name,age,job){
      this.name =name;
      this.age = age;
      this.job = job;
    }
    Person.prototype = {
      constructor:Person,
      sayName: function(){
        alert(this.name);
      }
    }
    var person1 = new Person('suga',25,'singer');
    console.log(person1);

    5.动态原型模式

    把所有信息都封装在构造函数中。只有在getInfo()方法不存在的情况下,才会将它添加到原型中。原型的这段代码只会在初次调用构造函数时才会执行。

    function Person(name,age) {
      this.name=name;
      this.age=age;
      if(typeof this.getInfo != "function") {
        Person.prototype.getInfo = function () {
          console.log(this.name+"是"+this.age+"的");
        };
      }
    }
    var bts = new Person("suga",["1","23"]);
    console.log(bts);

    6.寄生构造函数

    function Person(name,age) {
      var o = {};
      o.name = name;
      o.age = age;
      o.getInfo = function () {
      console.log(this.name+"是"+this.age);
    }
    return o;
    }
    var bts = new Person("suga",["11","23"]);
    console.log(bts);

    7.稳妥构造函数模式

    function Person(name,age,gender){
      var obj = new Object();
      obj.sayName = function(){
      alert(name);
    };
    return obj;
    }
    var person = Person("suga",25,"male"); // 这里没有使用new操作符
    person.sayName();n
    alert(person instanceof Person); // false

  • 相关阅读:
    探索c#之Async、Await剖析
    探索C#之布隆过滤器(Bloom filter)
    探索C#之虚拟桶分片
    刷新本地的DNS缓存数据
    php取整函数ceil,floor,round,intval函数的区别
    这样顶级人生规划 ,想不成功都难
    全篇干货,10分钟带你读透《参与感》
    iOS审核秘籍】提审资源检查大法
    php如何遍历多维的stdClass Object 对象,php的转换成数组的函数只能转换外面一丛数组
    RDS MySQL 连接数满情况的处理
  • 原文地址:https://www.cnblogs.com/suga/p/8525475.html
Copyright © 2011-2022 走看看