Javascript笔记 - 面向对象的Javascript编程

面向对象的Javascript编程:

Javascript本身是基于对象的,而不是基于类的。而Javascript的函数语言特性使其本身是可编程的,它可以编程你想要的任何形式。

下面来介绍如何使用Javascript进行面向对象风格的编程。

1、原型继承:

Javascript中级继承可以通过原型链来实现。在查找某个属性时,解释器会先在对象内部查找该属性,如果没有找到,则到其内部对象prototype上去查找,这样一直回溯整个原型链,直到找到该属性。下面举个例子:

//原型继承
function Base(){
this.baseFunc = function(){
alert(“baseFunc”);
}
}

function SubClass(){
this.subFunc = function(){
alert(“subFunc”);
}
}
SubClass.prototype = new Base();

var subClass = new SubClass();
subClass.subFunc();
subClass.baseFunc();

这种继承风格与传统的面向对象语言很不一样。

2、引用:

Javascript中的引用始终指向最终的对象:

//引用
var obj = {};
var ref = obj;
obj.name = “object”; //通过obj引用修改了实际的对象
alert(ref.name); //显然ref引用的对象也添加了name
obj = [“ab”,”cd”]; //obj指向了新的对象
obj.name = “newObject”; //为新的对象添加name属性
alert(ref.name); //ref还指向原来的对象

上面的obj只是指向了一个匿名对象,所以ref也不是直线obj,而是这个匿名对象。

3、new操作符

在Javascript中使用new操作符,和传统的OO编程不一样,不是通过构造器直接创建一个对象,而是首先创建了一个空的对象,然后调用Function的apply方法,将这个空对象作为第一个参数以及上下文参数传入apply方法,这样函数内部的this将会被这个空的对象所替代。

function User1(username){
this.username = username || “arthinking”;
this.getUsername = function(){
return this.username;
}
}
var user = new User1(“Jason”);
alert(user.getUsername());

上面的new User1()其实相当于下面两句代码:

var user = {};
User1.apply(user, [“Jason”]);

4、封装:

通过使用var定义局部变量封装属性,this.func定义公开的方法:

function User2(username){
//私有属性
var info = “User Info”;
//公有方法
this.getInfo = function(){
return info;
}
//公有属性
this.username = username;
}
var user2 = new User2(“arthinking”);
alert(user2.getInfo());
alert(user2.username);

5、为类添加静态变量:

User2.Flag = “Constant”;

在访问User2.Flag时,不需要实例化User2类,这一点与传统的面向对象的静态变量是一样的。

6、Base工具包:

http://dean.edwards.name/base/Base.js

Base是由Dean Edwards开发的一个Javascript的面向对象的基础包。该工具包只有140行代码,支持类的定义,封装,继承,子类调用父类的方法。不少项目都在使用Base作为底层的支持。

使用Base创建类时,需要给Base.extend方法传入一个JSON对象。该对象包括一个constructor构造方法。

//创建一个武器类
var Weapon = Base.extend({
constructor : function(name){
this.name = name;
},
name : null,
handle : function(){
alert(“使用”+ this.name +”攻击”);
}
});
//创建一个角色类
var Role = Base.extend({
constructor : function(roleName){
this.roleName = roleName;
},
roleName : null,
weapon : null,
attack : function(){
alert(this.roleName);
this.weapon.handle();
},
setWeapon : function(weapon){
this.weapon = weapon;
}
});
//实例化武器和角色
var sword = new Weapon(“剑”);
var role1 = new Role(“剑士”);
role1.setWeapon(sword);
role1.attack();

arthinking wechat
欢迎关注itzhai公众号