淺談:javascript的面向對象編程之基礎知識的介紹

在進入javascript的面對對象以前，咱們先來介紹一下javascript的幾個概念。

一、javascript的面向對象的基本概念

function aa(){
    
}

/*
 * 這裏的aa，在咱們之前看來他是一個函數，確實如此，可是從如今的角度來看
 * aa不只僅是一個函數，他仍是一個對象。在javascript中，一切都是對象，函數也不例外
 * 咱們能夠給對象的屬性賦值，例如aa.b = 5,還能夠獲取對象的值，例如
 * 這種賦值能夠直接賦值，不須要聲明，直接aa.屬性=xxx,便可爲aa的某個屬性直接賦值
 * alert(aa.5)。
 */
aa.b = 5;
alert(aa.b);

//你也能夠這樣

function bb(){
    alert("bb");
}

aa.d = bb;
aa.d();//在網頁上顯示bb
/*
 * 經過上面的例子咱們能夠發現，aa這個對象(函數)的屬性不只能夠是普通的變量
 * 也能夠是對象屬性。bb也是一個對象，bb也能夠成爲aa對象的一個屬性
 * 和java的屬性相似，屬性既能夠是普通類型，也能夠是引用類型
 */


//你還能夠這樣，建立一個json格式的對象，把json格式的對象放入對象aa中

var json ={//建立一個json格式的對象
        "name":"zhangSan"
};

aa.objectJson = json;//讓aa中objectJson屬性賦值爲json
alert(aa.objectJson.name);//在網頁上能夠看到zhangSan


/*
 * 在aa對象(函數)中,aa裏面的屬性能夠是普通變量，函數(對象類型)，也能夠json格式的對象等等
 */

二、javascript的返回值

/*
 * js函數的返回值
 * 咱們以前見到的js返回的都是一個變量
 */

function fun(){
    return 5;
}

alert(fun());


/*
 * 可是，因爲咱們明確了對象的概念，因此返回值固然也能夠是對象
 * 在函數(對象)內部定義函數
 */

function cc(){
    var i=0;
    function dd(){
        i++;
        return i;
    }
    
    return dd;//返回值變成了一個對象
}


//調用函數
var cfun = cc();
alert(cfun());//顯示1


/*
 * 下面咱們來作一個練習來幫助咱們理解js的返回值
 * 需求：調用一個Person函數，返回一個對象，該對象中有setPid,getPid,setPname,getPname方法
 * 
 * 分析：能夠這麼去理解。返回一個json格式的對象，在json格式對象裏面
 * 使用鍵值對的方式，只不過鍵是函數(對象)
 */

function person(){
    return{
        setPid:function(pid){
            this.pid = pid;
        },
        
        getPid:function(){
            return this.pid;
        },
        
        setPname:function(pname){
            this.pname = pname;
        },
        
        getPname:function(){
            return this.pname;
        } 
    };
}

var p = person();

//使用對象的屬性方法
p.setPid("2");
p.setPname("zhangSan");
alert(p.getPid());
alert(p.getPname());

 

 

三、javascript原型的概念

function person(){
    
}

function student(){
    
}

/*
 * 這個屬性a只是person對象私有，可是student對象並無該屬性，
 * 若是想讓student有person的屬性，怎麼辦呢?
 * 
 * 這個時候，就須要引入原型(prototype)的概念
 * 
 * 原型是什麼：原型是一個對象，其餘對象能夠經過它實現屬性繼承。
 * 任何一個對象都有原型嗎?:是的
 *
 * 
 * 哪些對象有原型
    全部的對象在默認的狀況下都有一個原型，由於原型自己也是對象，
    因此每一個原型自身又有一個原型(只有一種例外，默認的對象原型在原型鏈的頂端。更多關於原型鏈的將在後面介紹)
 */
person.a = 5;

/*
 * 若是student想要person對象的屬性
 * 咱們上面說過，一個函數，他是對象，
 * 在這裏一個函數也是一個構造器函數，經過下面的例子能夠看出，student也是一個構造器函數
 * var s = new student();
 * 
 */

student.prototype = person;//把person的原型屬性給了student的原型
var s = new student();
alert(s.a);//在建立student對象的時候，就可使用原型裏面的屬性了




function man(){
    
}
/*
 * 咱們能夠打印出一下man這個對象的構造器,下面的就是man的構造器
 * function Function() {
        [native code]
    }
 */
alert(man.constructor);//上面註釋中的結果

/*
 * 咱們也能夠給原型進行這樣的賦值
 * 也就是說，man原型能夠是一個json類型的對象
 */

man.prototype = {
        aa:function(){
            
        },
        
        bb:function(){
            
        }
};

/**
 * 對原型的總結：
 * 一、任何一個對象都有構造器
 * 二、全部的對象都有原型
 * 三、經過構造器函數.prototype.屬性的方法能夠給原型添加屬性
 */

 

 

四、javascript閉包的概念

//仍是來舉個例子
function person(){
    
}

