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

為對(duì)象添加屬性和方法

Object對(duì)象

this指向

創(chuàng)建兩個(gè)對(duì)象：重復(fù)代碼過(guò)多

//var obj = {};
var obj = new Object(); //創(chuàng)建了一個(gè)空的對(duì)象
obj.name = "小明"; //屬性
obj.showName = function(){ //方法
    alert(this.name);
}
obj.showName();
var obj2 = new Object(); 
obj2.name = "小強(qiáng)";
obj.showName = function(){
    alert(this.name);
}
obj2.showName();

面向?qū)ο笾械姆庋b函數(shù)

//工廠方式：封裝函數(shù)
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("小強(qiáng)");
p2.showName();

改成與系統(tǒng)對(duì)象類似的寫法
1、首字母大寫
2、New關(guān)鍵字提取
3、this指向?yàn)樾聞?chuàng)建的對(duì)象

/* 當(dāng)new去調(diào)用一個(gè)函數(shù)：這個(gè)時(shí)候函數(shù)中的this就是創(chuàng)建出來(lái)的對(duì)象，而且函數(shù)的返回值直接就是this啦。（這叫做隱式返回） */
// new后面調(diào)用的函數(shù)：構(gòu)造函數(shù)
function CreatePerson(name){
    this.name = name;
    this.showName = function(){
        alert(this.name);
    };
    // return obj; 隱式返回，所以這一行不用寫了
}

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

構(gòu)造函數(shù)
用來(lái)創(chuàng)建對(duì)象的函數(shù)，叫做構(gòu)造函數(shù)
存在的問(wèn)題
1、對(duì)象的引用
2.浪費(fèi)內(nèi)存

/* 當(dāng)new去調(diào)用一個(gè)函數(shù)：這個(gè)時(shí)候函數(shù)中的this就是創(chuàng)建出來(lái)的對(duì)象，而且函數(shù)的返回值直接就是this啦。（這叫做隱式返回） */

// new后面調(diào)用的函數(shù)：構(gòu)造函數(shù)
function CreatePerson(name){
    this.name = name;
    this.showName = function(){
        alert(this.name);
    };
    // return obj; 隱式返回，所以這一行不用寫了
}
var p1 = new CreatePerson("小明");
p1.showName();
var p2 = new CreatePerson("小強(qiáng)");
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 基本類型：賦值的時(shí)候只是值的復(fù)制
*/

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

/*
    var a = [1, 2, 3];
    var b = a;
    b = [1, 2, 3, 4];
    alert(b); //[1, 2, 3, 4]
    alert(a); //[1, 2, 3] 只要賦值就會(huì)在內(nèi)存中重新生成，所以a，b互補(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 對(duì)象類型：值和引用都相同才行
*/

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

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

學(xué)習(xí)原型

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

普通方法的優(yōu)先級(jí)比原型要高

原型可以復(fù)用，普通方法不可以復(fù)用

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

//原型：prototype：要寫在構(gòu)造函數(shù)下面
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
通過(guò)原型改寫工廠方式原則：

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

混合的編程模式


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

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

alert(p1.showName == p2.showName); //true
混合的編程模式
//面向?qū)ο蟮膶懛?function 構(gòu)造函數(shù)(){
    this.屬性
}
構(gòu)造函數(shù).原型.方法 = function(){};

//面向?qū)ο蟮氖褂?var 對(duì)象1 = new 構(gòu)造函數(shù)();
對(duì)象1.方法();
總結(jié)面向?qū)ο髮懛?構(gòu)造函數(shù)加屬性，原型加方法
面向?qū)ο蟮倪x項(xiàng)卡
原則
先寫出普通的寫法，然后改成面向?qū)ο髮懛?/p>


普通方法變型

盡量不要出現(xiàn)函數(shù)嵌套函數(shù)

可以有全局變量

把onload中不是賦值的語(yǔ)句放到多帶帶的函數(shù)中




