深入JavaScript对象创建的细节

创建对象的种种方式
服务器君一共花费了225.832 ms进行了5次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

最近深入学习javascript后,有个体会:面向对象的方式编程才是高效灵活的编程,也是现在唯一可以让代码更加健壮的编程方式。如果我们抛开那些玄乎的抽象出类等等思想,我自己对面向对象的从写程序的角度理解就是:复用和封装。复用具体就是让你尽量少写重复代码,封装就是将一些耦合度很高的逻辑放到一个程序块里,而且尽量让里面内容不受外界影响。最后的结论是:优秀的javascript代码都是面向对象的。

如何构建javascript对象?ECMA-262对对象的定义是:无序属性的集合,其属性可以包含基本值、对象或函数。javascript的对象其实就是java里的map,即键值对。

在javascript创建一个对象一共有三种方式:

  1. 通过Object对象
  2. 通过构造函数
  3. 对象初始化

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应用不是太复杂,建议使用工厂模式构造对象,这种写法可读性很高。

2. 通过构造函数

几乎所有使用构造函数方式构建对象都会使用到new运算符,javascript里面的构造函数比较特别的,在javascript里没有类的概念,new 后面跟的直接是构造函数,大家看下面的代码:

// 使用构造函数创建对象

function Obj(id1,name1,teststring1)
{
    this.id = id1;
    this.name = name1;
    this.teststring = teststring1;
    this.sayHello = function()
    {
        console.log('id:' + this.id + '@!@name:' + this.name + '@!@teststring:' + this.teststring);
    }    
}

var obj = new Obj('003','My Name is obj3','Test Obj3');
obj.sayHello();//id:003@!@name:My Name is obj3@!@teststring:Test Obj3
obj['sayHello']();//id:003@!@name:My Name is obj3@!@teststring:Test Obj3
var str = 'sayHello';
obj[str]();//id:003@!@name:My Name is obj3@!@teststring:Test Obj3

构造函数式和工厂模式从代码角度而言很像,我在学习javascript初期,单独看一种方式,思维总是惯性的把二者混为一谈,如果两个放在一起还是觉得有差异,主要是javascript里面function被赋予的功能太多,如果在一个大型程序里面二者交替使用,不晕头才怪了。其实通过两者构造对象的不同,我可以把function的使用分为构造函数式和函数式。下面我将重点分析下两种方式,这里的见底或许不全面,要是哪位高手看到了可以补充和指点哈。

首先我去掉方法里各个属性的this指针,而sayHello里面引用的this指针不去掉。代码如下:

// 深入分析构造函数1
function Obj(id1,name1,teststring1)
{
    id = id1;
    name = name1;
    teststring = teststring1;
    sayHello = function()
    {
        console.log('id:' + this.id + '@!@name:' + this.name + '@!@teststring:' + this.teststring);
    }    
}
var obj = new Obj('004','My Name is obj4','Test Obj4');
sayHello();//id:undefined@!@name:@!@teststring:undefined
window.sayHello();//id:undefined@!@name:@!@teststring:undefined
obj.sayHello();//obj.sayHello is not a function  [在此错误处中断] obj.sayHello(); 

this永远指向obj的,而sayHello方法里的this.id等等属性的值为undefined,表明Obj的function对象没有id,name,teststring属性,就连sayHello方法在Obj里面也没有定义好,但是直接sayHello();可以找到sayHello方法,最后我们使用window.sayHello();才知道sayHello是被定义在window里面了。如是我去掉Obj里面所有this,代码如下:

// 深入分析构造函数2

function Obj(id1,name1,teststring1)
{
    id = id1;
    name = name1;
    teststring = teststring1;
    sayHello = function()
    {
        console.log('id:' + id + '@!@name:' + name + '@!@teststring:' + teststring);
    }    
}
var obj = new Obj('005','My Name is obj5','Test Obj5');
sayHello();//id:005@!@name:My Name is obj5@!@teststring:Test Obj5
window.sayHello();//id:005@!@name:My Name is obj5@!@teststring:Test Obj5
console.log(id);//005
console.log(name);//My Name is obj5
console.log(teststring);//Test Obj5
console.log(window.id);//005
console.log(window.name);//My Name is obj5
console.log(window.teststring);//Test Obj5

