javascript object oriented 面向對象編程初步
更新時間:2007年01月10日 00:00:00 作者:
用 new Object() 來創(chuàng)建對象
在javascript里有幾種創(chuàng)建對象的方法,在不同的場合可用不同的方法.最簡單的就是用 new 操作符,例如:
我們在這個例子里定義了person這個對象,然后加入了它的屬性和方法.在這個例子里,自定義的方法里有兩個屬性.
用文字記號Literal Notation創(chuàng)建對象
用文字記號也可以創(chuàng)建對象,但要javascript 1.2以上版本.它的創(chuàng)建形式是多樣的.
文字記號可是是數(shù)組,也可以是任意的javascript表達式或值.
用 new 操作符或文字記號創(chuàng)建一個自定義對象都是簡單的,也是符合邏輯的.但它最大的缺點就是結果不可復用.也不能很容易的用不同的版本初始化創(chuàng)建對象.例如上面 的第一個例子,如果 person 的 name 不是 "Tim Scarfe",那樣我們不得不重新定義整個對象,僅僅為了適應它的一點點改變.
對象的構造和原型
在OOP的世界里,用先前的方法定義對象在許多場合都有限制.我們需要一種創(chuàng)建對象的方法,類型可以被多次使用而不用重新定義.對象在實例化時每次都可以按需分配不同的值.實現(xiàn)這個目標的標準方法是用對象構造器函數(shù).
一個對象構造器只不過是個有規(guī)則的javascript函數(shù),它就象一個容器(定義參數(shù),調(diào)用其他函數(shù)等等).它們兩者所不同的是構造器函數(shù)是由 new 操作符調(diào)用的.(你將在下面的例子中看到).基于函數(shù)語法形式的對象定義,我們可以使它工作得最好.
讓我們用現(xiàn)實世界中的貓來舉個例子.貓的 name 和 color 是貓的屬性.meeyow(貓叫)是它的一個方法.重要的是任何不同的貓都可能有不同的 name 和 meeyow 的叫聲.為了建立適應這些特征的對象類,我們將使用對象構造器.
在這里,函數(shù) cat() 是一個對象構造器,它的屬性和方法在函數(shù)體里用this來定義,用對象構造器定義的對象用 new 來實例化.主意我們?nèi)绾畏浅H菀椎亩x多個cat 的實例.每一個都有自己的名字,這就是對象構造器帶給我們的靈活性.
構造器建立了對象的藍圖.并不是對象本身.
在原型里增加方法.
在上面我們看到的例子里,對象的方法是在構造器里定義好的了.另外一種實現(xiàn)的途徑是通過原型(prototype).xxx
原型是javascript繼承的一種形式.我們可以為對象定義好后,再創(chuàng)造一個方法.原來所有對象的實例都將共享.
讓我們來擴展最初的 cat 對象.增加一個改名的方法.用 prototype 的方式.
就象你所看到的.我們僅只用了 關鍵字 prototype 實現(xiàn)了在對象定義后馬上增加了changeName方法.這個方法被所有的實例共享.
用原型(prototype) 重載 javascript 對象
原型 在自定義對象和有選擇性的重載對象上都可以工作.比如 Date() 或 String 這可能是無止境的.
子類和超類
在JAVA 和C++里,有關于類層次的外在概念.每一個類能有一個角色.
In Java and C++, there is an explicit concept of the class hierarchy. i.e. Every class can have a super class from which it inherits properties and methods. Any class can be extended, or sub-classed so the resulting subclass can inherit its parent's behavior. As we have seen, javascript supports prototype inheritance instead of class based. It's possible for inheritance to happen other ways, however.
The following is an example of inheritance through functions.
下面一個例子演示了如何繼承通過function .
基于繼承的原型是遙遠的.為 javascript 應用程序在許多場合.
(基于原型的繼承在許多javascript的應用場合是非常有用的.)
對象作為聯(lián)合數(shù)組
正如你所知, (.)操作符能夠用來存儲.[] 操作符用來操作數(shù)組.
<script language="javascript" type="text/javascript">
<!--
// These are the same
object.property
object["property"]
//-->
</script>
<SCRIPT LANGUAGE="javascript">
<!--
function Circle (xPoint, yPoint, radius) {
this.x = xPoint;
this.y = yPoint;
this.r = radius;
}
var aCircle = new Circle(5, 11, 99);
alert(aCircle.x);
alert(aCircle["x"]);
//-->
</SCRIPT>
How do I loop through properties in an object?
You need to use a for/in loop.
我們可以通過for in循環(huán)來遍歷對象的屬性。
<script language="javascript" type="text/javascript">
<!--
var testObj = {
prop1 : "hello",
prop2 : "hello2",
prop3 : new Array("hello",1,2)
}
for(x in testObj) alert( x + "-" + testObj[ x ] )
//-->
</script>
<SCRIPT LANGUAGE="javascript">
<!--
var Circle = { x : 0, y : 1, radius: 2 } // another example
for(p in Circle)
alert( p + "-" + Circle[ p ] )
//-->
</SCRIPT>
The important thing to notice is that in the object syntax the property is an identifier, whereas in the array syntax, it's a string. The obvious benefits of using an array syntax to access an object is because of the literal data type, you can easily concat strings and play around with them to access an object. For this to work with the standard syntax, an eval() would need to be used.
應該值得注意的是對象的屬性只是一個標識字符,盡管在一個數(shù)組里是一個字符串,因為是一個literal的數(shù)據(jù)類型,所以有利于使用數(shù)組的方式的操作一個對象。你也可以很容易的存取一個對象在標準的語句中。這個時候eval()函數(shù)可能用得到。
<script language="javascript" type="text/javascript">
<!--
testObj = {
prop1 : "hello",
prop2 : "hello2",
prop3 : new Array("helloa",1,2)
}
for(x in testObj) alert( x + "-" + testObj[ x ] )
var prop3 = testObj["prop3"];
alert(prop3);
//alert(prop[1]);
alert(typeof(prop3));
alert(eval(prop3)[1]);
alert(typeof(eval(prop3)[1]));
//-->
</script>
網(wǎng)上的東西錯誤的太多了,jb51.net修正后的測試下
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
在javascript里有幾種創(chuàng)建對象的方法,在不同的場合可用不同的方法.最簡單的就是用 new 操作符,例如:
復制代碼 代碼如下:
<script language="javascript" type="text/javascript">
<!--
person = new Object()
person.name = "Tim Scarfe"
person.height = "6Ft"
person.run = function() {
this.state = "running"
this.speed = "4ms^-1"
}
//-->
</script>
<!--
person = new Object()
person.name = "Tim Scarfe"
person.height = "6Ft"
person.run = function() {
this.state = "running"
this.speed = "4ms^-1"
}
//-->
</script>
我們在這個例子里定義了person這個對象,然后加入了它的屬性和方法.在這個例子里,自定義的方法里有兩個屬性.
用文字記號Literal Notation創(chuàng)建對象
用文字記號也可以創(chuàng)建對象,但要javascript 1.2以上版本.它的創(chuàng)建形式是多樣的.
復制代碼 代碼如下:
<script language="javascript" type="text/javascript">
<!--
// Object Literals
timObject = {
property1 : "Hello",
property2 : "MmmMMm",
property3 : ["mmm", 2, 3, 6, "kkk"],
method1 : function(){alert("Method had been called" + this.property1)}
};
timObject.method1();
alert(timObject.property3[2]) // will yield 3
var circle = { x : 0, y : 0, radius: 2 } // another example
// nesting is no problem.
var rectangle = {
upperLeft : { x : 2, y : 2 },
lowerRight : { x : 4, y : 4}
}
alert(rectangle.upperLeft.x) // will yield 2
//-->
</script>
<!--
// Object Literals
timObject = {
property1 : "Hello",
property2 : "MmmMMm",
property3 : ["mmm", 2, 3, 6, "kkk"],
method1 : function(){alert("Method had been called" + this.property1)}
};
timObject.method1();
alert(timObject.property3[2]) // will yield 3
var circle = { x : 0, y : 0, radius: 2 } // another example
// nesting is no problem.
var rectangle = {
upperLeft : { x : 2, y : 2 },
lowerRight : { x : 4, y : 4}
}
alert(rectangle.upperLeft.x) // will yield 2
//-->
</script>
文字記號可是是數(shù)組,也可以是任意的javascript表達式或值.
用 new 操作符或文字記號創(chuàng)建一個自定義對象都是簡單的,也是符合邏輯的.但它最大的缺點就是結果不可復用.也不能很容易的用不同的版本初始化創(chuàng)建對象.例如上面 的第一個例子,如果 person 的 name 不是 "Tim Scarfe",那樣我們不得不重新定義整個對象,僅僅為了適應它的一點點改變.
對象的構造和原型
在OOP的世界里,用先前的方法定義對象在許多場合都有限制.我們需要一種創(chuàng)建對象的方法,類型可以被多次使用而不用重新定義.對象在實例化時每次都可以按需分配不同的值.實現(xiàn)這個目標的標準方法是用對象構造器函數(shù).
一個對象構造器只不過是個有規(guī)則的javascript函數(shù),它就象一個容器(定義參數(shù),調(diào)用其他函數(shù)等等).它們兩者所不同的是構造器函數(shù)是由 new 操作符調(diào)用的.(你將在下面的例子中看到).基于函數(shù)語法形式的對象定義,我們可以使它工作得最好.
讓我們用現(xiàn)實世界中的貓來舉個例子.貓的 name 和 color 是貓的屬性.meeyow(貓叫)是它的一個方法.重要的是任何不同的貓都可能有不同的 name 和 meeyow 的叫聲.為了建立適應這些特征的對象類,我們將使用對象構造器.
復制代碼 代碼如下:
<script language="javascript" type="text/javascript">
<!--
function cat(name) {
this.name = name;
this.talk = function() {
alert( this.name + " say meeow!" )
}
}
cat1 = new cat("felix")
cat1.talk() //alerts "felix says meeow!"
cat2 = new cat("ginger")
cat2.talk() //alerts "ginger says meeow!"
//-->
</script>
<!--
function cat(name) {
this.name = name;
this.talk = function() {
alert( this.name + " say meeow!" )
}
}
cat1 = new cat("felix")
cat1.talk() //alerts "felix says meeow!"
cat2 = new cat("ginger")
cat2.talk() //alerts "ginger says meeow!"
//-->
</script>
在這里,函數(shù) cat() 是一個對象構造器,它的屬性和方法在函數(shù)體里用this來定義,用對象構造器定義的對象用 new 來實例化.主意我們?nèi)绾畏浅H菀椎亩x多個cat 的實例.每一個都有自己的名字,這就是對象構造器帶給我們的靈活性.
構造器建立了對象的藍圖.并不是對象本身.
在原型里增加方法.
在上面我們看到的例子里,對象的方法是在構造器里定義好的了.另外一種實現(xiàn)的途徑是通過原型(prototype).xxx
原型是javascript繼承的一種形式.我們可以為對象定義好后,再創(chuàng)造一個方法.原來所有對象的實例都將共享.
讓我們來擴展最初的 cat 對象.增加一個改名的方法.用 prototype 的方式.
復制代碼 代碼如下:
<script language="javascript" type="text/javascript">
<!--
cat.prototype.changeName = function(name) {
this.name = name;
}
firstCat = new cat("pursur")
firstCat.changeName("Bill")
firstCat.talk() //alerts "Bill says meeow!"
//-->
</script>
<!--
cat.prototype.changeName = function(name) {
this.name = name;
}
firstCat = new cat("pursur")
firstCat.changeName("Bill")
firstCat.talk() //alerts "Bill says meeow!"
//-->
</script>
就象你所看到的.我們僅只用了 關鍵字 prototype 實現(xiàn)了在對象定義后馬上增加了changeName方法.這個方法被所有的實例共享.
用原型(prototype) 重載 javascript 對象
原型 在自定義對象和有選擇性的重載對象上都可以工作.比如 Date() 或 String 這可能是無止境的.
子類和超類
在JAVA 和C++里,有關于類層次的外在概念.每一個類能有一個角色.
In Java and C++, there is an explicit concept of the class hierarchy. i.e. Every class can have a super class from which it inherits properties and methods. Any class can be extended, or sub-classed so the resulting subclass can inherit its parent's behavior. As we have seen, javascript supports prototype inheritance instead of class based. It's possible for inheritance to happen other ways, however.
The following is an example of inheritance through functions.
下面一個例子演示了如何繼承通過function .
復制代碼 代碼如下:
<script language="javascript" type="text/javascript">
<!--
// thanks to webreference
function superClass() {
this.supertest = superTest; //attach method superTest
}
function subClass() {
this.inheritFrom = superClass;
this.inheritFrom();
this.subtest = subTest; //attach method subTest
}
function superTest() {
return "superTest";
}
function subTest() {
return "subTest";
}
var newClass = new subClass();
alert(newClass.subtest()); // yields "subTest"
alert(newClass.supertest()); // yields "superTest"
//-->
</script>
<!--
// thanks to webreference
function superClass() {
this.supertest = superTest; //attach method superTest
}
function subClass() {
this.inheritFrom = superClass;
this.inheritFrom();
this.subtest = subTest; //attach method subTest
}
function superTest() {
return "superTest";
}
function subTest() {
return "subTest";
}
var newClass = new subClass();
alert(newClass.subtest()); // yields "subTest"
alert(newClass.supertest()); // yields "superTest"
//-->
</script>
基于繼承的原型是遙遠的.為 javascript 應用程序在許多場合.
(基于原型的繼承在許多javascript的應用場合是非常有用的.)
對象作為聯(lián)合數(shù)組
正如你所知, (.)操作符能夠用來存儲.[] 操作符用來操作數(shù)組.
<script language="javascript" type="text/javascript">
<!--
// These are the same
object.property
object["property"]
//-->
</script>
<SCRIPT LANGUAGE="javascript">
<!--
function Circle (xPoint, yPoint, radius) {
this.x = xPoint;
this.y = yPoint;
this.r = radius;
}
var aCircle = new Circle(5, 11, 99);
alert(aCircle.x);
alert(aCircle["x"]);
//-->
</SCRIPT>
How do I loop through properties in an object?
You need to use a for/in loop.
我們可以通過for in循環(huán)來遍歷對象的屬性。
<script language="javascript" type="text/javascript">
<!--
var testObj = {
prop1 : "hello",
prop2 : "hello2",
prop3 : new Array("hello",1,2)
}
for(x in testObj) alert( x + "-" + testObj[ x ] )
//-->
</script>
<SCRIPT LANGUAGE="javascript">
<!--
var Circle = { x : 0, y : 1, radius: 2 } // another example
for(p in Circle)
alert( p + "-" + Circle[ p ] )
//-->
</SCRIPT>
The important thing to notice is that in the object syntax the property is an identifier, whereas in the array syntax, it's a string. The obvious benefits of using an array syntax to access an object is because of the literal data type, you can easily concat strings and play around with them to access an object. For this to work with the standard syntax, an eval() would need to be used.
應該值得注意的是對象的屬性只是一個標識字符,盡管在一個數(shù)組里是一個字符串,因為是一個literal的數(shù)據(jù)類型,所以有利于使用數(shù)組的方式的操作一個對象。你也可以很容易的存取一個對象在標準的語句中。這個時候eval()函數(shù)可能用得到。
<script language="javascript" type="text/javascript">
<!--
testObj = {
prop1 : "hello",
prop2 : "hello2",
prop3 : new Array("helloa",1,2)
}
for(x in testObj) alert( x + "-" + testObj[ x ] )
var prop3 = testObj["prop3"];
alert(prop3);
//alert(prop[1]);
alert(typeof(prop3));
alert(eval(prop3)[1]);
alert(typeof(eval(prop3)[1]));
//-->
</script>
網(wǎng)上的東西錯誤的太多了,jb51.net修正后的測試下
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
您可能感興趣的文章:
- js如何打印object對象
- JavaScript 判斷判斷某個對象是Object還是一個Array
- js中判斷Object、Array、Function等引用類型對象是否相等
- Javascript創(chuàng)建自定義對象 創(chuàng)建Object實例添加屬性和方法
- Nodejs學習筆記之Global Objects全局對象
- Javascript中判斷變量是數(shù)組還是對象(array還是object)
- Javascript 面向對象 對象(Object)
- js Object2String方便查看js對象內(nèi)容
- javascript 對象數(shù)組根據(jù)對象object key的值排序
- 淺析JavaScript中的對象類型Object
相關文章
JavaScript中的this,call,apply使用及區(qū)別詳解
本文結合基本javascript的權威書籍中的內(nèi)容,根據(jù)自己的理解,通過相關示例向大家展示了javascript中this,call,apply使用及區(qū)別,非常的細致全面,希望大家能夠喜歡。2016-01-01
你必須知道的JavaScript 中字符串連接的性能的一些問題
每種程序語言中都會涉及到字符竄連接,而這個小小的字符竄連接問題很可能會影響到系統(tǒng)的整體性能,本文主要探討JavaScript中字符串連接的性能問題2013-05-05
javascript向flash swf文件傳遞參數(shù)值注意細節(jié)
如何使用javascript向SWF文件傳遞參數(shù)?在網(wǎng)上找了一個完整的教程,很有啟發(fā)性和實用性,如下是完整實現(xiàn)的步驟,需要的朋友可以參考下2012-12-12
淺析offsetLeft,Left,clientLeft之間的區(qū)別
這篇文章主要是對offsetLeft,Left,clientLeft之間的區(qū)別進行了詳細的分析介紹,需要的朋友可以過來參考下想,希望對大家有所幫助2013-11-11

