zoukankan      html  css  js  c++  java
  • 转载:javascript中定义兑现改的5种方式

    本文转载自: http://www.phpfuns.com/scripts/javascript/five-method-define-javascript-object.shtml

    JavaScript中定义对象的5种方式(JavaScript中没有类的概念,只有对象)

    i)基于已有对象扩充其属性和方法

    var object = new Object();
    object.name = "zhangsan"; // 添加name属性
    object.sayName = function(name){//添加sayName方法
        this.name = name;
        alert(this.name);
    };
    object.sayName("kyle");//调用sayName方法,name属性被修改为kyle,浏览器将打印kyle

    最简单的一种方式,使用起来并不方便,适合于临时需要一个对象。

     

    ii)工厂方式创建对象

    不带参数的工厂方法:

    //工厂方法
    function createObject(){
        var object = new Object();        //创建一个对象
        object.name = "zhangsan";        //为该对象添加一个name属性
        object.password = "123";        //为该对象添加一个password属性
        object.get = function(){        //为该对象添加一个get方法
            alert(this.name+","+this.password);
        };
        return object;    //返回该对象
    }
    var object1 = createObject();        //调用createObject工厂方法创建对象object1
    var object2 = createObject();        //调用createObject工厂方法创建对象object2
    object1.get();                        //调用对象get方法
    object2.get();                        //调用对象get方法

    带参数的工厂方法:

    function createObject(name, password) {
        var object = new Object();
        object.name = name;
        object.password = password;
        object.get = function() {
            alert(this.name + "," + this.password);
        };
        return object;
    }
    var object1 = createObject("zhangsan", "123");
    var object2 = createObject("lisi", "456");
    object1.get();
    object2.get();

    上面两种不带参数和带参数的工厂方法缺点:

    每创建一个对象,内存中就创建一个get方法,比较浪费内存,且影响性能。而我们的期望是,创建两个不同的对象,它们的属性是不一样的,但方法是共用的。所以接下来我们需要改进createObject工厂方法。

    改进的工厂方法:

    // 把get()放在外面实现共用
    function get() {
        alert(this.name + "," + this.password);
    }
    function createObject(name, password) { var object = new Object(); object.name = name; object.password = password; object.get = get; return object; } var object1 = createObject("zhangsan", "123"); var object2 = createObject("lisi", "456"); object1.get(); object2.get();

    将get方法定义在createObject函数外面,这样每创建一个对象,get方法都是共用的。让一个函数对象被多个对象所共享,而不是每一个对象都拥有一个函数对象。

    iii)构造函数方式创建对象

    不带参数的构造函数

    function Person(){
        //在执行第一行代码前,js引擎会为我们生成一个对象
        this.name = "zhangsan";
        this.password = "123";
        this.getInfo = function(){
            alert(this.name+","+this.password);
        };
        //此处有一个隐含的return语句,用于将之前生成的对象返回(也是跟工厂方式不一样的地方)
    }
    var p1 = new Person(); 
    p1.getInfo();

    带参数的构造函数

    function Person(name, password) {
        this.name = name;
        this.password = password;
        this.getInfo = function() {
            alert(this.name + "," + this.password);
        };
    }
    var p1 = new Person("zhangsan", "123");
    var p2 = new Person("lisi", "456");
    p1.getInfo();
    p2.getInfo();

    iv)原型(prototype)方式创建对象

    prototype是Object对象里面的一个属性,

    function Person() {
    }
    Person.prototype.name = "zhangsan";
    Person.prototype.password = "123";
    Person.prototype.getInfo = function() {
        alert(this.name + "," + this.password);
    };
    var p1 = new Person();
    var p2 = new Person();
    p1.name = "kyle";// 对象生成之后再去改变属性 p1.getInfo(); p2.getInfo();

    单纯地使用原型方式有两个问题:第一,你无法在构造函数中为属性赋初值,只能在对象生成之后再去改变属性值。

    function Person() {
    }
    Person.prototype.name = new Array();
    Person.prototype.password = "123";
    Person.prototype.getInfo = function() {
        alert(this.name + "," + this.password);
    };
    var p1 = new Person();
    var p2 = new Person();
    p1.name.push("zhangsan");
    p1.name.push("lisi");
    p1.password = "456";
    p1.getInfo();
    p2.getInfo();

    浏览器将会打印:zhangsan,lisi,456和zhangsan,lisi,123.

    如果使用原型方式创建对象,那么生成的所有对象会共享原型中的属性,这样一个对象改变了该属性也会反应到其他对象当中。所以单纯地使用原型方式是不行的,还需要结合其他方式。接下来我们会继续介绍。

    使用原型+构造函数方式来定义对象

    function Person() {
        this.name = new Array();
        this.password = "123";
    }
    Person.prototype.getInfo = function() {
        alert(this.name + "," + this.password);
    };
    var p1 = new Person();
    var p2 = new Person();
    p1.name.push("zhangsan");
    p2.name.push("lisi");
    p1.getInfo();
    p2.getInfo();

    使用原型+构造函数方式来定义对象,对象之间的属性互不干扰,各个对象间共享同一个方法,这是一种比较好的方式。

    v)动态原型方式

    function Person() {
        this.name = "zhangsan";
        this.password = "123";
        if (typeof Person.flag == "undefined") {
            alert("invoked");
            Person.prototype.getInfo = function() {
                alert(this.name + "," + this.password);
            };
            Person.flag = true;
        }
    }
    var p1 = new Person();
    var p2 = new Person();
    p1.getInfo();
    p2.getInfo();

    在动态原型方式中,在构造函数中通过标志量让所有对象共享一个方法,而每个对象拥有自己的属性。上面代码在第一次创建对象时,首先通过一个判断语 句,看flag属性是否已经定义,若没有定义,则通过原型方式添加getInfo方法,然后将flag设置为true,那么当第二次创建对象时,if语句 判断为假,跳过执行。这样就达到了我们所期望的结果,创建的对象属性是互不干扰的,而对象的方法是共享的。

     

     

     

     

     

     

     

     

  • 相关阅读:
    一步一步教你使用Jmail实现邮件的接收与发送
    超级简单:使用FOR XML AUTO控制XML输出
    WF4.0工作流设计器快捷键
    糟糕编程的白痴指南
    WPF:全文翻译小工具
    获取为以逗号分隔列值的字符串
    WF 4.0 RC 学习资源
    这个杀手不太冷
    《Expert Cube Development with Microsoft SQL Server 2008 Analysis Services》读书笔记第九章:保护Cube(二)
    windows server 2008下无法检查到无线信号的解决方法
  • 原文地址:https://www.cnblogs.com/zjfazc/p/2721384.html
Copyright © 2011-2022 走看看