在现代Web开发中,JavaScript不仅是客户端脚本语言,它还是一个强大的通用编程语言。过去使用JavaScript及其支持库(如jQuery和jQuery UI)来增强服务器端Java Web应用程序的用户界面。随着开始使用JavaScript库将MVC模式引入浏览器,不得不学习如何编写面向对象的模块化JavaScript代码。是的,可以用JavaScript进行面向对象编程。
JavaScript是动态的,这意味着当定义函数、表达式或变量时,它们是即时定义的。没有编译过程来检查语法或类型(像Java或C#这样的类型语言)。对象定义也是动态的,它们只是一组无序的键/值对。
以下是一个定义JavaScript对象的表达式:
var object = {};
这被称为初始化对象,它没有状态或可执行的方法。由于JavaScript是动态的,属性可以随时添加。使用以下表达式添加age和name属性:
object.age = 49;
object.name = "Clifford";
使用以下表达式显示对象的属性:
alert(object.age + ":" + object.name);
将显示 "49:Clifford"。
函数也是对象,用于创建方法。本质上,定义一个函数对象并将其分配给对象属性。以下定义了一个print函数,并分配并执行该方法:
object.print = function() {
return object.age + ":" + object.name;
};
使用以下表达式执行该方法:
console.log(object.print());
将显示 "49:Clifford"。
可以使用JSON类型语法定义一个完整的对象。以下是如何在单个表达式中创建一个“person”对象的示例:
var person = { name: "david", age: 40, print: function() { return this.name + ":" + this.age; } };
使用以下表达式执行该方法:
console.log(person.print());
将显示 "david:40"。
对象也可以定义为使用经典的“new”运算符创建,并指定初始化参数。任何分配给变量的函数都可以使用new命令,从而创建一个对象。
以下示例显示了如何定义构造函数,并接受名称和年龄值,这些值被分配给“Person”变量:
var Person = new function(name, age) {
this.name = name;
this.age = age;
this.print = function() {
return this.age + ":" + this.name;
};
};
只要“person”变量在作用域内,就可以创建并使用对象,如下所示:
var person = new Person("Clifford", 49);
person.print();
如所见,JavaScript没有像Java或C#这样的其他经典面向对象语言中的类。实例是通过原型创建的,因此,所有构造函数对象引用都有一个原型属性引用,可以用来扩展对象实现。
考虑String全局对象引用。它的原型引用可以用来扩展其功能,如下所示:
String.prototype.repeat = function(x) {
return (x > 1) ? this + new Array(x + 1).join(this) : this;
};
扩展后,可以这样使用:
"Hello".repeat(3); // 返回 "HelloHelloHello";
JavaScript没有继承机制,但通过使用原型,可以模拟它。以下示例定义了两个对象:Person和User。User构造函数对象定义了两个属性,但通过分配其原型,从“Person”对象继承属性和方法。以下是JavaScript实现的方式:
var Person = function() {
this.age;
this.name;
this.print = function() {
return "Age:" + this.age + " - Name: " + this.name;
};
};
var User = function() { };
function createUser() {
User.prototype = new Person();
var user = new User();
user.id;
user.password;
return user;
}
使用user对象如下所示:
var u = createUser();
alert(u.print() + " id:" + u.id + " password:" + u.password);
是的,JavaScript提供了对正式访问器的支持。这是一个较晚的添加,但确信所有较新的浏览器都支持访问器。它们反映了C#的实现,就像在Java中仍然需要实现它们一样。
真的很喜欢访问器/设置器代码块的隐藏方式。以下是如何将它们应用于一直在使用的示例对象的name属性:
var Person = function() {
this.age;
var name;
this.print = function() {
return "Age:" + this.age + " - Name: " + this.name;
};
this.__defineGetter__("name", function() {
return name;
});
this.__defineSetter__("name", function(val) {
name = val;
});
};
访问器/设置器方法就像属性一样被调用。以下是一个示例:
var person = new Person();
person.name = "Chris"; // 设置器执行
person.name; // 获取器执行