javascript面向对象与封装

最新推荐文章于 2025-08-22 11:32:18 发布

转载最新推荐文章于 2025-08-22 11:32:18 发布 · 308 阅读

文章标签：

#javascript #function #jquery #测试

本文通过实例展示了JavaScript中对象、函数的定义与使用，包括静态对象的创建、函数对象的封装与继承过程，以及如何利用jQuery声明组件。重点阐述了属性赋值、方法调用、组件继承等关键概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//声明一个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 : '测试面板'
});