摘要：什么是面向對象編程用對象的思想去寫代碼，就是面向對象編程過程式寫法面向對象寫法我們一直都在使用對象數組時間面向對象編程的特點抽象抓住核心問題封裝只能通過對象來訪問方法繼承從已有對象上繼承出新的對象多態多對象的不同形態對象的組成方法行為操作對

用對象的思想去寫代碼，就是面向對象編程

過程式寫法

面向對象寫法

我們一直都在使用對象

數組Array 時間Date

抽象：抓住核心問題

封裝：只能通過對象來訪問方法

繼承：從已有對象上繼承出新的對象

多態：多對象的不同形態

方法（行為、操作） —— 對象下面的函數：過程、動態的

屬性 —— 對象下面的變量：狀態、靜態的

//var obj = {};
var obj = new Object(); //創建了一個空的對象
obj.name = "小明"; //屬性
obj.showName = function(){ //方法
    alert(this.name);
}
obj.showName();

為對象添加屬性和方法

Object對象

this指向

創建兩個對象：重復代碼過多

//var obj = {};
var obj = new Object(); //創建了一個空的對象
obj.name = "小明"; //屬性
obj.showName = function(){ //方法
    alert(this.name);
}
obj.showName();
var obj2 = new Object(); 
obj2.name = "小強";
obj.showName = function(){
    alert(this.name);
}
obj2.showName();

面向對象中的封裝函數

//工廠方式：封裝函數
function createPerson(name){
    //1. 原料
    var obj = new Object();  
    //2. 加工
    obj.name = name;
    obj.showName = function(){
        alert(this.name);
    };   
    //3. 出廠
    return obj;
}
var p1 = createPerson("小明");
p1.showName();
var p2 = createPerson("小強");
p2.showName();

改成與系統對象類似的寫法
1、首字母大寫
2、New關鍵字提取
3、this指向為新創建的對象

/* 當new去調用一個函數：這個時候函數中的this就是創建出來的對象，而且函數的返回值直接就是this啦。（這叫做隱式返回） */
// new后面調用的函數：構造函數
function CreatePerson(name){
    this.name = name;
    this.showName = function(){
        alert(this.name);
    };
    // return obj; 隱式返回，所以這一行不用寫了
}

var p1 = new CreatePerson("小明");
p1.showName();
var p2 = new CreatePerson("小強");
p2.showName();

構造函數
用來創建對象的函數，叫做構造函數
存在的問題
1、對象的引用
2.浪費內存

/* 當new去調用一個函數：這個時候函數中的this就是創建出來的對象，而且函數的返回值直接就是this啦。（這叫做隱式返回） */

// new后面調用的函數：構造函數
function CreatePerson(name){
    this.name = name;
    this.showName = function(){
        alert(this.name);
    };
    // return obj; 隱式返回，所以這一行不用寫了
}
var p1 = new CreatePerson("小明");
p1.showName();
var p2 = new CreatePerson("小強");
p2.showName();

//alert(p1.showName == p2.showName); //false

/*
    var a = [1, 2, 3];
    var b = [1, 2, 3];

    alert(a == b); //false;
*/

/*
    var a = 5;
    var b = a;
    b += a;
    alert(b); //8
    alert(a); //5 基本類型：賦值的時候只是值的復制
*/

/*
    var a = [1, 2, 3]; 
    var b = a; 
    b.push(4);
    alert(b); //[1, 2, 3, 4]
    alert(a); //[1, 2, 3, 4] 對象類型：賦值不僅是值的復制，而且也是引用的傳遞
*/

/*
    var a = [1, 2, 3];
    var b = a;
    b = [1, 2, 3, 4];
    alert(b); //[1, 2, 3, 4]
    alert(a); //[1, 2, 3] 只要賦值就會在內存中重新生成，所以a，b互補影響
*/

/*
    var a = 5;
    var b = 5;
    alert(a == b); //true 基本類型的比較：只要值相同就可以
*/

/*
    var a = [1, 2, 3];
    var b = [1, 2, 3];
    alert(a == b); //false 對象類型：值和引用都相同才行
*/

/*
    var a = [1, 2, 3];
    var b = a;
    alert(a == b); //true
*/

概念
去改寫對象下面公用的方法或者屬性，讓公用的方法或者屬性在內存中僅存在一份（好處：提高性能）

學習原型

類比：原型就是CSS中的class（普通方法就是CSS中的style）

普通方法的優先級比原型要高

原型可以復用，普通方法不可以復用

var arr = []; 
arr.number = 10;
Array.prototype.number = 20;
alert(arr.number); //10 普通方法的優先級高于原型

