1.面向對象的概念
1.1什么是面向對象：
1 .面向對象是一種思維方法
2.面向對象是一種編程方法
3.面向對象并不只針對某一種編程語言
1.2面向對象和面向過程的區別
1.面向過程過程側重整個問題的解決步驟，著眼局部或者具體
2.面向對象側重具體的功能，讓某個對象具有這樣的功能。更加側重于整體。
1.3面向對象的實現方式
1.基于類的面向對象
2.基于原型的面向對象
1.4訪問對象的屬性
訪問一個對象的屬性，我們可以直接通過 對象.屬性名 和 對象[屬性名] 來訪問。
alert(person.name); // 訪問person對象的 name屬性值
person.age = 30; //修改person對象的 age 屬性
person.eat(); //既然是調用方法(函數) 則一定還要添加 ()來表示方法的調用
alert(person["name"]); //
兩種使用方式有一些不同的地方：
- 對象.屬性名的方式，只適合知道了屬性的名字，可以直接寫。比如： person.age 。如果屬性名是個變量，則這種方法無效， 對象.變量名 會出現語法錯誤。
- 對象[屬性名]，這種方式使用無限制。如果是字符串常量，則應該用""或''引起來，如果是變量，可以直接使用。
person.age = 100; // ok
var n = "age";
person.a = 101; // no ok 語法錯誤
person["age"] = 102; // ok
person[n] = 103; //ok
1.5給對象添加屬性
//給person對象的屬性 girlFriend 賦值。在賦值的過程中，首先會判斷這個屬性在JavaScript中是否存在，如果存在就對這個
//屬性重寫賦值。如果不存在，就給這個對象添加這個屬性，并賦值。
person.girlFrient = "小麗";
//給對象添加方法
person.play = funcion(){
alert("打擊high起來");
}
1.6刪除對象屬性
使用 delete 操作符
// 使用delete操作關鍵字，刪除person對象的屬性age
delete person.age;
alert(person.age); //彈出undefined。表示這個屬性沒有定義
1.7使用for...in遍歷對象的屬性
for...in 可以遍歷對象的所有屬性。
// 在用for...in遍歷的時候， in前面的變量pn指的是屬性的名稱。
for (pn in person) {
alert(pn + " " + person[pn]);
}
2.創建對象的方式
2.1使用new Object()創建
<script type="text/javascript">
//使用object創建一個對象 完全等同于 var person = {};
var person = new Object();
//給對象添加屬性
person.name = "李四";
//給對象添加方法
person.eat = function () {
alert("好好吃")
}
</script>
2.2使用工廠模式創建
<script type="text/javascript">
function createPerson(name, age, job) {
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function() {
alert(this.name);
};
return o;
}
var person1 = createPerson("張三", 29, "js開發者");
var person2 = createPerson("李四", 27, "java開發者");
</script>
2.3構造函數創建對象
<script type="text/javascript">
function Person (name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
this.eat = function () {
alert(this.name + "在吃東西");
}
}
var p1 = new Person("張三", 20, "男");
p1.eat(); //張三在在吃東西
var p1 = new Person("李四", 30, "男");
p1.eat(); //李四在在吃東西
alert(p1 instanceof Person); //
</script>
說明：
- 使用構造函數創建對象，必須使用關鍵字new ，后面跟著構造函數的名，根據需要傳入相應的參數。
- 其實使用 new 構造函數() 的方式創建對象，經歷了下面幾個步驟。
- 創建出來一個新的對象
- 將構造函數的作用域賦給新對象。意味著這個時候 this就代表了這個新對象。
- 執行構造函數中的代碼。 在本例中就是給新對象添加屬性，并給屬性初始化值。
- 構造函數執行完畢之后，默認返回新對象。 所以外面就可以拿到這個剛剛創建的新對象了。
2.3.1構造函數與普通函數的關系
- 他們都是函數。構造函數也是函數，也可以像普通的函數一樣進行調用。 做普通函數調用的時候，因為沒有創建新的對象，所以this其實指向了window對象。
function Person(){
this.name = "張三"; // 把name屬性添加到了window對象上面
alert(this === window); //如果不作為構造方法調用，則 是true
}
Person(); // 把構造函數當做普通方法調用。這個時候內部的this指向了weindow
alert(window.name); //張三
function Human(){
this.name = "王五";
alert(this instanceof window); // false
alert(this instanceof Human); //true
}
var h = new Human(); //當做構造函數來調用，創建一個對象
alert(h.name);
- 構造函數和普通函數僅僅也僅僅是調用方式的不同。也就是說，隨便一個函數你如果用new 的方式去使用，那么他就是一個構造函數。
- 為了區別，如果一個函數想作為構造函數，作為國際慣例，最好把這個構造函數的首字母大寫。
3.理解原型
3.1 函數的原型對象
? 在JavaScript中，我們創建一個函數A(就是聲明一個函數), 那么瀏覽器就會在內存中創建一個對象B，而且每個函數都默認會有一個屬性 prototype 指向了這個對象( 即：prototype的屬性的值是這個對象 )。這個對象B就是函數A的原型對象，簡稱函數的原型。這個原型對象B 默認會有一個屬性 constructor 指向了這個函數A ( 意思就是說：constructor屬性的值是函數A )。
? 看下面的代碼：
<body>
<script type="text/javascript">
/*
聲明一個函數，則這個函數默認會有一個屬性叫 prototype 。而且瀏覽器會自動按照一定的規則
創建一個對象，這個對象就是這個函數的原型對象，prototype屬性指向這個原型對象。這個原型對象
有一個屬性叫constructor 指向了這個函數
注意：原型對象默認只有屬性：constructor。其他都是從Object繼承而來，暫且不用考慮。
*/
function Person () {
}
</script>
</body>
3.2使用構造函數創建對象
? 當把一個函數作為構造函數 (理論上任何函數都可以作為構造函數) 使用new創建對象的時候，那么這個對象就會存在一個默認的不可見的屬性，來指向了構造函數的原型對象。 這個不可見的屬性我們一般用 [[proto]] 來表示，只是這個屬性沒有辦法直接訪問到。
? 看下面的代碼：
<body>
<script type="text/javascript">
function Person () {
}
/*
利用構造函數創建一個對象，則這個對象會自動添加一個不可見的屬性 [[proto]], 而且這個屬性
指向了構造函數的原型對象。
*/
var p1 = new Person();
</script>
</body>
觀察下面的示意圖：
說明：
- 從上面的圖示中可以看到，創建p1對象雖然使用的是Person構造函數，但是對象創建出來之后，這個p1對象其實已經與Person構造函數沒有任何關系了，p1對象的[[ proto ]]屬性指向的是Person構造函數的原型對象。
- 如果使用new Person()創建多個對象，則多個對象都會同時指向Person構造函數的原型對象。
- 我們可以手動給這個原型對象添加屬性和方法，那么p1,p2,p3...這些對象就會共享這些在原型中添加的屬性和方法。
- 如果我們訪問p1中的一個屬性name，如果在p1對象中找到，則直接返回。如果p1對象中沒有找到，則直接去p1對象的[[proto]]屬性指向的原型對象中查找，如果查找到則返回。(如果原型中也沒有找到，則繼續向上找原型的原型---原型鏈。 后面再講)。
- 如果通過p1對象添加了一個屬性name，則對p1對象來說就屏蔽了原型中的屬性name。 換句話說：在p1中就沒有辦法訪問到原型的屬性name了。
- 通過p1對象只能讀取原型中的屬性name的值，而不能修改原型中的屬性name的值。 p1.name = "李四"; 并不是修改了原型中的值，而是在p1對象中給添加了一個屬性name。
看下面的代碼：
<body>
<script type="text/javascript">
function Person () {
}
// 可以使用Person.prototype 直接訪問到原型對象
//給Person函數的原型對象中添加一個屬性 name并且值是 "張三"
Person.prototype.name = "張三";
Person.prototype.age = 20;
var p1 = new Person();
/*
訪問p1對象的屬性name，雖然在p1對象中我們并沒有明確的添加屬性name，但是
p1的 [[prototype]] 屬性指向的原型中有name屬性，所以這個地方可以訪問到屬性name
就值。
注意：這個時候不能通過p1對象刪除name屬性，因為只能刪除在p1中刪除的對象。
*/
alert(p1.name); // 張三
var p2 = new Person();
alert(p2.name); // 張三 都是從原型中找到的，所以一樣。
alert(p1.name === p2.name); // true
// 由于不能修改原型中的值，則這種方法就直接在p1中添加了一個新的屬性name，然后在p1中無法再訪問到
//原型中的屬性。
p1.name = "李四";
alert("p1：" + p1.name);
// 由于p2中沒有name屬性，則對p2來說仍然是訪問的原型中的屬性。
alert("p2:" + p2.name); // 張三
</script>
</body>
3.3與原型有關的幾個屬性和方法
3.3.1prototype屬性
prototype存在于構造函數中，它指向于構造函數的原型對象。
3.3.2 constructor屬性
constructor屬性存在于原型對象中，他指向了構造函數
看下面的代碼：
<script type="text/javascript">
function Person () {
}
alert(Person.prototype.constructor === Person); // true
var p1 = new Person();
//使用instanceof 操作符可以判斷一個對象的類型。
//typeof一般用來獲取簡單類型和函數。而引用類型一般使用instanceof，因為引用類型用typeof 總是返回objece。
alert(p1 instanceof Person); // true
alert(typeof p1); // object
</script>
3.3.3 hasOwnProperty()方法
hasOwnProperty方法用來判斷一個屬性是否來自對象本身。
<script type="text/javascript">
function Person () {
}
Person.prototype.name = "志玲";
var p1 = new Person();
p1.sex = "女";
//sex屬性是直接在p1屬性中添加，所以是true
alert("sex屬性是對象本身的：" + p1.hasOwnProperty("sex"));
// name屬性是在原型中添加的，所以是false
alert("name屬性是對象本身的：" + p1.hasOwnProperty("name"));
// age 屬性不存在，所以也是false
alert("age屬性是存在于對象本身：" + p1.hasOwnProperty("age"));
</script>
3.3.4 in操作符
in 操作符用來判斷一個屬性是否存在于這個對象中。但是在查找這個屬性時候，先在對象本身中找，如果對象找不到再去原型中找。換句話說，只要對象和原型中有一個地方存在這個屬性，就返回true
<script type="text/javascript">
function Person () {
}
Person.prototype.name = "志玲";
var p1 = new Person();
p1.sex = "女";
alert("sex" in p1); // 對象本身添加的，所以true
alert("name" in p1); //原型中存在，所以true
alert("age" in p1); //對象和原型中都不存在，所以false
</script>
回到前面的問題，如何判斷一個屬性是否存在于原型中：
如果一個屬性存在，但是沒有在對象本身中，則一定存在于原型中。
<script type="text/javascript">
function Person () {
}
Person.prototype.name = "志玲";
var p1 = new Person();
p1.sex = "女";
//定義一個函數去判斷原型所在的位置
function propertyLocation(obj, prop){
if(!(prop in obj)){
alert(prop + "屬性不存在");
}else if(obj.hasOwnProperty(prop)){
alert(prop + "屬性存在于對象中");
}else {
alert(prop + "對象存在于原型中");
}
}
propertyLocation(p1, "age");
propertyLocation(p1, "name");
propertyLocation(p1, "sex");
</script
3.4組合使用原型模型和構造函數模型創建對象
? 原型模式適合封裝方法，構造方法模式適合封裝屬性，綜合兩種模式的優點就有了組合模式。
<script type="text/javascript">
//在構造方法內部封裝屬性
function Person(name, age) {
this.name = name;
this.age = age;
}
//在原型對象內封裝方法
Person.prototype.eat = function (food) {
alert(this.name + "愛吃" + food);
}
Person.prototype.play = function (playName) {
alert(this.name + "愛玩" + playName);
}
var p1 = new Person("李四", 20);
var p2 = new Person("張三", 30);
p1.eat("蘋果");
p2.eat("香蕉");
p1.play("志玲");
p2.play("鳳姐");
</script>
3.5動態原型模式創建對象
前面講到的組合模式，也并非完美無缺，有一點也是感覺不是很完美。把構造方法和原型分開寫，總讓人感覺不舒服，應該想辦法把構造方法和原型封裝在一起，所以就有了動態原型模式。
? 動態原型模式把所有的屬性和方法都封裝在構造方法中，而僅僅在需要的時候才去在構造方法中初始化原型，又保持了同時使用構造函數和原型的優點。
看下面的代碼：
<script type="text/javascript">
//構造方法內部封裝屬性
function Person(name, age) {
//每個對象都添加自己的屬性
this.name = name;
this.age = age;
/*
判斷this.eat這個屬性是不是function，如果不是function則證明是第一次創建對象，
則把這個funcion添加到原型中。
如果是function，則代表原型中已經有了這個方法，則不需要再添加。
perfect！完美解決了性能和代碼的封裝問題。
*/
if(typeof this.eat !== "function"){
Person.prototype.eat = function () {
alert(this.name + " 在吃");
}
}
}
var p1 = new Person("志玲", 40);
p1.eat();
</script>
說明：
- 組合模式和動態原型模式是JavaScript中使用比較多的兩種創建對象的方式。
- 建議以后使用動態原型模式。他解決了組合模式的封裝不徹底的缺點。
