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

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

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

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

var a = new Object();

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

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

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.訪問對(duì)象

訪問對(duì)象的屬性

中括號(hào)表示法：hero['name']。、

點(diǎn)號(hào)表示法：hero.name。

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

訪問對(duì)象的方法

方法名后加一對(duì)括號(hào)：hero.say()。

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

3.刪除屬性與方法

//創(chuàng)建一個(gè)空對(duì)象

var hero = {};

//為hero對(duì)象增加屬性和方法

hero.name = "JavaScript";

hero.value = "helloworld";

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

//測(cè)試

alert(hero.name); //output javascript

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

//刪除hero對(duì)象的name屬性

delete hero.name;

//測(cè)試

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

4.使用this值

//創(chuàng)建一個(gè)空對(duì)象

var hero = {};

//為hero對(duì)象增加屬性和方法

hero.name = "javascript";

hero.value = "helloworld";

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

//測(cè)試

alert(hero.name); //output javascript

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

總結(jié)：

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

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

5.內(nèi)建對(duì)象

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

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

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

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

6.Object對(duì)象

Object是javascript中所有對(duì)象的父級(jí)對(duì)象，這意味著所有對(duì)象都繼承于Object對(duì)象。

創(chuàng)建一個(gè)空對(duì)象：

var object = {};

var obj = new Object();

7.Array對(duì)象

Array對(duì)象用于在單個(gè)的變量中存儲(chǔ)多個(gè)值。

創(chuàng)建一個(gè)空Array對(duì)象：

var object = {};

var obj = new Array();

例如1：

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

//定義一個(gè)字符串

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

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

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

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

arr = arr.reverse();

//測(cè)試打印

alert(arr.toString());

8.String對(duì)象

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

var str = "hello";

var obj = new String("world");

alert(typeof str); //typeof string

alert(typeof obj); //typeof object

例如1：

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

//定義兩個(gè)要判斷的字符串

var str = "abcdefg";

var substr = "efg";

/*

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

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

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

*/

function sub(str,substr){

//將判斷的字符串定義成String對(duì)象

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ù)本身也是一個(gè)包含了方法和屬性的對(duì)象。而現(xiàn)在我們要研究的就是函數(shù)對(duì)象的另一個(gè)屬性 —— prototype。

利用原型添加方法與屬性

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

擴(kuò)展內(nèi)建對(duì)象

利用原型添加方法與屬性

下面創(chuàng)建一個(gè)新的函數(shù)對(duì)象，并設(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ù)對(duì)象增加一些屬性和方法：

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;

}

};

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

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

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

擴(kuò)展內(nèi)建對(duì)象

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

Array.prototype.inArray = function(color){

for(var i = 0, len = this.length; i < len; i++){

if(this[i] === color){

return true;

}

}

return false;

}

//定義一個(gè)Array對(duì)象

var a = ["red", "green", "blue"];

//測(cè)試

alert(a.inArray("red")); //true

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

10.繼承

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

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

① 子類的實(shí)例可以共享父類的方法。

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

③ 子類和父類都是子類實(shí)例的“類型”。

在javascript中，并不支持“繼承”。也就是說，javascript中沒有繼承的語法。從這個(gè)意義上來說，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();

解釋說明：

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

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

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

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

完成這樣的繼承實(shí)現(xiàn)之后，對(duì) A ( ) 所進(jìn)行的任何修改、重寫或刪除，都不會(huì)對(duì) 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};

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

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

function extendCopy(p){

var z = {}; //定義一個(gè)空的對(duì)象z

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

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

}

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

z.uber = p;

return z;

}

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

var a = {

name : "a",

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

}

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

var b = extendCopy(a);

b.name = "b";

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

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

var c = extendCopy(b);

c.name = 18;

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

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