• Javascript 创建对象方法的总结


      最近看了一下《Javascript高级程序设计(第三版)》,这本书很多人都推荐,我也再次郑重推荐一下。看过之后总得总结一下吧,于是我选了这么一个主题分享给大家。

      使用Javascript创建对象的方法有很多,现在就来列举一下:

      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();

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

    写了这么多创建对象的方法,其实真正推荐用的也就是方法6和方法7。当然在真正开发中要根据实际需要进行选择,也许创建的对象根本不需要方法,也就没必要一定要选择它们了。

  • 相关阅读:
    文本内容超长显示省略号,鼠标移上自动显示全部内容(适用于EasyUI DataGrid)
    Spring注入静态变量的方法,以及CXF如何获取客户端IP
    Agile PLM 表结构说明
    session_start() failed: .......No space left on device问题解决
    如何配置sublime xdebug进行远程调试
    宝塔面板for linux
    Ubuntu 16.04下ssh启用root登录
    mysql- Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock'
    表单重复提交、大并发库存超卖?面试官提出了一个老生常谈的问题,让我陷入了沉思...
    ubuntu16.04 wordpress建站教程
  • 原文地址:https://www.cnblogs.com/wangjq/p/3755691.html
Copyright © 2020-2023  润新知