由上面内容我得出了下面的结论:

  1. javascript是可以做面向对象编程的,我们不能把它当做面向过程的语言;
  2. javascript里面对象的创建是特别的,特别在于它和传统的面向对象语言比较起来做了简化,简化到直接使用构造函数来创建对象;
  3. function在javascript里面既可以当做函数式使用,又可以作为构造函数的标示(你也可以直接当做类来看待),而区别构造函数式和函数式的区别就是new;
  4. 如果我们用到了构造函数式才创建对象,那么这里和其他面向对象语言一样,也是有封装的,换种说法是里面定义的属性或者方法是属于该对象的,而让其属于该对象的方式就是用this指针,否则属性和方法将属于window对象。

如果我们不用new运算符,直接使用函数,例如下面代码:

// 深入分析函数式1

function Obj(id1,name1,teststring1)
{
    this.id = id1;
    this.name = name1;
    this.teststring = teststring1;
    this.sayHello = function()
    {
        console.log('id:' + this.id + '@!@name:' + this.name + '@!@teststring:' + this.teststring);
    }    
}
Obj('006','My Name is obj6','Test Obj6');
sayHello();//id:006@!@name:My Name is obj6@!@teststring:Test Obj6
window.sayHello();//id:006@!@name:My Name is obj6@!@teststring:Test Obj6
console.log(id);//006
console.log(name);//My Name is obj6
console.log(teststring);//Test Obj6
console.log(window.id);//006
console.log(window.name);//My Name is obj6
console.log(window.teststring);//Test Obj6

直接调用function,this指针都是指向window,也就是全局对象,我以前看到过一句话:不论哪里直接调用函数,里面的this都是指向全局的。这个不论哪里直接调用函数就有学问了啊,看下面代码:

// 深入分析函数式 2

function OuterObj(id1,name1,teststring1)
{
    this.id = id1;
    this.name = name1;
    this.teststring = teststring1;
    this.sayHello = function()
    {
        console.log('id:' + this.id + '@!@name:' + this.name + '@!@teststring:' + this.teststring);
    }    
    
    function InnerObj(id2,name2,teststring2)
    {
        this.id = id2;
        this.name = name2;
        this.teststring = teststring2;
        this.sayHello = function()
        {
            console.log('id:' + this.id + '@!@name:' + this.name + '@!@teststring:' + this.teststring);
        }    
    }
    
    var innerVal = new InnerObj('101','InnerObj','Test InnerObj');//true
    console.log(innerVal instanceof InnerObj);
    innerVal.sayHello();//id:101@!@name:InnerObj@!@teststring:Test InnerObj
    
    InnerObj('102','InnerObj0','Test InnerObj0');
}

var outObj = new OuterObj('007','My Name is obj7','Test Obj7');
outObj.sayHello();//id:007@!@name:My Name is obj7@!@teststring:Test Obj7
sayHello();//
window.sayHello();//id:102@!@name:InnerObj0@!@teststring:Test InnerObj0
console.log(id);//102
console.log(name);//InnerObj0
console.log(teststring);//Test InnerObj0

由此可见只要是函数调用this指向的方法和函数都是指向window的,即全局对象。

3. 对象初始化

对象初始化方式在有些书上也叫字面量方式构建对象,但是我更喜欢对象初始化方式,这样更直观,代码如下:

// 对象初始化

var obj = {
    id:'008',
    name:'My Name is obj8',
    teststring:'Test Obj8',
    sayHello:function(){
        console.log('id:' + this.id + '@!@name:' + this.name + '@!@teststring:' + this.teststring);
    }
};
obj.sayHello();//id:008@!@name:My Name is obj8@!@teststring:Test Obj8
obj['sayHello']();//id:008@!@name:My Name is obj8@!@teststring:Test Obj8
var str = 'sayHello';
obj[str]();//id:008@!@name:My Name is obj8@!@teststring:Test Obj8

这种方式是我比较喜欢的一种构建对象的方式,有位javascript大师级的人物曾经建议构建空对象,最好是var obj = {},这句话就表明var obj = {}和var obj = new Object();是等价的。var obj = {}方式更加简洁,避免了o.id;o.name等等繁琐的写法,jQuery源码里面大量使用这样的构造对象的方式。

以上就是我熟知的三种在javascript里面构建对象的方式。下面我将要换个角度来理解javascript构建对象的知识。首先看一段java的代码:

public class Obj {
    public static String staticParams = "静态属性,它是属于类的";
    private String objId = "编号是对象私有的";
    public String objName = "名称是对象公有的";
    
