日期:2014-05-16  浏览次数:20457 次

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 : '测试面板'
});
?