面向?qū)ο笫且环N編程思想

對(duì)象：可以添加屬性（變量）和方法（函數(shù)）；
面向?qū)ο髮?xiě)法特點(diǎn)：

    1、把功能寫(xiě)成一個(gè)函數(shù)；
    2、函數(shù)必須寫(xiě)在對(duì)象身上，調(diào)用的時(shí)候直接拿對(duì)象.方法名()；
    3、對(duì)象身上的功能可以繼承；
    4、this指向，在事件或者定時(shí)器里面是訪問(wèn)不到真正的this的，需要在外面存一下；

寫(xiě)法示例：
        function 構(gòu)造函數(shù) (){
            this.屬性=??；
        }
        構(gòu)造函數(shù).prototype.方法=??;
        
        var 實(shí)例=new 構(gòu)造函數(shù)();
        實(shí)例.方法();

一元運(yùn)算符，后面只能接函數(shù)，用來(lái)調(diào)用函數(shù)；
用new調(diào)用函數(shù)的過(guò)程：
    1、構(gòu)建一個(gè)空對(duì)象；
    2、把函數(shù)內(nèi)部的this指向創(chuàng)建的對(duì)象；
    3、在函數(shù)執(zhí)行完以后自動(dòng)返回剛才創(chuàng)建的那個(gè)對(duì)象，即使函數(shù)里面沒(méi)有return；假如函數(shù)后面有return的話會(huì)有兩種情況：
        A 、return后面是對(duì)象的話，則返回這個(gè)對(duì)象；
        B 、return后面是非對(duì)象的話，則返回一開(kāi)始new創(chuàng)建的對(duì)象；

注意：
    1、用new調(diào)用的函數(shù)永遠(yuǎn)返回一個(gè)對(duì)象，不管有沒(méi)有返回值；
    2、用new調(diào)用函數(shù)，這個(gè)函數(shù)一定是用來(lái)創(chuàng)建對(duì)象的，叫做構(gòu)造函數(shù)；

創(chuàng)建并初始化對(duì)象的函數(shù)，并且必須用new調(diào)用，不然和普通函數(shù)沒(méi)有區(qū)別；

        functon Person(name,age){
            this.name=name;
            this.age=age;
            this.say=function{
            console.log("my name is"+this.name);
            };
        };

new出來(lái)的都是構(gòu)造函數(shù)的實(shí)例，構(gòu)造函數(shù)就是實(shí)例化的過(guò)程；
構(gòu)造函數(shù)的問(wèn)題：性能問(wèn)題會(huì)造成資源浪費(fèi)；

概念：函數(shù)身上的屬性，每個(gè)函數(shù)都有，它的值是一個(gè)對(duì)象；
用途：因?yàn)樗且粋€(gè)對(duì)象，所以身上可以放屬性和方法，如果與構(gòu)造函數(shù)相結(jié)合，通過(guò)構(gòu)造函數(shù)創(chuàng)建的對(duì)象就會(huì)具有原型身上的屬性和方法；
建議把一些共用的屬性和方法放在構(gòu)造函數(shù)的原型身上；

對(duì)象身上的屬性，每個(gè)對(duì)象都有這個(gè)屬性；它的值也是一個(gè)對(duì)象，它的值就是它對(duì)應(yīng)的構(gòu)造函數(shù)的prototype的值；
實(shí)例.__proto__===構(gòu)造函數(shù).prototype;這句話解釋了為什么實(shí)例能夠繼承構(gòu)造函數(shù)身上的屬性和方法；

    functon Person(name,age){
        this.name=name;
        this.age=age;
    };
    this.prototype.say=function{
    console.log("my name is"+this.name);
    }; 
                
    var p1=new Person("peter",18);

  在這個(gè)例子中：p1.__proto__=Person.prototype;所以p1才能繼承Person構(gòu)造函數(shù)身上的屬性和方法；
   

對(duì)象與原型之間的關(guān)系（鏈接）                                                      
原型鏈查找規(guī)則：

