博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS中class的实现方式,另模拟dojo.declare
阅读量:6814 次
发布时间:2019-06-26

本文共 2824 字,大约阅读时间需要 9 分钟。

  hot3.png

首先写一个简单的类。

function Animal(nickName){    this.getNickName = function(){return nickName};}Animal.prototype.canMiaomiao=false;Animal.prototype.eat=function(){console.log("animal eat");};Animal.prototype.sleep=function(){console.log("animal sleep");};

上面实现了一个普通动物的类。nickName为其私有域,canSpeak为公有域。此类还有三个方法 getNickName, eat, sleep。

然后写一个子类。

function Cat(nickName, color) {    this.superClass(nickName);    this.getColor=function(){return color;};}Cat.prototype=new Animal();Cat.prototype.constructor=Cat;Cat.prototype.superClass=Animal;Cat.prototype.canMiaomiao=true;Cat.prototype.eat=function(){this.superClass.prototype.eat.call(this); console.log('cat eat');};Cat.prototype.catchMouse=function(){console.log('catch mouse');};

Cat继承Animal,多了一个私有域color,多了新方法catchMouse,重写了方法eat,在eat中还调用了父类中的方法。运行下面代码,看发生了什么。

var a = new Animal('animal');a.eat();a.sleep();a.getNickName();var b = new Cat('cat','black');b.eat();b.catchMouse();b.sleep();b.getColor();b.getNickName();

上面都是JS语法里面提供的方法。但这种方法只提供了单继承。如果想实现多继承,那需要引入新的方法mixin。在dojo中,mixin就是将一个object中的属性全部复制到另一个object。假设有两个父类A,B,现在需要设计一个子类,同时继承A和B,那么可以将A和B的属性全部mixin到C中,也可以C继承A后再minxin B。Dojo便使用了此方法实现多继承。

很多JS框架,都为了更好的结构化,模拟java似的面向对象。在java中,初始化一个类使用defineClass。dojo则设计了dojo.declare这一方法来声明一个类。下面的代码便定义了我们JS中的defineClass,虽然它只实现了单继承,但从中可见一斑。

// 传入参数为JSON, JSON中包含的properties如下。// className: /*String*/ // extend: /*function*/// constructor: /*function*/// methods and fields: /*properties*/// 下面代码不考虑容错性。function defineClass(/*JSON*/data) {    var className = data.className;    var constructor = data.constructor || function(){};    var superClass = data.extend || Object;    var proto = new superClass();    for (var property in data) {        proto[property] = data[property];    }    proto.constructor = constructor;    proto.superClass = superClass;    proto.className = className;    constructor.prototype=proto;    window[className] = constructor;}

有了以上这个简单的defineClass,我们可以换一种方式来动态的加载Animal和Cat类。

var AnimalClass = {    className:'Animal',    constructor: function(nickName){                    this.getNickName = function(){return nickName};                },	extend:null,	canMiaomiao:false,	eat:function(){console.log("animal eat");},	sleep:function(){console.log("animal sleep");}};defineClass(AnimalClass);var CatClass = {    className:'Cat',    constructor: function(nickName, color) {                    this.superClass(nickName);                    this.getColor=function(){return color;};                },	extend:Animal,	canMiaomiao:true,	eat:function(){this.superClass.prototype.eat.call(this); console.log('cat eat');},	catchMouse:function(){console.log('catch mouse');}};defineClass(CatClass);var a = new Animal('animal');var b = new Cat('cat');

以上只是简单的defineClass。Dojo的多继承比这要复杂很多,比如如何调用父类的方法。但是原理是非常相近的。这里就不再仔细分析了。如果有问题,请留言。

 

转载于:https://my.oschina.net/xpbug/blog/67558

你可能感兴趣的文章
InstallShield 常用常量
查看>>
Android Intent的几种用法全面总结
查看>>
发布一个打飞机游戏
查看>>
Websocket 与 Socket.IO、Socket
查看>>
virtualization technology设置
查看>>
StackPanel 弹出菜单 ContextMenu
查看>>
Android FM模块学习之四源码分析(五)
查看>>
MySQL服务器安装完之后如何调节性能
查看>>
三个关键字
查看>>
TCP/IP详解学习笔记(9)-TCP协议概述
查看>>
【翻译】地形教程-简介
查看>>
什么是Docker
查看>>
生产CPU使用率180%问题排查
查看>>
一些 gem
查看>>
qt creator 添加调试工具
查看>>
springmvc拦截器
查看>>
三篇文章了解 TiDB 技术内幕 —— 谈调度
查看>>
JsonSort 对json排序
查看>>
MySQL常识篇
查看>>
一起学Java7新功能扩展——深入历险分享(一)
查看>>