JavaScript面向对象编程基础

在现代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类型语法

可以使用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; // 获取器执行
沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485