//原型：prototype：要寫在構造函數下面
var arr = [1, 2, 3, 4, 5];
var arr2 = [2, 2, 2, 2, 2];
Array.prototype.sum = function(){
    var result = 0;
    for(var i=0; i
通過原型改寫工廠方式原則：

相同的屬性和方法可以加在原型上

混合的編程模式


function CreatePerson(name){
    this.name = name; //變化的，不能公用的屬性不能寫在原型上
}
CreatePerson.prototype.showName = function(){
    alert(this.name);
}   

var p1 = new CreatePerson("小明");
var p2 = new CreatePerson("小強");

alert(p1.showName == p2.showName); //true
混合的編程模式
//面向對象的寫法
function 構造函數(){
    this.屬性
}
構造函數.原型.方法 = function(){};

//面向對象的使用
var 對象1 = new 構造函數();
對象1.方法();
總結面向對象寫法:構造函數加屬性，原型加方法
面向對象的選項卡
原則
先寫出普通的寫法，然后改成面向對象寫法


普通方法變型

盡量不要出現函數嵌套函數

可以有全局變量

把onload中不是賦值的語句放到多帶帶的函數中




改成面向對象

全局變量就是屬性

函數就是方法

onload中創建對象

改this指向問題，要盡量讓面向對象中的this指向對象




1、先寫出普通方法



    
    
    
    


    

        
        
        
        
11111
        
22222
        
33333
    


2、普通方法變型



    
    
    
    


    

        
        
        
        
11111
        
22222
        
33333
    


關于this的指向
oDiv.onclick = function(){
    this: oDiv
};

---

oDiv.onclick = show;
function show(){
    this: oDiv
}

---

oDiv.onclick = function(){
    show();
};
function show(){
    this: window
}
改寫成面向對象



    
    
    
    


    

        
        
        
        
11111
        
22222
        
33333
    


面向對象的復用



    
    
    
    


    

        
        
        
        
11111
        
22222
        
33333
    

    

        
        
        
        
11111
        
22222
        
33333
    


面向對象的拖拽
注意

Event對象（event對象一定要寫到事件函數里面）

事件函數中用來阻止默認行為的return false也要寫到事件函數里面


!DOCTYPE html>


    
    
    
    


    



本課練習

為數組對象添加求和，最大值

為字符串對象添加判斷是不是最后一個字母

面向對象的選項卡

給選項卡添加一個自動播放的方法

任意學過的效果改寫成面向對象

面向對象的面試題


高級面向對象
包裝對象
JS基于原型的程序
String Number Boolean



    
    
    
    




給基本類型添加方法



    
    
    
    




原型鏈

實例對象與原型之間的連接，叫做原型鏈

proto (隱式連接)

Object對象類型是原型鏈的最外層





    
    
    
    




面向對象的一些屬性和方法
hasOwnProperty()看是不是對象自身下面的屬性



    
    
    
    




constructor查看對象的構造函數

每個原型都會自動添加constructor屬性

for in 的時候，有些屬性是找不到的

避免修改constructor屬性





    
    
    
    




for in循環，有些屬性找不到



    
    
    
    




instanceof運算符
對象與構造函數在原型鏈上是否有關系
可以用來作類型判斷



    
    
    
    




toString()
object上的方法



    
    
    
    




對象的繼承
什么是繼承

在原有對象的基礎上，略作修改，得到一個新的對象

不影響原有對象的功能


如何添加繼承

屬性：call

方法：for in

例子：繼承的拖拽


!DOCTYPE html>


    
    
    
    







    
    
    
    







    
    
    
    




繼承的拖拽



    
    
    
    
    


    

    



繼承的其他形式
1、類式繼承
利用構造函數（類）繼承的方式
2、原型繼承
借助原型來實現對象繼承對象
類式繼承



    
    
    
    




原型繼承



    
    
    
    





拷貝繼承：通用型的 有new或無new的時候都可以

類式繼承：適合通過new構造函數形式

原型繼承：比較適合無new的對象


組件開發
1、對象的多種表現形式

提高對象的復用性

如何配置參數和默認參數

例子：拖拽

例子：彈窗


2、什么是組件？

對面向對象的深入應用（UI組件、功能組件）

將配置參數、方法、事件、三者進行分離


3、創建自定義事件

有利于多人協作開發代碼

如何去掛載自定義事件與事件函數


4、例子：基于JQ的選項卡的組件開發模式
trigger() extend()等方法的使用
5、本課練習
組件開發的練習
http://tangram.baidu.com/magic/
如何配置參數和默認參數



    
    
    


    


拖拽的組件開發



    
    
    
    
    


    
 
    
 
    
 
    
 


彈窗的組件開發



    
    
    
    


    
    
    

    
    


理解自定義事件



    
    
    


    


用原生js實現自定義事件



    
    
    


    
div
    span

配置、方法、自定義事件分離
——正規組件的寫法——基于拖拽的組件進行的修改



    
    
    
    
    


    
 
    
 
    
 
    
 


用JQ實現選項卡的組件開發



    
    
    
    
    


    

        
        
        
        
111111
        
222222
        
333333
    
    

        
        
        
        
111111
        
222222
        
333333
    
    

        
        
        
        
111111
        
222222
        
333333
    
    

        
        
        
        
111111
        
222222
        
333333