zoukankan      html  css  js  c++  java
  • javascript定义对象的几种简单方法

    引用

    Aaron 的 javascript定义对象写法(整理)

    javascript定义对象的几种简单方法

    1.构造函数方式,全部属性及对象的方法都放在构造方法里面定义

    优点:动态的传递参数

    缺点:每创建一个对象就会创建相同的方法函数对象,占用大量内存

    function User1(name, password) {
    this.name = name;
    this.password = password;
    this.login = function(name,password){
    if(this.name == name && this.password == password) {
    return true;
    }else {
    return false;
    }
    };
    }

    2.原型方式,将对象属性及方法定义都写在对象的prototype里面

    优点:每次创建对象时都是使用相同prototype中的方法,不会占用重复的内存

    缺点:无法动态传递构造参数

    function User2() {

    }
    User2.prototype.name = "prototype name";
    User2.prototype.password = "prototype password";
    User2.prototype.login = function(name,password){
    if(this.name == name && this.password == password) {
    return true;
    } else {
    return false;
    }
    };
    原型方式的另一种写法:
    格式:
    var 对象名 = {};
        对象名.prototype.变量1=变量1的值;
        对象名.prototype.变量2=变量2的值;
        ……;
        对象名.prototype.函数1= function() {
           函数体
        };
        对象名.prototype.函数2= function() {
           函数体
        };
        ……;
    说明:
    (1)       初始对象体内可以不定义任何东西;
    (2)       在要定义的变量前加“对象名.prototype.”的格式;
    (3)       对象的内容与值以等号分隔,成对出现;
    (4)       包含的变量或者函数之间以分号分隔,也可以省去分号。
    (5)       函数需要写在function(){}的大括号之内。
    例子:
    var data = {};
       data.prototype. name ="Vicky”;
        data.prototype. age =20;
        data.prototype. eat = function() {
           alert(‘I wanna eat meat’);
        };
        data.prototype. sleep= function() {
           alert(‘I wanna sleep’);

    };

    3.构造及原型混合方式,将属性定义写在构造方式里面,方法写在prototype里面

    优点:综合了construct及prototype方式的优点,可以动态传递构造参数,并且方法函数对象也只创建一个

    缺点:函数写在对象外面,不太符合面向对象的思想

    function User3(name,password) {
    this.name = name;
    this.password = password;
    }
    User3.prototype.login = function(name,password) {
    if(this.name == name && this.password == password) {
    return true;
    } else {
    return false;
    }
    };

    4.动态原型方式:加一个判断属性,来判断该对象是否已经被创建过,如果被创建过,则方法就不在构建

    优点:将原型函数写在对象定义里面

    缺点:不支持继承

    function User4(name,password) {
    this.name = name;
    this.password = password;
    if(typeof User4.__initialized == "undefined") {
    User4.prototype.login = function(name,password){
    if(this.name == name && this.password == password) {
    return true;
    } else {
    return false;
    }
    };
    User4.__initialized = true;
    }
    }

    5、JSON方式/对象直接量

    格式:
    var 对象名 = {
                 变量1: 变量1的值,
                 变量1: 变量1的值,
                 ……,
                函数1: function() {
                    函数体
                },
                函数2: function() {
                    函数体
                }//Note:最后的逗号要去除为了和IE兼容。
    };
    说明:
    (1)       大括号内直接填写变量或者函数;
    (2)       对象的内容与值以冒号分隔,成对出现;
    (3)       包含的变量或者函数之间以逗号分隔;
    (4)       函数需要写在function(){}的大括号之内。
    例子:
    var  对象名 = {
           name:    “Vicky”,
           age:     26,
           eat: function() {
                  alert(‘I wanna  eat meat’);
           },
           sleep: function() {
                  alert(‘I wanna sleep’);
            }
    };
    注释:类似的方式也叫做匿名类
    匿名类举例:     

        index: '//', 
        reg: new RegExp('^//.*$'), 
        css: "comment" 
    }
    上面的方式创建了类,只是没赋给一个变量而已。

    6、create方式

    该方式利用了Prototype JavaScript组件库。
    格式:
           var 对象名 = Class.create();
           Object.extend(对象名.prototype, {
                变量1: 变量1的值,
                变量1: 变量1的值,
                 ……,
                函数1: function() {
                         函数体
                    },
                函数2: function() {
                         函数体
                },
    ……
    });
    说明:
    (1)       对象的创建使用了Prototype库中的Class.create()函数;
    (2)       对象的内容使用Prototype库中的Object.extend()函数来扩展;
    (3)       被扩展的对象在传入Object.extend函数时一定要带上prototype,
    (4)       扩展内容被大括号包含,其内与JSON方式的定义格式完全相同。
    例子:
           var data = Class.create();
           Object.extend(dta.prototype, {
           name: "Vicky",
           age: 20,
           eat: function() {
                  alert(‘I wanna eat meat’);
           },
           sleep: function() {
                  alert(‘I wanna sleep’);
           }
           });

          其实,JS对象的定义还有其它的方式,你也可以用上面几种进行组合定义,这显出了JS作为动态语言的自由性。
    JS对象的创建正规方法如下:
    var d1 = new Data();
           JS对象变量的引用方式有两种:
    (1)       点号方式引用,如,data.name。
    (2)       数组方式引用,如,data[‘name’]。

    比较简单的一种方式

    var HistoryNew=function(){};

    HistoryNew.prototype={

     setHistory:function(cityShort){alert(cityShort);

    }

    };

    var Animal = Class.create();
    Animal.prototype = {
    	initialize: function(name, sound) {
    		this.name = name;
    		this.sound = sound;
    	},
    	speak: function() {
    		alert(name + " says: " + sound + "!");
    	}
    };
    
    var snake = new Animal("Ringneck", "hissssssssss");
    snake.speak();
    // -> 提示:"Ringneck says: hissssssssss!"
    var Dog = Class.create();
    Dog.prototype = Object.extend(new Animal(), {
    	initialize: function(name) {
    		this.name = name;
    		this.sound = "woof";
    	}
    }); 
    
    var fido = new Dog("Fido");
    fido.speak();
    // -> 提示:"Fido says: woof!" 
    一个简单的类

    function clsUser(){};
    clsUser.prototype={
    name:"",
    pwd:"",
    }
    var objUser=new clsUser();
    objUser.name="a";
    alert(objUser.name);

    var objB=new clsUser();
    objB.name="b";
    alert(objB.name);

    <script type="text/javascript">
    function MyClass(name){           
        
    this._name = name;  //在函数体内初始化属性
    }

    MyClass.prototype 
    = {      //在prototype上定义属性和方法
        _name: null,
        showName: 
    function(){
            alert(
    this._name);
        }

    }

    var m = new MyClass("fanrong");
    m.showName();
    </script>

  • 相关阅读:
    shell 知识点
    folder,source folder,package 区别
    meta viewport 理解
    一张图看懂JavaScript中数组的迭代方法:forEach、map、filter、reduce、every、some
    java 报错及解决
    Charles :mac上的手机代理
    关联本地文件夹到github项目
    tomcat 安装
    Refused to display '[url]' in a frame because it set 'X-Frame-Options' to 'Deny'.
    linux 知识点
  • 原文地址:https://www.cnblogs.com/zhangji/p/1967167.html
Copyright © 2011-2022 走看看