對于很多初學JavaScript的小白來說,剛接觸面向對象肯定是一臉懵逼的,博主也是一樣.但經過一段時間的工作,還是對于面向對象有了一定的了解,下面就是這些天學習面向對象的一些心得與體會,希望對大家有所幫助.
什么是面向對象?
相信對于面向對象的一些概念大家在網上看的也都不少,什么學會了面向對象呀就能找對象之類的.好吧,言歸正傳,在JavaScript中,可以說所有東西都是對象,對象就是包含一組變量和函數的集合.函數是一個對象,數組是一個對象.而對于面向對象來說,我們把構成問題事務分解成各個對象,那么建立這些對象是為了描敘某個事物在整個解決問題的步驟中的行為,而不是為了完成一個步驟。
第一:如何創建對象
對象的每個屬性或者方法都有一個名字,而每個名字都映射到一個值
如下面的對象:
例1:
var person = {
name: "王先生",
age:22,
sex:"男"
}
對于person(人)這個對象來說,每個人肯定是有名字的,有年齡,也有性別,也就是說person這個對象它有3個屬性.
那么像這種 name:"王先生" , 屬性名:屬性值 , 我們就稱之為鍵值對,一個鍵值對就是一個對象的屬性.
那么有人就會問了,向剛剛上面的例子中,不管是name還是age都只是一個簡單的數據類型,像"王先生"是字符串,22是數字,這個對象中能不能有一些更牛的屬性呢,比如函數?答案是可以的.
對象中的屬性不僅僅可以是一些簡單數據類型,也可以是函數,也可以是對象.這里我要科普一下,哪些是簡單數據類型呢?
簡單數據類型在JS中就是5種,分別是:
1.數字類型 number;
2.布爾類型 boolean;
3.字符串類型 string;
4.undefined
5.null
除了以上5種數據類型,其他的所有元素的數據類型都是object類型
所以我們想給對象person中添加函數應該怎么做?這里你可以理解為函數也只是我們給對象中添加的一個屬性而已,所以用法也和添加簡單數據類型一樣.
如,我要給person添加一個eat函數:
例2:
var person = {
name: "王先生",
age:22,
sex:"男",
eat:function(){
alert("王先生愛吃");
}
}
這里要提醒的一點是,對象中各個屬性直接是用逗號來隔開的,而不是分號.
第二:如何訪問對象中的屬性
如果我們現在想訪問例2中的name屬性,可以這樣寫:
對象名.屬性名
console.log(person.name);
另外也可以直接調用對象中的方法(函數):
person.eat(); //既然是調用方法(函數) 則一定還要添加()來表示方法的調用
也可以這樣寫:
對象名[屬性名]
console.log(person["name"])
倆種方式都可以使我們訪問到對象中的屬性,但也有一定的區別:
對象名.屬性名只適合知道了屬性的名字時使用,如果一個屬性名是個變量則會出現語法錯誤;
對象名[屬性名]就沒有限制了,不過當變量名是字符串常量,我們就要用" "引號引起來,是變量的話則可以直接使用
person,age = 22;
var a = 'age';
console.log(person[a])
=>22
第三:如何修改對象中的屬性
修改對象中的屬性其實很簡單,只需要獲取到你想修改的對象的屬性,然后給它重新賦值就可以了;
比如修改例2中的sex屬性和eat屬性:
person.sex = "女"
person.eat=function(){
alert("王先生不愛吃");
}
第四:如何給對象添加屬性
上面我們了解到了怎么訪問對象屬性,修改對象屬性,那么現在想給對象中添加屬性應該怎么做呢?
比如我現在還是想給例3中的person添加一個屬性hobby和play;
例3:
var person = {
name: "王先生",
age:22,
sex:"男",
eat:function(){
alert("王先生愛吃");
}
}
person.hobby="yun";
person.favorite=function(){
alert(this.name+"favorite is"+this.hobby);
}
第五:如何刪除對象中的屬性
刪除對象中屬性這里我們要用到一個操作符:delete;
如我要刪除例3中person的年齡屬性:
delete person.age;
//此時我們再執行
console.log(person.age)
=>undefined //返回的是undefined ,說明age這個屬性被刪除了
第六:如何遍歷對象
針對遍歷對象,可以有倆種變量對象的方式
1.通過for(...in...)來變量對象的各個屬性名稱
for(var proName in p){ //var 可以省略 in前面表示的是p對象的屬性名稱
console.log(proName); //在此輸出的只是p對象的各個屬性名稱
}
for(var proName in p){
console.log(p[proName]) //在此輸出的是p對象的各個屬性的值
}
2.通過for(...of...)來變量對象的各個屬性的值
for(var pro of p){
console.log(pro); //在此輸出的是p對象的各個屬性的值
}
解析面向對象的幾種創建方式
上面我們只是簡單的用
var 對象名 = { 屬性名:屬性值, 屬性名:屬性值, }
來創建一個對象,這種方式稱為字面量的創建方式,其實還有另外幾種創建對象的方式.
3.1 使用new Object( )
var p = new Object();
p.name = "小王",
p.eat = function(){
alert('函數')
}
3.2 工廠模式創建
function createP(name,age,sex){
var p = new Object();
p.name = name;
p.age = age;
p.sex = sex;
return p;
}
var p1 = createP("小王","22","男");
var p2 = createP("小張","23","女");
createPerson()函數可以多次調用，每調用一次這個函數就會返回一個對象，而且對象的類型仍然是Object類型的。雖然解決了多個相似對象的問題，但卻沒有解決對象類型識別的問題。
3.3 構造函數創建
為了解決對象類型識別問題，又提出了構造函數模式。
通俗來說,就是用 new 的方式來調用函數的時候,就是構造函數. 如: var p = new person();
這種模式，其實在我們創建一些原生對象的時候，比如Array、Object都是調用的他們的構造函數。
構造函數的使用:
? 1.首先創建一個對象,這個對象的類型就是構造函數的名字
? 如例1中的p1就是創建的對象,這個對象的類型就是createP
? 2.最后會把創建這個對象自動的返回,所以不需要return
? 3.為什么使用構造函數:實際是給創建對象的一個初始化
? 4.函數作為構造函數使用時,this指代的是創建的這個對象;函數作為正常調用時,this代指window
例1:
function createP(name,age,sex){
this.name = name; //在構造函數中,this就是指代創建這個對象
this.age = age;
this.sex = sex;
}
var p1 = new createP("小王","22","男"); //使用new的方式來調用函數的時候,這個時候,這樣的函數就叫構造函數
var p2 = new createP("小張","23","女");
構造函數與普通函數的區別
上面我們在創建對象的時候用了一種通過構造函數創建的方式,那么構造函數與普通函數有什么區別呢?
他們的調用方式不同:
構造函數: new 函數( )
默認返回創建的那個對象
所有單詞首字母大寫
普通函數: 函數( )
默認返回undefined
