javascript面向對象程序設計高級特性經典教程(值得收藏)

本文實例講述了javascript面向對象程序設計的高級特性。分享給大家供大家參考，具體如下：

1.創建對象的三種方式：

第一種構造法：new Object

 var a = new Object();ax = 1, ay = 2;

第二種構造法：對象直接量

var b = { x : 1, y : 2 };

第三種構造法：定義類型

function Point(x, y){ this.x = x; this.y = y;}var p = new Point(1,2);

2.訪問對象

訪問對象的屬性

中括號表示法：hero['name']。 、

點號表示法：hero.name。

如果訪問的屬性不存在，會返回undefined。

訪問對象的方法

方法名後加一對括號：hero.say()。

像訪問屬性一個訪問方法：hero['say']()。

3.刪除屬性與方法

//創建一個空對象var hero = {};//為hero對象增加屬性和方法hero.name = "JavaScript";hero.value = "helloworld";hero.sayName = function(){return "hello " + hero.name;};//測試alert(hero.name); //output javascriptalert(hero.sayName()); //output hello javascript//刪除hero對象的name屬性delete hero.name;//測試alert(hero.sayName()); //output hello undefined

4.使用this值

//創建一個空對象var hero = {};//為hero對象增加屬性和方法hero.name = "javascript";hero.value = "helloworld";hero.sayName = function(){return "hello " + this.name;};//測試alert(hero.name); //output javascriptalert(hero.sayName()); //output hello javascript

總結：

① 這裡的this實際上引用的是“這個對象”或“當前對象”。

② this的用法，大部分人的使用問題都比較多。所以不建議過多使用！

5.內建對象

內建對像大致上可以分為三個組：

① 數據封裝類對象―― 包括Object、Array、Boolean、Number和String。這些對象代表著javascript中不同的數據類型，並且都擁有各自不同的typeof返回值，以及undefined和null狀態。

② 工具類對象―― 包括Math、Date、RegExp等用於提供遍歷的對象。

③ 錯誤類對象―― 包括一般性錯誤對像以及其他各種更特殊的錯誤類對象。它們可以在某些異常發生時幫助我們糾正程序工作狀態。

6.Object對象

Object是javascript中所有對象的父級對象，這意味著所有對像都繼承於Object對象。

創建一個空對象：

 var object = {};var obj = new Object();

7.Array對象

Array對像用於在單個的變量中存儲多個值。

創建一個空Array對象：

 var object = {};var obj = new Array();

例如1：

 //反轉字符串示例//定義一個字符串var str = "a,b,c,d,e,f,g";//利用String對象的split()方法，將字符串切割成一個數組var arr = str.split(",");//利用Array對象的reverse()方法，將數組中元素的順序顛倒。 arr = arr.reverse();//測試打印alert(arr.toString());

8.String對象

String對象與基本的字符串類型之間的區別：

 var str = "hello";var obj = new String("world");alert(typeof str); //typeof stringalert(typeof obj); //typeof object

例如1：

 //判斷字符串是否包含指定字符串示例//定義兩個要判斷的字符串var str = "abcdefg";var substr = "efg";/** 定義判斷字符串是否包含指定字符串的函數* * 第一個參數：要判斷的字符串* * 第二個參數：指定的字符串*/function sub(str,substr){//將判斷的字符串定義成String對象var string = new String(str);//截取判斷的字符串var result = string.substr(string.indexOf(substr),substr.length);/** 判斷截取後的字符串是否為空* * 為空，說明不包含指定字符串* * 不為空，說明包含指定字符串*/if(result==substr){return true;}else{return false;}}alert(sub(str,substr));

9.原型(prototype)

函數本身也是一個包含了方法和屬性的對象。而現在我們要研究的就是函數對象的另一個屬性―― prototype。

利用原型添加方法與屬性

利用自身屬性重寫原型屬性

擴展內建對象

利用原型添加方法與屬性

下面創建一個新的函數對象，並設置一些屬性和方法：

 function Hero(name, color){ this.name = name; this.color = color; this.whatareyou = function(){ return "I am a " + this.color + " " + this.name; }}var hero = new Hero("javascript","red");alert(hero.whatareyou()); //output I am a red javascript