在js中，當(dāng)我們?nèi)フ{(diào)用字符串，布爾值，數(shù)字的屬性和方法的時(shí)候，js會(huì)在內(nèi)部把這些基本數(shù)據(jù)類(lèi)型轉(zhuǎn)變成一個(gè)對(duì)應(yīng)的對(duì)象類(lèi)型（包裝對(duì)象），然后再調(diào)用這個(gè)包裝對(duì)象的屬性和方法；

包裝對(duì)象有：

String

Number

Boolear

注意：

null和undefined沒(méi)有包裝對(duì)象；

基本數(shù)據(jù)類(lèi)型只能使用對(duì)應(yīng)的包裝對(duì)象身上的屬性和方法；

作用:判斷一個(gè)屬性是不是自己對(duì)象身上的;

語(yǔ)法:對(duì)象.hasOwnProperty(屬性);
參數(shù):要檢測(cè)的屬性;

返回值:

**true**         *自身屬性*
**false**        *非自身屬性*

注意:
1、這個(gè)方法是Object身上的方法    
2、不會(huì)順著原型鏈往外面去查找屬性，只查找自身

概念: 每個(gè)對(duì)象身上都會(huì)有這個(gè)屬性，默認(rèn)指向該對(duì)象對(duì)應(yīng)的構(gòu)造函數(shù);
這個(gè)屬性不是放在對(duì)象身上，放在對(duì)應(yīng)的原型對(duì)象身上;

作用:查看對(duì)象的構(gòu)造函數(shù);
語(yǔ)法:對(duì)象.constructor;
返回值:對(duì)象的構(gòu)造函數(shù);他可以用來(lái)做數(shù)據(jù)類(lèi)型的判斷;

 constructor的問(wèn)題    ：constructor的值是可以修改的；
 
    function Person(name){
        this.name=name;
    }
    var p1=new Person("kaivon");
    console.log(p1);
    console.log(p1.constructor==Person);    //true
            
    p1.constructor=Array;
    console.log(p1.constructor==Array);        //true

作用：把對(duì)象類(lèi)型轉(zhuǎn)成字符串；
注意：系統(tǒng)對(duì)象身上的這個(gè)方法都是在對(duì)應(yīng)的原型身上；而自己寫(xiě)的構(gòu)造函數(shù)這個(gè)方法在達(dá)的Object原型身上
它可以用來(lái)做類(lèi)型判斷：

Object.prototype.toString.call( );

//用toString做類(lèi)型判斷
        var num=0;                  //[object Number]
        var str="kaivon";           //[object String]
        var b=true;                 //[object Boolean]
        var n=null;                 //[object Null]
        var u=undefined;            //[object Undefined]
        var arr1=[];                //[object Array]
        var obj1={};                //[object Object]
        var fn=function(){};        //[object Function]
        var d=new Date();           //[object Date]
        var re=new RegExp();        //[object RegExp]
        
        console.log(Object.prototype.toString.call(num));    

基本數(shù)據(jù)類(lèi)型復(fù)制：

var num1=123;
var num2=num1;//那么num2和num1就是一樣的，**復(fù)制了值**

var arr1=[1,2,3];
var arr2=arr1;

arr2.push(4);
//注意這個(gè)時(shí)候arr1和arr2的值；
console.log(arr2);              //[1,2,3,4]
console.log(arr1);              //[1,2,3,4]

arr1和arr2一樣的原因：復(fù)雜數(shù)據(jù)類(lèi)型復(fù)制的時(shí)候不僅僅是復(fù)制了值，還復(fù)制了引用地址，所以修改arr2時(shí)，那么arr1的地址和arr2其實(shí)還是一樣的，所以arr1的值也相應(yīng)改變了；

淺拷貝；

var obj1={a:10,b:20};               //如何復(fù)制呢？

function copy(obj){
    var newObj={};
    for(var attr in obj){
        newObj[attr]=obj[attr];
    }
    return newObj;
}
var obj2=copy(obj1);
//這時(shí)候的obj2和obj1看起來(lái)是一樣的，但是其實(shí)是不同的，有不同的引用地址；

深拷貝

深拷貝和淺拷貝的區(qū)別：
1、當(dāng)要復(fù)制的那個(gè)對(duì)象里面所有的值都是非對(duì)象的時(shí)候，用淺拷貝；
2、當(dāng)要復(fù)制的那個(gè)對(duì)象里面有對(duì)象的時(shí)候，用深拷貝；

var obj1={
    a:10,
    b:{
        c:20    //這時(shí)候?qū)ο罄锩孢€有對(duì)象；這時(shí)候怎么辦呢？
    }
}

//如果這時(shí)候還用上面的淺拷貝的話，那么修改復(fù)制后的值，原來(lái)對(duì)象里面的值也還是會(huì)改變，所以要用下面的辦法；

function deepCopy(obj){
    if(typeof obj!=="object"){
        return obj;
    }
    //上面的代碼是給了一個(gè)跳出條件，當(dāng)傳入的條件不是對(duì)象的時(shí)候就不需要遞歸了；
    if(obj instanceof Array){
        var newObj=[];
    }else{
        var newObj={};
    }
    for(var attr in obj){
        newObj[attr]=deepCopy(obj[attr]);
        //遞歸；當(dāng)對(duì)象里面的值還是對(duì)象的時(shí)候需要用到；
    }
    return newObj;
}

讓一個(gè)對(duì)象擁有另一個(gè)對(duì)象的屬性和方法，并且自己添加的屬性和方法不會(huì)影響原來(lái)的對(duì)象；

通過(guò)call的方法調(diào)用構(gòu)造函數(shù)來(lái)繼承屬性；

function Person(name,age){
                this.name=name;
                this.age=age;
            }
Person.prototype.say=function(){
                console.log("我叫"+this.name);
            }
//Person相當(dāng)于一個(gè)大類(lèi)，Coder相當(dāng)于一個(gè)小類(lèi)，他們是有共同的地方的；
function Coder(name,age,job){
                this.name=name;
                this.age=age;
                this.job=job;
            }
Coder.prototype.say=function(){
                console.log("我叫"+this.name);
            }
//通過(guò)屬性繼承，我們可以將小類(lèi)和大類(lèi)共同的部分簡(jiǎn)化如下：
function Coder(name,age,job){
                Person.call(this,name,age);
                
    //如果不用call的話，那么this的指向就是window了，所以要用call將指向指到當(dāng)前的this上面；
                this.job=job;
            }

通過(guò)for in 想要繼承的構(gòu)造函數(shù)的原型的方法去去繼承；

參考屬性繼承?的代碼：

for (var attr in Person.prototype){
    if(Person.prototype.hasOwnProperty(attr)){
        Coder.prototype[attr]=Person.prototype[attr];
    }
}

把一個(gè)效果或者方法用面向?qū)ο蟮姆椒ǚ庋b起來(lái)，只提供給用戶一些相關(guān)的方法和數(shù)據(jù)接口；（模塊化）

