前端笔记三(js创建对象)

一、字面量形式
    var person ={
         name: "小米",
         say: function(){
            alert(this.name);
         }
     };
二、new Object()
    var person = new Object()
    person.name = "小米"

ps: 以上两种方法在使用同一接口创建多个对象时,会产生大量重复代码,为了解决此问题,工厂模式被开发。


三、工厂模式
    function createPerson(name) {
      var o = new Object();
      o.name = name;
      o.say = function(){
        alert(this.name);
      }
      return o;
  }
  var person1 =  createPerson("小米")

ps: 工厂模式解决了重复实例化多个对象的问题,但没有解决对象识别的问题(因为里面全是object)。


四、构造函数模式
    function Person(name,age,family) {
      this.name = name;
      this.say = function(){
        alert(this.name);
      }
    }
    var person1 = new Person("小米"]);

ps:

  • 既解决重复实例化问题,又解决对象识别问题,
  • 你会发现this.say一直在做一件事情就是打印this.name,每一次new都重复执行this.say方法,所以造成资源浪费,由此产生原型模式,。

五、原型模式
   function Person() {}

   Person.prototype.name = "小米";
   Person.prototype.say = function(){
      alert(this.name);
   };
   var person1 = new Person();

ps: 原型模式的好处是所有对象实例共享它的属性和方法(即所谓的共有属性,也不浪费资源。


六、混和模式
    function Person(name) {
        this.name = name
    }
    Person.prototype = {
      constructor: Person,
      say: function(){
        alert(this.name);
      }
    };
    var person1 = new Person("小米");

ps: 混合模式共享着对相同方法的引用,又保证了每个实例有自己的私有属性。最大限度的节省了内存。而且很语义化,代码也很高雅。
constructor具体说明参考前端笔记一(proto,prototype,constructor)


七、动态原型模式
    function Person(name,age,job){
      this.name=name;
      if(typeof this.sayName!="function"){
        Person.prototype.sayName=function(){
            alert(this.name);
        };
      }
    }
    var person1 = new Person("小米");

ps: 这里只有sayName()不存在的情况下,才会将它添加到原型中,这段代码只会在初次调用构造函数时才执行。这里对原型所做的修改,能够立刻在所有实例中得到反映,解决构造函数的资源浪费问题。


还有Object.create()、寄生构造函数模式、稳妥构造函数模式,后续会抽一篇文章,单独讲一下,确实比较难理解。


上一篇:前端笔记二(new与Object.create区别)
下一篇:暂无

你可能感兴趣的:(前端笔记三(js创建对象))