JavaScript中用户友好的对象模型
4.89/5 (5投票s)
JavaScript 中用户友好的对象模型
引言
对于初学者来说，理解 JavaScript 中的对象模型和继承原则并不容易。 我将尝试帮助你：要描述一个类，需要描述类构造函数（它只是一个简单的函数）。类方法和继承通过原型来描述。隐藏的方法和属性通过闭包实现。
但我觉得这种方式不太方便。 我将向你介绍一种更简单的方法。 让我们创建项目
<!DOCTYPE HTML>
<html>
<head>
<title>Sample project</title>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="http://a-web.me/styles/default/a-web.css" >
<!-- Scripts -->
<script type="text/javascript" src="http://a-web.me/scripts/a-web.js"></script>
</head>
<body>
<script type="text/javascript">
/**
* Entry point
*/
function main() {
}
</script>
</body>
</html>
主函数将在页面加载后自动调用。 在我们的示例中，HTML 代码没有改变，因此我只编写 JavaScript 代码。 让我们创建一个类 TMyClass。
/**
* My class
*/
var TMyClass = AWeb.class({
public : {
/**
* Constructor
*/
constructor : function() {
alert( "MyClass constructor" );
}
}
});
/**
* Entry point
*/
function main() {
var myClass = new TMyClass();
}
让我们添加 private 变量 "name" 和 public 方法 "getName"
/**
* My class
*/
var TMyClass = AWeb.class({
public : {
/**
* Constructor
*/
constructor : function( initValue ) {
this.name = initValue||"A-class";
},
/**
* Returns name
*/
getName : function() {
return this.name;
}
}
});
我需要指出的是，"name" 变量仅在类 TMyClass 中可用。 调用 "myClass.name" 将返回 undefined 值。 但是调用 "myClass.getName()" 将返回 "A-class" 值。
让我们创建一个继承类
/**
* My class
*/
var TMyInhClass = AWeb.class({
extends : TMyClass,
public : {
/**
* Constructor
*/
constructor : function() {
this.super( "B-class" );
}
}
});
继承类可以访问父类的所有 public 和 protected 方法。 这里有一个调用示例
/**
* Entry point
*/
function main() {
var myClass = new TMyClass(),
myInhClass = new TMyInhClass();
alert(
"myClass.getName() = " + myClass.getName() + "\n" +
"myInhClass.getName() = " + myInhClass.getName() + "\n\n" +
"myClass.name = " + myClass.name + "\n" +
"myInhClass.name() = " + myInhClass.name
);
}
完整的代码如下所示
<!DOCTYPE HTML>
<html>
<head>
<title>Sample project</title>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="http://a-web.me/styles/default/a-web.css" >
<!-- Scripts -->
<script type="text/javascript" src="http://a-web.me/scripts/a-web.js"></script>
</head>
<body>
<script type="text/javascript">
/**
* My class
*/
var TMyClass = AWeb.class({
public : {
/**
* Constructor
*/
constructor : function( initValue ) {
this.name = initValue||"A-class";
},
/**
* Returns name
*/
getName : function() {
return this.name;
}
}
});
/**
* My class
*/
var TMyInhClass = AWeb.class({
extends : TMyClass,
public : {
/**
* Constructor
*/
constructor : function() {
this.super( "B-class" );
}
}
});
/**
* Entry point
*/
function main() {
var myClass = new TMyClass(),
myInhClass = new TMyInhClass();
alert(
"myClass.getName() = " + myClass.getName() + "\n" +
"myInhClass.getName() = " + myInhClass.getName() + "\n\n" +
"myClass.name = " + myClass.name + "\n" +
"myInhClass.name() = " + myInhClass.name
);
}
</script>
</body>
</html>
非常简单。 我再次强调，private 方法和变量仅在类方法中可见。 示例使用了 AWeb Library。
如果这篇文章对某人有所帮助，我将向你介绍类的属性。 我将在下一篇文章中给出 protected 方法和类接口的示例。 感谢阅读。
关于该库的其他文章
我决定链接这些文章，因为互联网上的信息不多