javascript笔记:深入分析javascript里对象的创建(上)

来源:网络 责任编辑:栏目编辑 发表时间:2013-07-01 10:44 点击:

读jQuery源码时候,我常想到底那些因素会让我读不懂代码,其中最关键的是哪个,最早觉得是jQuery的架构设计,当我查阅资料终于找到jQuery架构设计的入口时候,我发现javascript基础语法的熟练运用才是读源码的关键,因此现在把javascript基础知识系统回顾下很有必要,而且jQuery源码的研究就是对javascript基础知识的加深和灵活运用,我想后面临摹jQuery将和我对javascript基础知识的学习穿插起来,这样一定会对各种疑难问题有更好的解答。
  最近深入学习javascript后,有个体会:面向对象的方式编程才是高效灵活的编程,也是现在唯一可以让代码更加健壮的编程方式。如果我们抛开那些玄乎的抽象出类等等思想,我自己对面向对象的从写程序的角度理解就是:复用和封装。复用具体就是让你尽量少写重复代码,封装就是将一些耦合度很高的逻辑放到一个程序块里,而且尽量让里面内容不受外界影响。最后的结论是:优秀的javascript代码都是面向对象的。
  今天要讲的是如何构建javascript对象。
  ECMA-262对对象的定义是:无序属性的集合,其属性可以包含基本值、对象或函数。javascript的对象其实就是java里的map,即键值对。
  在javascript创建一个对象一共有三种方式:
  方式一:通过Object对象
  方式二:通过构造函数
  方式三:对象初始化
  1.通过Object对象来构建对象,代码如下:
//直接使用Object创建对象

var obj = new Object();
obj.id = '001';
obj.name = 'My name is obj';
obj.teststring = 'Test obj';
obj.sayHello = function()
{
    console.log('id:' + this.id + '@!@name:' + this.name + '@!@teststring:' + this.teststring);
}

obj.sayHello();//id:001@!@name:My name is obj@!@teststring:Test obj
obj['sayHello']();//id:001@!@name:My name is obj@!@teststring:Test obj
var str = 'sayHello';
obj[str]();//id:001@!@name:My name is obj@!@teststring:Test obj
  (注意:我这里使用了两种访问对象属性的方式,一种是点运算符,一种是方括号运算符,二者是等价的,但是方括号运算似乎要更强大些,方括号里面我们可以放置变量)
  这是最常用,最直观的一种创建对象方法,但是它的缺点太明显了,就是代码复用度很低,我们想到一个对象就创建一个对象,如是就会造成大量的重复代码,因此,javascript程序员将工厂模式引入到了javascrip编程里,请大家看下面的代码:
// 用工厂模式创建对象

function createObj(id,name,teststring)
{
    var o = new Object();
    o.id = id;
    o.name = name;
    o.teststring = teststring;
    o.sayHello = function()
    {
        console.log('id:' + this.id + '@!@name:' + this.name + '@!@teststring:' + this.teststring);
    }
    return o;
}
var obj = createObj('002','My Name is obj2','Test Obj2');
obj.sayHello();//id:002@!@name:My Name is obj2@!@teststring:Test Obj2
obj['sayHello']();//id:002@!@name:My Name is obj2@!@teststring:Test Obj2
var str = 'sayHello';
obj[str]();//id:002@!@name:My Name is obj2@!@teststring:Test Obj2
  工厂模式解决了创建相似对象的问题,如果抛开它构造对象的对象识别问题,工厂模式挺完美的,如果你做的javascript应用不是太复杂,建议使用工厂模式构造对象,这种写法可读性很高。(写到工程模式,我在临摹jQuery里面有段注解似乎不太正确,这个以后要修正)。
2.通过构造函数
  在我前面的博文《javascript笔记:javascript前世续篇(从javascript起源谈下它的继承) 》里面我从javascript的起源里谈到了javascript面向对象的一些设计思想,其中就有关于javascript构造函数的设计。几乎所有使用构造函数方式构建对象都会使用到new运算符,javascript里面的构造函数比较特别的,在javascript里没有类的概念,new 后面跟的直接是构造函数,大家看下面的代码:
// 使用构造函数创建对象

function Obj(id1,name1,teststring1)
{
    this.id = id1;
    this.name = name1;
    this.teststring = teststring1;
    this.sayHello = function()
&nbs

    发表评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    用户名: 验证码:点击我更换图片
    最新评论 更多>>

    推荐热点

    • Gb2312转utf-8编码的方法(vbs+js)
    • 如何使用Ajax技术开发Web应用程序(1)
    • js跳转路径问题
    • JavaScript模仿桌面窗口
    • 用js检测两个线段是否相交
    • 我知道的JavaScript -- 设计模式(桥接)应用之 – 验证器
    • 运用JavaScript构建你的第一个Metro式应用程序(on Windows
    • 我是如何去了解jquery的(六),案例之幻灯片轮换
    • Jquery封装幻灯片效果
    网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
    Copyright © 2008-2015 计算机技术学习交流网. 版权所有

    豫ICP备11007008号-1