這篇文章主要介紹了javascript面向?qū)ο蟪绦蛟O(shè)計高級特性,結(jié)合實例形式詳細(xì)講述了javascript對象的創(chuàng)建,訪問,刪除,對象類型,擴展等,需要的朋友可以參考下

本文實例講述了javascript面向?qū)ο蟪绦蛟O(shè)計的高級特性。分享給大家供大家參考，具體如下：

1.創(chuàng)建對象的三種方式：

第一種構(gòu)造法：new Object

var a = new Object();

a.x = 1, a.y = 2;

第二種構(gòu)造法：對象直接量

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

第三種構(gòu)造法：定義類型

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.刪除屬性與方法

//創(chuàng)建一個空對象

var hero = {};

//為hero對象增加屬性和方法

hero.name = "JavaScript";

hero.value = "helloworld";

hero.sayName = function(){return "hello " + hero.name;};

//測試

alert(hero.name); //output javascript

alert(hero.sayName()); //output hello javascript

//刪除hero對象的name屬性

delete hero.name;

//測試

alert(hero.sayName()); //output hello undefined

4.使用this值

//創(chuàng)建一個空對象

var hero = {};

//為hero對象增加屬性和方法

hero.name = "javascript";

hero.value = "helloworld";

hero.sayName = function(){return "hello " + this.name;};

//測試

alert(hero.name); //output javascript

alert(hero.sayName()); //output hello javascript

總結(jié)：

① 這里的this實際上引用的是“這個對象”或“當(dāng)前對象”。

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

5.內(nèi)建對象

內(nèi)建對象大致上可以分為三個組：

① 數(shù)據(jù)封裝類對象 —— 包括Object、Array、Boolean、Number和String。這些對象代表著javascript中不同的數(shù)據(jù)類型，并且都擁有各自不同的typeof返回值，以及undefined和null狀態(tài)。

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

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

6.Object對象

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

創(chuàng)建一個空對象：

var object = {};

var obj = new Object();

7.Array對象

Array對象用于在單個的變量中存儲多個值。

創(chuàng)建一個空Array對象：

var object = {};

var obj = new Array();

例如1：

//反轉(zhuǎn)字符串示例

//定義一個字符串

var str = "a,b,c,d,e,f,g";

//利用String對象的split()方法，將字符串切割成一個數(shù)組

var arr = str.split(",");

//利用Array對象的reverse()方法，將數(shù)組中元素的順序顛倒。

arr = arr.reverse();

//測試打印

alert(arr.toString());

8.String對象

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

var str = "hello";

var obj = new String("world");

alert(typeof str); //typeof string

alert(typeof obj); //typeof object

例如1：

//判斷字符串是否包含指定字符串示例

//定義兩個要判斷的字符串

var str = "abcdefg";

var substr = "efg";

/*

* 定義判斷字符串是否包含指定字符串的函數(shù)

* * 第一個參數(shù)：要判斷的字符串

* * 第二個參數(shù)：指定的字符串

*/

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)

函數(shù)本身也是一個包含了方法和屬性的對象。而現(xiàn)在我們要研究的就是函數(shù)對象的另一個屬性 —— prototype。

利用原型添加方法與屬性

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

擴展內(nèi)建對象

利用原型添加方法與屬性

下面創(chuàng)建一個新的函數(shù)對象，并設(shè)置一些屬性和方法：

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函數(shù)對象增加一些屬性和方法：

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;

}

};

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

如果對象的自身屬性與原型屬性同名該怎么辦呢？答案是對象自身屬性的優(yōu)先級高于原型屬性。

function Hero(){

this.name = "jscript";

}

Hero.prototype.name = "javascript";

var hero = new Hero();

alert(hero.name); //output jscript

delete hero.name;

alert(hero.name); //output javascript

擴展內(nèi)建對象

//為原型 Array對象增加一個判斷的函數(shù)

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")); //true

alert(a.inArray("yellow")); //false

10.繼承

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

繼承關(guān)系至少包含三層含義：

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

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

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

在javascript中，并不支持“繼承”。也就是說，javascript中沒有繼承的語法。從這個意義上來說，javascript并不是直接的面向?qū)ο笳Z言。

11.原型鏈

原型鏈?zhǔn)荅CMAScript標(biāo)準(zhǔn)制定的默認(rèn)繼承方式。

例如：

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();

解釋說明：

將對象直接創(chuàng)建在B對象的prototype屬性中，并沒有去擴展這些對象的原有原型。

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

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

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

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

只繼承于原型：

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};

對象之間的繼承（擴展內(nèi)容，可以不會）（淺復(fù)制）

//該函數(shù)接受一個對象并返回它的副本

function extendCopy(p){

var z = {}; //定義一個空的對象z

for(var i in p){ //var i =0 ; i < p.length ; i++

z[i] = p[i]; //都當(dāng)做數(shù)組處理的話，可以理解

}

//uber屬性：將p作為z的父級，將z指向p的原型

z.uber = p;

return z;

}

//定義對象a，但是對象a不是函數(shù)對象

var a = {

name : "a",

toStr : function(){return this.name;}

}

//定義對象b，但是對象b不是函數(shù)對象

var b = extendCopy(a);

b.name = "b";

b.toStr = function(){return this.uber.toStr() + " , " + this.name;};

//定義對象c，但是對象c不是函數(shù)對象

var c = extendCopy(b);

c.name = 18;

alert(c.toStr()); //output a , b , 18

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