改成面向?qū)ο?/p>

全局變量就是屬性

函數(shù)就是方法

onload中創(chuàng)建對(duì)象

改this指向問(wèn)題，要盡量讓面向?qū)ο笾械膖his指向?qū)ο?/p>



1、先寫出普通方法



    
    
    
    


    

        
        
        
        
11111
        
22222
        
33333
    


2、普通方法變型



    
    
    
    


    

        
        
        
        
11111
        
22222
        
33333
    


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

---

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

---

oDiv.onclick = function(){
    show();
};
function show(){
    this: window
}
改寫成面向?qū)ο?/strong>




    
    
    
    


    

        
        
        
        
11111
        
22222
        
33333
    


面向?qū)ο蟮膹?fù)用



    
    
    
    


    

        
        
        
        
11111
        
22222
        
33333
    

    

        
        
        
        
11111
        
22222
        
33333
    


面向?qū)ο蟮耐献?/b>
注意

Event對(duì)象（event對(duì)象一定要寫到事件函數(shù)里面）

事件函數(shù)中用來(lái)阻止默認(rèn)行為的return false也要寫到事件函數(shù)里面


!DOCTYPE html>


    
    
    
    




給基本類型添加方法



    
    
    
    




原型鏈

實(shí)例對(duì)象與原型之間的連接，叫做原型鏈

proto (隱式連接)

Object對(duì)象類型是原型鏈的最外層





    
    
    
    




toString()
object上的方法



    
    
    
    




對(duì)象的繼承
什么是繼承

在原有對(duì)象的基礎(chǔ)上，略作修改，得到一個(gè)新的對(duì)象

不影響原有對(duì)象的功能


如何添加繼承

屬性：call

方法：for in

例子：繼承的拖拽


!DOCTYPE html>


    
    
    
    







    
    
    
    







    
    
    
    




繼承的拖拽



    
    
    
    
    


    

    



繼承的其他形式
1、類式繼承
利用構(gòu)造函數(shù)（類）繼承的方式
2、原型繼承
借助原型來(lái)實(shí)現(xiàn)對(duì)象繼承對(duì)象
類式繼承



    
    
    
    




原型繼承



    
    
    
    





拷貝繼承：通用型的 有new或無(wú)new的時(shí)候都可以

類式繼承：適合通過(guò)new構(gòu)造函數(shù)形式

原型繼承：比較適合無(wú)new的對(duì)象


組件開發(fā)
1、對(duì)象的多種表現(xiàn)形式

提高對(duì)象的復(fù)用性

如何配置參數(shù)和默認(rèn)參數(shù)

例子：拖拽

例子：彈窗


2、什么是組件？

對(duì)面向?qū)ο蟮纳钊霊?yīng)用（UI組件、功能組件）

將配置參數(shù)、方法、事件、三者進(jìn)行分離


3、創(chuàng)建自定義事件

有利于多人協(xié)作開發(fā)代碼

如何去掛載自定義事件與事件函數(shù)


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



    
    
    


    


拖拽的組件開發(fā)



    
    
    
    
    


    
 
    
 
    
 
    
 


彈窗的組件開發(fā)



    
    
    
    


    
    
    

    
    


理解自定義事件



    
    
    


    


用原生js實(shí)現(xiàn)自定義事件



    
    
    


    
div
    span

配置、方法、自定義事件分離
——正規(guī)組件的寫法——基于拖拽的組件進(jìn)行的修改



    
    
    
    
    


    
 
    
 
    
 
    
 


用JQ實(shí)現(xiàn)選項(xiàng)卡的組件開發(fā)



    
    
    
    
    


    

        
        
        
        
111111
        
222222
        
333333
    
    

        
        
        
        
111111
        
222222
        
333333
    
    

        
        
        
        
111111
        
222222
        
333333
    
    

        
        
        
        
111111
        
222222
        
333333