為上面的Hero函數對象增加一些屬性和方法：

 Hero.prototype.price = 100;Hero.prototype.rating = 3;Hero.prototype.getInfo = function(){ return "Rating: " + this.rating + " , Price: " + this.price;}alert(hero.getInfo()); //output Rating: 3 , Price: 100

上面的方式，也可以這樣去做：

 Hero.prototype = { price : 100, rating : 3, getInfo : function(){ return "Rating: " + this.rating + " , Price: " + this.price; }};

利用自身屬性重寫原型屬性

如果對象的自身屬性與原型屬性同名該怎麼辦呢？答案是對象自身屬性的優先級高於原型屬性。

 function Hero(){ this.name = "jscript";}Hero.prototype.name = "javascript";var hero = new Hero();alert(hero.name); //output jscriptdelete hero.name;alert(hero.name); //output javascript

擴展內建對象

//為原型Array對象增加一個判斷的函數Array.prototype.inArray = function(color){ for(var i = 0, len = this.length; i < len; i++){ if(this[i] === color){ return true; } } return false;}//定義一個Array對象var a = ["red", "green", "blue"];//測試alert(a.inArray("red")); //truealert(a.inArray("yellow")); //false

10.繼承

如果兩個類都是同一個實例的類型，那麼它們之間存在著某些關係，我們把同一個實例的類型之間的泛化關係稱為“繼承”。

繼承關係至少包含三層含義：

① 子類的實例可以共享父類的方法。

② 子類可以覆蓋父類的方法或擴展新的方法。

③ 子類和父類都是子類實例的“類型”。

在javascript中，並不支持“繼承”。也就是說，javascript中沒有繼承的語法。從這個意義上來說，javascript並不是直接的面向對象語言。

11.原型鏈

原型鍊是ECMAScript標準制定的默認繼承方式。

例如：

 function A(){this.name = "a";this.toString = function(){return this.name};}function B(){this.name = "b";}function C(){this.name = "c";this.age = 18;this.getAge = function(){return this.age};}B.prototype = new A();C.prototype = new B();

解釋說明：

將對象直接創建在B對象的prototype屬性中，並沒有去擴展這些對象的原有原型。

通過new A ( ) 另創建了一個新的實體，然後用它去覆蓋該對象的原型。

javascript是一種完全依靠對象的語言，其中沒有類（class）的概念。

因此，需要直接用new A ( ) 創建一個實體，然後才能通過該實體的屬性完成相關的繼承工作。

完成這樣的繼承實現之後，對A ( ) 所進行的任何修改、重寫或刪除，都不會對B ( ) 產生影響。

只繼承於原型：

 function A(){}A.prototype.name = "a";A.prototype.toString = function(){return this.name};function B(){}B.prototype = A.prototype;B.prototype.name = "b";function C(){}C.prototype = B.prototype;C.prototype.name = "c";C.prototype.age = 18;C.prototype.getAge = function(){return this.age};

對象之間的繼承（擴展內容，可以不會）（淺複製）

 //該函數接受一個對象並返回它的副本function extendCopy(p){ var z = {}; //定義一個空的對象z for(var i in p){ //var i =0 ; i < p.length ; i++ z[i] = p[i]; //都當做數組處理的話，可以理解} //uber屬性：將p作為z的父級，將z指向p的原型z.uber = p; return z;}//定義對象a，但是對象a不是函數對象var a = { name : "a", toStr : function(){return this.name;}}//定義對象b，但是對象b不是函數對象var b = extendCopy(a);b.name = "b";b.toStr = function(){return this.uber.toStr() + " , " + this.name;};//定義對象c，但是對象c不是函數對象var c = extendCopy(b);c.name = 18;alert(c.toStr()); //output a , b , 18

PS:教程中不少代碼排版不太規範，小編這裡推薦幾款本站javascript代碼格式化美化工具供大家使用：

JavaScript代碼格式化工具：

http://tools.VeVB.COm/code/js

JavaScript代碼美化/壓縮/格式化/加密工具：

http://tools.VeVB.COm/code/jscompress

jsmin在線js壓縮工具：

http://tools.VeVB.COm/code/jsmincompress

更多關於JavaScript相關內容可查看本站專題：《javascript面向對象入門教程》、《JavaScript中json操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍曆算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。