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

    javascript是一种“基于prototype的面向对象语言“,与java有非常大的区别,无法通过类来创建对象。那么,既然是面象对象的,如何来创建对象呢?

    一、通过”字面量“方式创建。

    方法:将成员信息写到{}中,并赋值给一个变量,此时这个变量就是一个对象。
    例如:
    var person = (name:'dongjc', work:function() {console.log('write coding')});  

    如果{}中为空,则将创建一个空对象:

    var person = {} //创建空对象 
    

      

    演示代码:
    <script type="text/javascript">
    var person = {
        name: "dongjc",
        age: 32,
        Introduce: function () { alert("My name is " + this.name + ".I'm " + this.age); }
    };
    person.Introduce();  
    </script>
    

      

     我们还可以给对象丰富成员信息。
      对象.成员名称 = 值;
      对象[成员名称] = 值;
    也可以获取对象的成员信息。
      对象.成员名称;
      对象[成员名称];
    <script type="text/javascript">
        var person = {
        name: "dongjc",
        age: 32,
        Introduce: function () { alert("My name is " + this.name + ".I'm " + this.age); }
    };
    person.worker = 'coding'; //丰富成员信息
    </script>
    

      

    二、使用工厂模式创建对象

    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('Nike',29,'teacher');
    var person2 = createPerson('Arvin',20,'student');
    

      在使用工厂模式创建对象的时候,我们都可以注意到,在createPerson函数中,返回的是一个对象。那么我们就无法判断返回的对象究竟是一个什么样的类型。于是就出现了第三种创建对象的模式。

    三、通过”构造函数“方式创建。

     方法:

     var obj = new 函数名(); 

     这与通过类创建对象有本质的区别。通过该方法创建对象时,会自动执行该函数。这点类似于php通过创建对像时,会自动调用构造函数,因此该方法称为通过"构造函数“方式创建对象。

    <script type="text/javascript">
    function Person() {
        this.name = "dongjc";    //通过this关键字设置默认成员
        var worker = 'coding';    //没有this关键字,对象创建后,该变量为非成员
        this.age = 32;
        this.Introduce = function () {
            alert("My name is " + this.name + ".I'm " + this.age);
        };
        alert("My name is " + this.name + ".I'm " + this.age);
    };
    var person = new Person();
    person.Introduce();
    </script>
    

      

    此代码一共会两次跳出对话框,原因在于创建对象是自动执行了该函数。

    注意:this关键字的使用。这里的this与php中话法意思类似,指调用该函数的对象,这里指的是person。

    对比工厂模式,我们可以发现以下区别:

    1.没有显示地创建对象

    2.直接将属性和方法赋给了this对象

    3.没有return语句

    4.终于可以识别的对象的类型。对于检测对象类型,我们应该使用instanceof操作符,我们来进行自主检测:

    1
    2
    3
    4
    alert(person1 instanceof Object);//ture
    alert(person1 instanceof Person);//ture
    alert(person2 instanceof Object);//ture
    alert(person2 instanceof Object);//ture

    同时我们也应该明白,按照惯例,构造函数始终要应该以一个大写字母开头,而非构造函数则应该以一个小写字母开头。

    那么构造函数确实挺好用的,但是它也有它的缺点:

    就是每个方法都要在每个实例上重新创建一遍,方法指的就是我们在对象里面定义的函数。如果方法的数量很多,就会占用很多不必要的内存。于是出现了第五种创建对象的方法

    四、通过object方式创建。

    方法:先通过object构造器new一个对象,再往里丰富成员信息。

     var obj = new Object(); 

    实例代码:

    <script type="text/javascript">
    var person = new Object();
    person.name = "dongjc";
    person.age = 32;
    person.Introduce = function () {
            alert("My name is " + this.name + ".I'm " + this.age);
        };
    person.Introduce();
    </script>

    五、使用工厂模式创建对象

    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('Nike',29,'teacher');
    var person2 = createPerson('Arvin',20,'student');
    

      在使用工厂模式创建对象的时候,我们都可以注意到,在createPerson函数中,返回的是一个对象。那么我们就无法判断返回的对象究竟是一个什么样的类型。于是就出现了第五种创建对象的模式。

    第六种:原型创建对象模式

    function Person(){}
    Person.prototype.name = 'Nike';
    Person.prototype.age = 20;
    Person.prototype.jbo = 'teacher';
    Person.prototype.sayName = function(){
     alert(this.name);
    };
    var person1 = new Person();
    person1.sayName();
    

      

    使用原型创建对象的方式,可以让所有对象实例共享它所包含的属性和方法。

    如果是使用原型创建对象模式,请看下面代码:

    function Person(){}
    Person.prototype.name = 'Nike';
    Person.prototype.age = 20;
    Person.prototype.jbo = 'teacher';
    Person.prototype.sayName = function(){
     alert(this.name);
    };
    var person1 = new Person();
    var person2 = new Person();
    person1.name ='Greg';
    alert(person1.name); //'Greg' --来自实例
    alert(person2.name); //'Nike' --来自原型
    

      

    当为对象实例添加一个属性时,这个属性就会屏蔽原型对象中保存的同名属性。

    这时候我们就可以使用构造函数模式与原型模式结合的方式,构造函数模式用于定义实例属性,而原型模式用于定义方法和共享的属性

    第七种:组合使用构造函数模式和原型模式

    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('Nike',20,'teacher');
    

      

  • 相关阅读:
    poj 3252 Round Numbers 数位DP
    HDU5840 Problem This world need more Zhu 分块 树剖
    有向图强连通分量
    CodeForces
    Gym-100814K 数位DP 模拟除法
    洛谷P3455 [POI2007]ZAP-Queries
    洛谷P2257 YY的GCD
    洛谷P3327 [SDOI2015]约数个数和(莫比乌斯反演)
    莫比乌斯反演
    小知识点
  • 原文地址:https://www.cnblogs.com/Im-Victor/p/9431498.html
Copyright © 2011-2022 走看看