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

    工厂模式:
    初级开发者可能会这样定义对象:

    var obj = new Object(); 
    obj.name = "hero"; 
    obj.showName=function (){alert(this.name);} 

    这里存在一个问题就是如果我们要在多个地方用obj对象,可能在程序中类似的代码要写好多遍,于是产生了工厂方法 

    function createObj() 
    { 
    var obj = new Object(); 
    obj.name="hero"; 
    obj.showName=function (){alert(this.name);} 
    return obj; 
    } 
    var obj1 = createObj(); 
    var obj2 = createObj(); 

    和另外一种方法 构造函数法 

    function obj (name) 
    { 
    this.name=name; 
    this.showName= function (){alert(this.name);} 
    } 

    把生成对象的代码封装起来,避免出现重复new的代码,当然也可以进一步改进,就是createObj传递一些参数,而不是给obj赋默认固定值: 

    function createObj(name) 
    { 
    var obj = new Object(); 
    obj.name=name; 
    obj.showName=function (){alert(this.name);} 
    return obj; 
    } 
    var obj1 = createObj("hero"); 
    var o'b'j2=createObj("dby"); 

    但是存在一个问题,就是我们每次调用createObj函数都会创建新的函数 showName.意味着每个对象都有自己版本的showName,所以要改进避开这个问题. 

    function showName() 
    { 
    alert(this.name) 
    } 
    function createObj(name) 
    { 
    var obj = new Object(); 
    obj.name=name; 
    obj.showName=showName; 
    return obj; 
    } 

    这样就解决了 重复创建函数的问题, 哈哈哈,大功告成 . 

    原型方式:
    主要是利用对象的prototype属性.

    function obj() 
    {} 
    obj.prototype.name="hero"; 
    obj.prototype.showName=function() 
    { 
    alert(this.name); 
    } 

    看起来似乎比刚才的工厂还完美,但是 有一个问题,该函数没有构造函数,属性是通过prototype指定的,这一点在实际应用中很让人头疼,所有的实例的属性都一样实在是不能让人接受.尤其还存在一个安全隐患,那就是当对象中有引用时,例如 加上这样一段 

    obj.prototype.nameArray = new Array("hero","dby");
    然后
    obj1 = new obj();
    obj2 = new obj();
    obj1.nameArray.push("lxw");
    在obj2的nameArray中将也会看到这个属性,因为两个对象的nameArray指向的是同一个引用.
    所以这种方式并不是理想方法.
    需要 改进
    结合构造函数,在构造函数定义属性,用原型定义方法
    例如

    fuction obj(name) 
    { 
    this.name = name 
    this.nameArray = new Array("hero","dby"); 
    } 
    obj.prototype.showName = function(){alert(this.name)} 

    所有的非函数属性都在构造函数里创建,函数属性用prototype方式创建,obj1 中改变nameArray的值,不会影响到obj2对象的nameArray的值, 而且只有一个showName函数,所以没有内存浪费. 

    基本上完美了,剩下的基本都是一下其他的修饰了.有兴趣的可以自己改着玩玩.
    笔者在这里加上一个单例 玩了一下:

    function obj (name) 
    { 
    this.name = name; 
    this.nameArray=new Array("hero","dby"); 
    if(typeof obj._initialized=='undefined') 
    { 
    obj.prototype.showName=function(){alert(this.name);} 
    obj._initialized="true"; 
    } 
    } 

    其实不算是单例, 只不过是在构造对象的时候,先判断一个属性是否被定义,如果没有定义,那么用原型方法继续定义对象,如果已经定义了属性,那么就不在重复定义函数了. 该prototype方法只被创建一次,病赋值一次. 

    又差不多完美了,大功告成 .
    这是个人的理解,,希望对大家有帮助,不完善的地方请qq联系,及时改正。
    这是一个完整的实例:

    function Rectangle(name,color,width,heigth){ 
    this.name=name; 
    this.color=color; 
    this.width=width; 
    this.heigth=heigth; 
    } 
    Rectangle.prototype.area=function(){ 
    return this.width*this.heigth 
    } 
    Rectangle.prototype.show=function(){ 
    document.write(this.name+" "+this.color+" "+this.width+" "+this.heigth+"<br/>"); 
    document.write(this.area()); 
    } 
    var obj1= new Rectangle("Rectangle","red",15,20); 
    obj1.show(); 
  • 相关阅读:
    《国富论》
    DataGridView
    《ASP.NET Core 3框架揭秘》
    看见
    英语常用词汇
    《未选择的路》
    Redis实战(20)Redis 如何从海量数据中查询出某一个 Key?
    .NET 程序集Assembly使用
    ExtJs基础知识总结:自定义弹窗和ComboBox自动联想加载(四)
    ExtJs基础知识总结:Dom、IFrame和TreePanel、TabPanel(三)
  • 原文地址:https://www.cnblogs.com/mophy/p/6126803.html
Copyright © 2011-2022 走看看