JavaScript 对象初探
因为一条小龙之前都是学 C#、Java 等,规范严谨的语言起身的,所以说起使用 JavaScript 这种松散定义的弱型别语言,就有点痛苦,因为它的变数定义实在太弹性了,还不用事先宣告,常常程式码看到一半,你会搞不清楚,这个变数的型态到底是什么、使用范围、他现在的值是多少,这些都会加重后续维护上的成本。
下面会针对JS 关于对象的使用部分做一个初步的探讨,读者看完应该就能对 JS 的对象有个初步的概念,关于 JS 的对象现在大家使用最广的应该就算是 JSON 了,但是初学者可能用半天还没发现 JSON 是一个对象,还误以为是一个阵列,但是说到 JS 的阵列,其实他也是一个对象,所以能像对象一般来操作,只是他拥有阵列特性。
JS 对象,大概是 JS 所有变数里面为一需要先宣告才能使用的一种了,目前一条小龙所知对象的宣告方式 有下面两种,而阵列也能用对象的方式来操作,所以在这也算一种
var arr = []; var arr = new Array(); var obj = {}; var obj = new Object;
而对象的使用方式,更是千变万化,而令人头痛 @@,头痛的原因是,你要看别人的 code 就会非常痛苦,尤其是有些人喜欢用高深莫测的语法来写的 code,这些人大概认为写到别人看不懂,那他就是比较厉害的那个吧....
但这些都会加深维护成本,如果读者之前有看一条小龙的文章就知道,一条小龙是非常强调规范性的,尽量要让后面的开发人员都维持在一个统一各规范中来开发。
下面就来看一下,一些常见的对象操作方式
第一种对象初始化的方式是一开始就宣告,对象内容,这个常见的就是在使用 JSON 上了吧,其中读者要注意的是,对象属性,只能用字串来定义。
JS 对象比较特别的是,他可以像类似阵列的方式操作对象,如 obj["a"],所以很多人就真的把它当作阵列来操作了,尤其是 JSON 的操作上,是最常见的。
var obj = { "a": 1, "b": 2 }; alert(obj.a + obj.b); alert(obj["a"] + obj["b"]); alert(obj[0] + obj[1]);
上述ans 都是 3,但是最后一个是错的写法,读者可以 再想想,如何达到这个目的。
第二种方式,就是JS 中常见的是后宣告,这是方式是 最 powerful,也是最恐怖的方式,因为后续开发者,在哪突然宣告了一个属性、函数等,那就像一个不定时炸弹一样等着爆炸@@
var obj = new Object; obj[0] = "1"; obj.t = "2"; obj.o.t = "3"; obj.show = function () { alert(this.t); alert(this["t"]); alert(this[0]); alert(obj.o.t); }; obj.show();
读者看到了吗?这种看似乱起八糟的写法,全部 all pass,而且读者注意看,还能发现 JS 可以允许对象里面在定义对象,真是太可怕了,在多定义几层下去,写的人都会搞不清楚 this 是指哪一个了吧 @@
当然 最可怕的不只这个,一般开发人员使用对象,应该都是先定义对象型别,在去初始化出来使用,定义型别的方式,就是用 JS 最常见的 function,天阿,读者知道厉害了吧,function 不只是单纯定义 函数而已,也可以拿来当作对象型别定义,也可以把自己当成对象传出去来进行操作...所以一条小龙前面才会说 JS 对象的使用方式,是千变万化的,实在太自由了。
下面是一个简单的宣告对象以及对应的使用范例
var car1 = new Car("black", 2); alert(car1.color + "," + car1.doors); function Car(sColor, iDoors) { this.color = sColor; this.doors = iDoors; };
看到了吗,function 可以直接拿来当对象型别来操作了,而且既使你已经定义对象型别,一但初始化,你也可以在像上述的对象操作方式一样,动态增加属性、对象、函数...等,所以说 JS 是非常非常自由的语言。
当然 动态增加的缺点就是,下次 在初始化时,就不会有这些动态增加的属性、对象、函数...等了,所以为了解决这个缺点(这是缺点吗??) JS 有一个方法叫做 prototype ,可以动态增加定义型别,这也是一个非常强、非常恐怖的功能,开发人员可以想到就给你重新定义一下型别,添加一些新功能,所以在定义型别时,要小心点定义哪些是public 哪些是 private 的,才不会让后面用的人,莫名其妙挂点都不知道为什么。
但是有时我们在使用第三方控件,为了增加既有功能,这时 prototype 就是一个很方便且必要的功能了,真是一把双面刃...
下面就来看一下 prototype 的基本用
Car.prototype.showInfo2 = function () { alert(this.color + "," + this.doors + "," + this.year); }; var car1 = new Car("black", 2); car1.year = 1990; car1.showInfo2(); car1.showInfo(); function Car(sColor, iDoors) { this.color = sColor; this.doors = iDoors; this.showInfo = function () { alert(year); } };
这段 code 中,读者可注意一下 year 这个变数的使用范围,仅局限于外部动态生成的函数才能使用,原型别定义的函数是不能使用的。
介绍到这,也差不多把 JS 常见的对象操作都介绍完了,虽然一条小龙文中抱怨很多 JS 的问题,但不可否认目前 JS 是网页开发中,不可或缺的重要技术,所以各位读者,还是要用力去学习、了解,然后在使用时,不要图方便,想到就动态加一下的,要尽量把定义、给值等,都集中在一起,利己利人,如此也才能方便后面的维护。