person.a=5;
/*
 * 咱們知道，a是person對象的一個屬性，可是這個person對象的屬性a
 * 使用者均可以訪問，並且還能夠修改a的屬性值
 * 可是若是我定義了一個對象，有一些屬性很重要，我不想讓外部去修改他，怎麼辦？
 * 這就須要使用到閉包。
 * 
 * 對閉包的理解和說明
 *     一、在函數內部定義的函數或者變量沒法在外面訪問
 *  二、在外部訪問函數內部函數或者變量的過程叫作閉包
 *  三、閉包很消耗內存，由於變量不會由於函數的銷燬而銷燬
 *  四、使用閉包使函數和變量具備了私有屬性
 *  五、閉包有閉包的範式
 *  
 *  閉包的範式：首先是兩個大括號()() 前一個大括號裏面放一個匿名函數，後一個大括號裏面放一個實參
 *              形參和實參對應，在匿名函數中，均可以使用形參
 *  (function(形參){})(實參)，說白了，也就是函數裏面放一個或者多個函數
 *  
 *  下面來看具體的例子
 * */

(function(a){
    var i=0;
    function aa(){
        alert("aa");
    }
})(5);

//alert(aa());//沒法訪問aa

/*
 * 可是又會出現一個問題，若是對象裏面我想提供一些方法，給外界使用，又能夠怎麼辦呢
 * 好比，我想把bb和cc方法給外界訪問，怎麼辦呢？
 * 能夠把函數變成實參的一個屬性，經過實參的屬性來進行調用
 * 說白了，就是在形參中把私有屬性添加成形參的屬性
 * 在外界經過實參獲取屬性(私有方法)，進行調用
 * 
 */

(function(a){
    function aa(){
        alert("aa");
    }
    
    function bb(){
        alert("bb");
    }
    
    
    function cc(){
        alert("cc");
        
    }
    
    /*
     * 在a(window)對象中，有一個openMethod的屬性，
     * 在屬性中返回了兩個函數(對象)
     * 
     */
    a.openMethod = function(){
        return {
            bb:bb,
            cc:cc
        };
    };
    
})(window);

var jsonMethods = window.openMethod();
jsonMethods.bb();//bb
jsonMethods.cc();//cc

/*
 * 閉包所解決的問題：
 * 一、解決了js面向對象過程當中私有屬性和私有對象的問題
 * 二、在函數內部定義的函數能夠在函數外部使用
 */

若是你打開jQuery的代碼，你會發現他使用的就是閉包

 

五、jQuery插件的製做

說到jQuery，是一個功能很強大的插件，並且使用的方法也很簡單，可是有些時候，他提供的方法或許並不能使咱們滿意

那咱們能不能在jQuery基礎上，定義本身的插件，用來針對咱們本身的項目，答案是能夠的。

 

在製做插件以前，咱們先來解析一下jQuery

在jQuery的最外層，是一個閉包。

//jQuery最外層是一個閉包
(function( window, undefined ) {
    
　　var jQuery = function( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        return new jQuery.fn.init( selector, context );
　　　　.....
　　　　//至關於把jQuery當作一個window對象的屬性，在外部經過window.Jquery來訪問,能夠推出$=jQuery
　　　　......
　　　　window.jQuery = window.$ = jQuery;
　　　　　　　　

    },

})(window);

//jQuery 就是一個很普通的函數，也是一個對象，仍是一個構造函數

如今你們終於明白閉包的重要性了吧，jQuery都使用閉包，想一想看閉包是有多重要

 

咱們之前使用jQuery大概有這麼兩種使用方法

$("#xx").val()

或者是

$.post();

對於第一種使用方法，首先獲取到一個對象，而後使用對象.val()來使用具體方法

對於第二種方法，直接$.post(),並無依賴域任何對象，直接使用

因此就產生了兩種不一樣類型的方法，原型方法和全局方法

原型方法就是針對某寫對象設計的，首先須要獲取到jQuery對象，而後對象.xx方法

全局方法就是不依賴於任何對象，直接能夠調用。

 

因此咱們製做jQuery插件就有了兩種方法，一是製做原型方法，而是製做全局方法

原型方法定義的規則：

$.fn.aa = function(){}  說明：$.fn = $.prototype

這裏的aa就是原型方法（在jQuery原型上定義的方法）

其實在jQuery內部也是這麼定義方法的

附：jQuery內部的部分代碼，能夠看出jQuery內部也是這麼定義原型方法

 

全局方法定義規則：

$.alert =function(msg){window.alert(msg)}

全局方法不須要通過對象，直接定義便可。

 

上面就是定義jQuery插件的方法，其實很簡單，就把jQuery當作一個對象，而且把定義在原型上面的方法稱爲原型方法，屬性方法稱爲全局方法

 

上面介紹的幾個概念我也只是簡單的說了一下，若是說的不夠詳細，你們能夠去網上看看視頻或者參考書或者搜一搜資料

上面的幾個概念對javascript面向對象編程很重要，但願你們能夠花點心思去弄懂。