這篇文章主要介紹了javascript面向?qū)ο蟪绦蛟O(shè)計(jì)高級(jí)特性,結(jié)合實(shí)例形式詳細(xì)講述了javascript對(duì)象的創(chuàng)建,訪問(wèn),刪除,對(duì)象類(lèi)型,擴(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)造法：定義類(lèi)型
function Point(x, y){
this.x = x;
this.y = y;
}
var p = new Point(1,2);
2.訪問(wèn)對(duì)象
訪問(wèn)對(duì)象的屬性
中括號(hào)表示法：hero['name']。、
點(diǎn)號(hào)表示法：hero.name。
如果訪問(wèn)的屬性不存在，會(huì)返回undefined。
訪問(wèn)對(duì)象的方法
方法名后加一對(duì)括號(hào)：hero.say()。
像訪問(wèn)屬性一個(gè)訪問(wèn)方法：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的用法，大部分人的使用問(wèn)題都比較多。所以不建議過(guò)多使用！
5.內(nèi)建對(duì)象
內(nèi)建對(duì)象大致上可以分為三個(gè)組：
① 數(shù)據(jù)封裝類(lèi)對(duì)象 —— 包括Object、Array、Boolean、Number和String。這些對(duì)象代表著javascript中不同的數(shù)據(jù)類(lèi)型，并且都擁有各自不同的typeof返回值，以及undefined和null狀態(tài)。
② 工具類(lèi)對(duì)象 —— 包括Math、Date、RegExp等用于提供遍歷的對(duì)象。
③ 錯(cuò)誤類(lèi)對(duì)象 —— 包括一般性錯(cuò)誤對(duì)象以及其他各種更特殊的錯(cuò)誤類(lèi)對(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ì)象與基本的字符串類(lèi)型之間的區(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);
/*
* 判斷截取后的字符串是否為空
* * 為空，說(shuō)明不包含指定字符串
* * 不為空，說(shuō)明包含指定字符串
*/
if(result==substr){
return true;
}else{
return false;
}
}
alert(sub(str,substr));
9.原型(prototype)
函數(shù)本身也是一個(gè)包含了方法和屬性的對(duì)象。而現(xiàn)在我們要研究的就是函數(shù)對(duì)象的另一個(gè)屬性 —— prototype。
利用原型添加方法與屬性
利用自身屬性重寫(xiě)原型屬性
擴(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;
}
};
利用自身屬性重寫(xiě)原型屬性
如果對(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è)類(lèi)都是同一個(gè)實(shí)例的類(lèi)型，那么它們之間存在著某些關(guān)系，我們把同一個(gè)實(shí)例的類(lèi)型之間的泛化關(guān)系稱(chēng)為“繼承”。
繼承關(guān)系至少包含三層含義：
① 子類(lèi)的實(shí)例可以共享父類(lèi)的方法。
② 子類(lèi)可以覆蓋父類(lèi)的方法或擴(kuò)展新的方法。
③ 子類(lèi)和父類(lèi)都是子類(lèi)實(shí)例的“類(lèi)型”。
在javascript中，并不支持“繼承”。也就是說(shuō)，javascript中沒(méi)有繼承的語(yǔ)法。從這個(gè)意義上來(lái)說(shuō)，javascript并不是直接的面向?qū)ο笳Z(yǔ)言。
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();
解釋說(shuō)明：
將對(duì)象直接創(chuàng)建在B對(duì)象的prototype屬性中，并沒(méi)有去擴(kuò)展這些對(duì)象的原有原型。
通過(guò)new A ( ) 另創(chuàng)建了一個(gè)新的實(shí)體，然后用它去覆蓋該對(duì)象的原型。
javascript是一種完全依靠對(duì)象的語(yǔ)言，其中沒(méi)有類(lèi)（class）的概念。
因此，需要直接用new A ( ) 創(chuàng)建一個(gè)實(shí)體，然后才能通過(guò)該實(shí)體的屬性完成相關(guān)的繼承工作。
完成這樣的繼承實(shí)現(xiàn)之后，對(duì) A ( ) 所進(jìn)行的任何修改、重寫(xiě)或刪除，都不會(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ì)有所幫助。