zoukankan      html  css  js  c++  java
  • js创建对象的方法

    1. 使用Object构造函数来创建一个对象,下面代码创建了一个person对象,并用两种方式打印出了Name的属性值。

        var person = new Object();
        person.name="kevin";
        person.age=31;
        alert(person.name);
        alert(person["name"])

      2. 使用对象字面量创建一个对象;不要奇怪person["5"],这里是合法的;另外使用这种加括号的方式字段之间是可以有空格的如person["my age"].

    复制代码
        var person = 
        {
            name:"Kevin",
            age:31,
            5:"Test"
        };
        alert(person.name);
        alert(person["5"]);
    复制代码

      3. 使用工厂模式创建对象,返回带有属性和方法的person对象。

    复制代码
    function createPerson(name, age,job)
    {
        var o = new Object();
        o.name=name;
        o.age=31;
        o.sayName=function()
        {
            alert(this.name);
        };
        return o;
    }
    createPerson("kevin",31,"se").sayName();
    复制代码

      4. 使用自定义构造函数模式创建对象;这里注意命名规范,作为构造函数的函数首字母要大写,以区别其它函数。这种方式有个缺陷是sayName这个方法,它的每个实例都是指向不同的函数实例,而不是同一个。

    复制代码
    function Person(name,age,job)
    {
        this.name=name;
        this.age=age;
        this.job=job;
        this.sayName=function()
        {
            alert(this.name);
        };
    }
    
    var person = new Person("kevin",31,"SE");
    person.sayName();
    复制代码

      5. 使用原型模式创建对象;解决了方法4中提到的缺陷,使不同的对象的函数(如sayFriends)指向了同一个函数。但它本身也有缺陷,就是实例共享了引用类型friends,从下面的代码执行结果可以看到,两个实例的friends的值是一样的,这可能不是我们所期望的。

    复制代码
    function Person()
    {
    
    }
    
    Person.prototype = {
        constructor : Person,
        name:"kevin",
        age:31,
        job:"SE",
        friends:["Jams","Martin"],
        sayFriends:function()
        {
            alert(this.friends);
        }
    };
    var person1 = new Person();
    person1.friends.push("Joe");
    person1.sayFriends();//Jams,Martin,Joe
    var person2 = new Person(); 
    person2.sayFriends();//James,Martin,Joe
    复制代码

      6. 组合使用原型模式和构造函数创建对象,解决了方法5中提到的缺陷,而且这也是使用最广泛、认同度最高的创建对象的方法。

    复制代码
    function Person(name,age,job)
    {
        this.name=name;
        this.age=age;
        this.job=job;
       this.friends=["Jams","Martin"]; } Person.prototype.sayFriends=function() { alert(this.friends); }; var person1 = new Person("kevin",31,"SE");
    var person2 = new Person("Tom",30,"SE");
    person1.friends.push("Joe"); person1.sayFriends();//Jams,Martin,Joe
    person2.sayFriends();//Jams,Martin
    复制代码

     7. 动态原型模式;这个模式的好处在于看起来更像传统的面向对象编程,具有更好的封装性,因为在构造函数里完成了对原型创建。这也是一个推荐的创建对象的方法。

    复制代码
    function Person(name,age,job)
    {
        //属性
        this.name=name;
        this.age=age;
        this.job=job;
        this.friends=["Jams","Martin"];
        //方法
        if(typeof this.sayName !="function")
        {
            Person.prototype.sayName=function()
            {
                alert(this.name);
            };
            
            Person.prototype.sayFriends=function()
            {
                alert(this.friends);
            };
        }
    }
    
    var person = new Person("kevin",31,"SE");
    person.sayName();
    person.sayFriends();
    复制代码

    另外还有两个创建对象的方法,寄生构造函数模式和稳妥构造函数模式。由于这两个函数不是特别常用,这里就不给出具体代码了。

  • 相关阅读:
    Vue.js(2.x)之计算属性
    Vue.js(2.x)之插值
    Chrome 打不开任意网页以及设置、扩展程序等页面解决方法
    IDEA 查看某个class的maven引用依赖&如何展示Diagram Elements
    mysql事务隔离分析
    IDEA call Hierarchy 双击跳转源码后绿色选中背景不消失问题
    记一次RocketMQ源码导入IDEA过程
    springboot+mybatis多数据源
    http调用之RestTemplate
    BlockingQueue的几个实现分析
  • 原文地址:https://www.cnblogs.com/taoxujuan/p/6021084.html
Copyright © 2011-2022 走看看