javascript面向對象與封裝

//聲明一個javascript對象:
var a = {};

//聲明一個函數對象:
var a = function(){}

//聲明靜態對象
var a = {
    name : "靜態對象",
    getName : function(){
        return this.name;
    }
};
alert(a.getName());//外部調用

//函數對象的封裝與繼承
function A(name){
    var id = 'id';//私有屬性,不可繼承,外部無法調用
    this.name = name;
    this.getName = function(){
        return this.name;
    }
    //在公有方法中給屬性賦值,有時會出現在函數內部值是有的,但是出了這個
    //函數以後值就沒有了,這種情況需要這麼處理:
    this.setName = function(name){
        var obj = this;
        obj.name = name;
    }
}

//如何繼承
function B(name){
    this.base = B;//聲明繼承
    this.base(name);//繼承構造函數
    
    //重寫方法
    this.getName = function(){
        //因爲是繼承關係,所以可以將父類的屬性當做本身的屬性來用
        //如果想調用父類的方法,可以使用base:this.base.getName();
        return this.name+"__子類";
    }
    //子類自己的方法
    this.alertName = function(){
        alert(this.name);
    }
}
B.prototype = A;


var a = new A('父類');
//只能調用屬性和自身的方法
alert(a.name);//父類
alert(a.getName());//父類

var b = new B("子類");
//可以調用父類的屬性、方法和自身的方法
alert(b.name);//子類
alert(b.getName);//子類__子類
b.alertName()//子類

//jquery聲明組件
(function($){
    $.fn.panel = function(settings){
        var opts = $.extend({}, $.fn.panel.defaults, settings);
        
    }
    $.fn.panel.defaults = {
        title : '',
        width : 200,
        height : 200
    }
})(jQuery);

$('#id').panel({//外部調用組件
    title : '測試面板'
});
 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章