易擴(kuò)展、易維護(hù)、相互之間沒(méi)有影響

放在初始化函數(shù)里；

初始化函數(shù)放在構(gòu)造函數(shù)的原型身上，一般用init表示

需要寫(xiě)一個(gè)默認(rèn)參數(shù)放在構(gòu)造函數(shù)里面；

function Drag(obj){
    this.disX=0;
    this.disY=0;
    //下面的就是默認(rèn)參數(shù)，下面的函數(shù)都要用下面的參數(shù)；
    this.settings={
        id:"",          //這是必傳的；
        downFn:function{},
        moveFn:function{},
        upFn:function{}
    }
}
//下面這個(gè)叫做初始化函數(shù)；
Drag.prototype.init=function (opt) {
    //在初始化函數(shù)里面，拿用戶輸入來(lái)的參數(shù)覆蓋默認(rèn)參數(shù)；
    for(var attr in this.settings){
        if(this.settings.hasOwnProperty(attr)){
        //如果默認(rèn)參數(shù)里面有這個(gè)屬性的話，才會(huì)去覆蓋；
            this.settings[attr]=opt[attr];
        }
    }
    this.obj=document.getElementById(this.settings.id);
}
//用戶傳進(jìn)來(lái)的就叫做配置參數(shù)；是一個(gè)對(duì)象；               

放在原型里的函數(shù)；

概念：

除了系統(tǒng)自帶以外的事件叫做自定義事件；

有利于多人協(xié)作開(kāi)發(fā)，可擴(kuò)展js事件；

需要用到事件綁定，事件觸發(fā)器；

自定義事件其實(shí)就是調(diào)用函數(shù)，在指定的環(huán)境下讓事件觸發(fā)；

自定義事件三要素：

對(duì)象；

事件名；

事件處理函數(shù)；

可以利用對(duì)象數(shù)據(jù)結(jié)構(gòu)里面的key:value鍵值對(duì)的方式去把事件名和事件處理函數(shù)聯(lián)系起來(lái)； 把多個(gè)函數(shù)放到一個(gè)數(shù)組里面，循環(huán)數(shù)組里面的每個(gè)函數(shù)；

//定義事件
object.events={
    "事件名1":[fn1,fn2],
    "事件名2":[fn3,fn4,fn5]
}

//調(diào)用事件（循環(huán)去調(diào)用）

代碼實(shí)現(xiàn)示例

//事件綁定器，添加自定義事件；
function customEvent(obj,eventName,fn){
    /*  obj         對(duì)象名；
     *  eventName   對(duì)象的一個(gè)事件名，它的值是一個(gè)數(shù)組；
     *  fn          事件調(diào)用函數(shù)，它在數(shù)組里面；
     */
    //這里的"||"邏輯符號(hào)的意思是左邊為真走左邊，左邊為假走右邊；
    obj.events=obj.events||{};
    obj.events[eventName]=obj.events[eventName]||[];
    obj.events[eventName].push(fn);//push方法把函數(shù)添加到數(shù)組；
}
//事件觸發(fā)器；
function(obj,eventName){
    //觸發(fā)的時(shí)候要看看對(duì)象身上有沒(méi)有這個(gè)事件；
    if(obj.events[eventName]){
        for(var i=0;i