JS物件導向程式設計學習

2022-09-16 05:57:12 字數 4135 閱讀 7742

學習目標:

1、掌握js中的類(原型物件)和物件。2、什麼是成員變數和成員方法。3、掌握構造方法的使用。

補充:關於雙等號(==):

1、如果等號兩邊都是字串時,則比較內容是否相等

2、如果等號兩邊是數字時,則比較數值大小是否相等

3、如果等號兩邊是物件或者物件的函式,則比較位址是否相等(即判斷兩者是否引用的同一物件)

function person()

var p1=new person();

var p2=new person();

alert(p1==p2);//這裡結果是false,因為位址不相等

var p3=p2;

alert(p3==p2);//這裡是true

j**ascript是一種基於物件的語言,你遇到的所有東西幾乎都是物件!

var a=123;

window.alert(a.constructor);//這裡會打出a的建構函式是number

var b='abc';

//同樣能打出來b的建構函式是string

function person(){}

window.alert(person.constructor);

//這裡能列印出person的建構函式是 function function(){}

從上面可以看出,j**ascript中所有的東西都是物件!!!

基於物件和物件導向實際上都是以物件的概念來編寫程式,從本質上講沒有區別。j**ascript中沒有class(類),所以有人把類叫作原型物件,因為兩個概念從在程式設計中發揮的作用看都是乙個意思。

//定義乙個類(原型物件)

function cat()

//看起來和函式一樣的,主要是看怎麼去用

cat();//這樣用,它就是乙個函式

var cat1 = new cat();//這裡cat1就是乙個物件(例項)了;

//定義這個物件的屬性

cat1.name="小白";

cat1.age=3;

cat1.color="白色";

//從上面可以看出:

//1、js中的物件的屬性可以動態的新增

//2、屬性沒有限制

例:function test()

var v=90;

//函式預設都是屬於window物件的,window是預設的物件,所以可以不打

window.test();//這裡輸出為90,因為函式 是在var後面才呼叫的

關於用var定義和不用var定義變數的區別例:

//在函式外面用var和不用都可以

var abc=89;

function test()

alert(abc);

訪問物件的屬性有兩種方法:

1、普通方式

物件名.屬性名

2、動態訪問

物件名['屬性名']

例:function person(){}//定義乙個類

var p1=new person();//建立乙個物件

p1.name="qqzone";//給物件的name屬性賦值

alert(p1.name);//這裡是普通方式訪問

alert(p1['name']);//這裡是動態方式訪問

var val = 'qq'+'zone';

alert(p1[val]);//這裡就體現出動態的好處了,屬性名可以是字串拼接出來的

js中物件的傳值是引用方式var a=new person();

a.name="test1";

var b=a;//把a的值賦給了b,這裡其實是b引用了a【傳位址】

b.name="test2";//這裡b.name改變了那麼a.name也一樣改了

js中有垃圾物件自動**機制,也可以主動刪除1、當乙個物件沒有任何引用指向它的時候,就會被自動刪除掉

var a=new person();

var b=a;//這裡物件a是被引用兩次

b=null;//這裡變回1

a=null; //這裡就沒有任何引用指向原來的物件了

2、使用delete,主動刪除物件的某個屬性

var a=new person();

a.name='test1';

var b=a;

delete b.name;//刪除name屬性,那麼通過a.name也無法訪問了

一、如何定義乙個原型物件

1、使用建構函式來定義

基本語法

function 類名()

建立物件 

www.2cto.com

var 物件名=new 類名;

window.alert(物件名.constructor); //物件例項的構造方法

如何判斷乙個物件是否屬於某個類?

1、使用instanceof

if(a instanceof person)

2、使用constructor

if(a.constructor == person)  

2、工廠方法,使用new object建立物件,並新增相關屬性

function person()

var p1=new person();

p1.name='test';

3、使用prototype(原型)

4、建構函式及原型混合方式

5、動態原型方式

二、this關鍵字

function person()

//這裡表示是person的乙個私有的方法

function show2()

}var p1=new person;

var p2=new person;

alert(p1.name+' '+p2.name);//這裡都為test,this為公開屬性

這裡show2();是私有方法 ,所以如果在這裡使用就會報錯

三、物件成員方法(函式)

1、方法一:

function person(name,age)

}2、方法二:

function person(name)

function show()

p1=new person();

//這種方法,就不是每個物件都有的函式了

p1.abc=show;//這裡不帶括號,表示把show的建構函式傳給p1.abc

p1.abc();

同樣也可以直接用p1.abc建立函式

p1.abc = function show()

3、方法三

function person(name)

var p1=new person();

//使用prototype建立的方法是所有物件都共享的

person.prototype.age=function()

var p2=new person();

p1.age();

alert(p1.age);//輸出12

alert(p2.age);//這裡不會輸出 ,因為p2還沒有執行age(),執行後就可以獲取age屬性;

四、object類(基類)

object是j**ascript中所有類的基類

var p1=new object();//通過object直接建立物件,這裡p1就是物件了

p1.name='test';//給p1的屬性賦值

通過object建立的類有以下主要屬性:

1、contructor 物件建構函式

2、prototype  原型,獲得類的prototype物件,static屬性

var a=10;

//給number類新增乙個add方法

number.prototype.add=function(a)

alert(a.add(10).add(10));//這裡a.add(10)執行後結果為20,那麼20.add(10)執行後結果為30

成員函式小結:

1、成員函式的引數可以是多個

2、成員函式可以沒有返回值,如果有返回值,最多隻返回乙個

3、js中不支援函式過載,如果有多個函式名相同,則以最後乙個為準

4、在js中直接定義乙個函式或變數實際上就是全域性函式和全域性變數,他們是屬於window的

var a=90;

alert(this.a);//這裡輸出就是90,因為都屬於window

摘自 貝爾的技術部落格

JS物件導向程式設計 物件

一般面向過程的寫法都是寫很多function,壞處 1.復用不好 2.函式名稱容易重複衝突 下面介紹物件導向的寫法 在js中每個函式function都是乙個物件。比如,下面這個就是乙個物件,我們在使用的時候就可以當作物件來使用。function helloworld 使用下面測試函式 呼叫該函式就會...

js物件導向程式設計

js物件導向程式設計 js使用建構函式作為物件的模板 var vehicle function 生成物件例項 var v new vehicle v.price 1000 傳引數的建構函式 var vehicle function value var v new vehicle 500 protot...

js物件導向程式設計

1.直接建立物件 集中例項化問題 2.工廠模式 物件識別問題 3.建構函式模式 例項化物件的方法在每個例項上都要建立一遍 建構函式模式 function student name var student1 new student 張三 每個例項物件對應乙個引用,所以例項化物件時,所有屬性與方法都會重...