Javascript笔记 – 面向对象的Javascript编程
本文由发表于5年前 | Javascript | 评论数 1 |  被围观 3,786 views+
面向对象的Javascript编程:1、原型继承:2、引用:3、new操作符4、封装:5、为类添加静态变量:6、Base工具包:
面向对象的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();
除了文章中有特别说明,均为IT宅原创文章,转载请以链接形式注明出处。
本文链接:http://www.itzhai.com/javascript-note-object-oriented-javascript-programming.html
关键字: , ,
arthinking Java技术交流群:280755654,入门群:428693174 more
分享到:
 
2012 5/31
文章评论
    一条评论
给我留言

有人回复时邮件通知我
Javascript的相关文章
随机文章 本月热门 热评
1 设计模式笔记 – Observer 观察者模式 (Design Pattern) 2011/11/3
2 C++语法笔记 – C++简单程序设计 2011/9/3
3 Linux下find,sed,tr,grep,cut,wc等常用命令的使用和相关实例解析 2011/6/10
4 【转】在危机的边缘上 马斯克如何看待失败? 2013/11/4
5 jQuery中使用$.post提交Ajax请求及传参问题 2011/6/2
6 wordpress使用Delete-Revision插件删除多余的文章版本和优化数据库 2011/4/10
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

IT宅中的文章除了标题注明转载或有特别说明的文章,均为IT宅的技术知识总结,学习笔记或随笔。如果喜欢,请使用文章下面提供的分享组件。转载请注明出处并加入文章的原链接。 感谢大家的支持。

联系我们:admin@itzhai.com

Theme by arthinking. Copyright © 2011-2015 IT宅.com 保留所有权利.