0%
这是一片思考的空间 -- arthinking
Spring 重构&代码整洁之道 软件设计 JVM 并发编程 数据结构与算法 分布式 存储 网络 微服务 设计模式
Java技术栈 - 涉及Java技术体系

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();

欢迎关注我的其它发布渠道

订阅IT宅
内功修炼
Java技术栈
Java架构杂谈是IT宅精品文章公众号,欢迎订阅:
📄 网络基础知识:两万字长文50+张趣图带你领悟网络编程的内功心法 📄 HTTP发展史:三万长文50+趣图带你领悟web编程的内功心法 📄 HTTP/1.1:可扩展,可靠性,请求应答,无状态,明文传输 📄 HTTP/1.1报文详解:Method,URI,URL,消息头,消息体,状态行 📄 HTTP常用请求头大揭秘 📄 HTTPS:网络安全攻坚战 📄 HTTP/2:网络安全传输的快车道 📄 HTTP/3:让传输效率再一次起飞 📄 高性能网络编程:图解Socket核心内幕以及五大IO模型 📄 高性能网络编程:三分钟短文快速了解信号驱动式IO 📄 高性能网络编程:彻底弄懂IO复用 - IO处理杀手锏,带您深入了解select,poll,epoll 📄 高性能网络编程:异步IO:新时代的IO处理利器 📄 高性能网络编程:网络编程范式 - 高性能服务器就这么回事 📄 高性能网络编程:性能追击 - 万字长文30+图揭秘8大主流服务器程序线程模型
📄 Java内存模型:如果有人给你撕逼Java内存模型,就把这些问题甩给他 📄 一文带你彻底理解同步和锁的本质(干货) 📄 AQS与并发包中锁的通用实现 📄 ReentrantLock介绍与使用 📄 ReentrantReadWriteLock介绍与使用 📄 ReentrantLock的Condition原理解析 📄 如何优雅的中断线程 📄 如何优雅的挂起线程 📄 图解几个好玩的并发辅助工具类 📄 图解BlockingQueue阻塞队列
📄 消息队列那么多,为什么建议深入了解下RabbitMQ? 📄 高并发异步解耦利器:RocketMQ究竟强在哪里? 📄 Kafka必知必会18问:30+图带您看透Kafka
📄 洞悉MySQL底层架构:游走在缓冲与磁盘之间 📄 SQL运行内幕:从执行原理看调优的本质 📄 洞悉Redis技术内幕:缓存,数据结构,并发,集群与算法