    //构造函数
    public Obj(){}
}

javascript对象的属性或方法也可以使用java里的思想分为:属于类的属性和方法,属于对象的属性或方法,还有公有属性和方法以及私有属性和方法。

  1. 属于类的属性和方法:用对象初始化的方式都可以当做是属于类的属性和方法,这种定义在jQuery里面大量运用;
  2. 属于对象的属性或方法:用构造函数的方式构建对象,里面用this指针指向的属性和方法都是属于对象的;
  3. 公有属性和方法:javascript里面属性和方法天生就是公有的;
  4. 私有属性和方法:这个在javascript里面要通过模拟才能实现,这种模拟一般是使用作用域的原理,比如:在一个function内部用var来定义对象,对象作用域属于改function内部,那么在函数外部是不能访问的,这就是私有变量和方法了。

以上对象的创建,里面的属性和方法操作都是对象专有的,用相同方式构建的类似对象不能做到信息的共享,那如何才能让类似的对象能共享信息了,这就的使用prototype原型链了。

在javascript里面每个函数都有一个prototype属性,这个属性是一个指针,指向一个对象,而这个对象的用途包含可以由特定类型所有实例共享的属性和方法。

代码如下:

//原型模式

function Obj(id1,name1,teststring1)
{
    this.id = id1;
    this.name = name1;
    this.teststring = teststring1;
    this.sayHello = function()
    {
        console.log('id:' + this.id + '@!@name:' + this.name + '@!@teststring:' + this.teststring);
    }    
}

Obj.prototype.objflag = '自建的Obj对象';
Obj.prototype.proSayHello = function()
{
    console.log('Hello World and Obj');
}

var obj1 = new Obj('008','My Name is obj8','Test Obj8');
var obj2 = new Obj('009','My Name is obj9','Test Obj9');

obj1.sayHello();//id:008@!@name:My Name is obj8@!@teststring:Test Obj8
obj2.sayHello();//id:009@!@name:My Name is obj9@!@teststring:Test Obj9
obj1.proSayHello();//Hello World and Obj
obj2.proSayHello();//Hello World and Obj
console.log(obj1.objflag);//自建的Obj对象
console.log(obj2.objflag);//自建的Obj对象

prototype写起来太繁琐了,而且又不好记,一般许多实例公用的属性和方法都是固定的不容易改变了,那么我们可以用初始化对象的方式来写原生链,这个思路我是从jQuery里学到的,代码如下:

//简化的原型模式

function Obj(id1,name1,teststring1)
{
    this.id = id1;
    this.name = name1;
    this.teststring = teststring1;
    this.sayHello = function()
    {
        console.log('id:' + this.id + '@!@name:' + this.name + '@!@teststring:' + this.teststring);
    }    
}
Obj.prototype = {
    objflag:'自建的Obj对象',
    proSayHello:function(){
        console.log('Hello World and Obj');
    }
};
var obj1 = new Obj('010','My Name is obj10','Test Obj10');
var obj2 = new Obj('011','My Name is obj11','Test Obj11');

obj1.sayHello();//id:010@!@name:My Name is obj10@!@teststring:Test Obj10
obj2.sayHello();//id:011@!@name:My Name is obj11@!@teststring:Test Obj11
obj1.proSayHello();//Hello World and Obj
obj2.proSayHello();//Hello World and Obj
console.log(obj1.objflag);//自建的Obj对象
console.log(obj2.objflag);//自建的Obj对象

本文地址:http://www.nowamagic.net/librarys/veda/detail/355,欢迎访问原出处。

不打个分吗? 还木有人打分噢!

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/355

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《深入理解计算机系统(原书第2版)》 布莱恩特(Randal E.Bryant) (作者), 奥哈拉伦(David R.O'Hallaron) (作者), 龚奕利 (译者), 雷迎春 (译者)

《深入理解计算机系统》从程序员的视角详细阐述计算机系统的本质概念,并展示这些概念如何实实在在地影响应用程序的正确性、性能和实用性。全书共12章,主要内容包括信息的表示和处理、程序的机器级表示、处理器体系结构、优化程序性能、存储器层次结构、链接、异常控制流、虚拟存储器、系统级I/O、网络编程、并发编程等。书中提供子大量的例子和练习题,并给出部分答案,有助于读者加深对正文所述概念和知识的理解。

更多计算机宝库...