JavaScript 模拟类机制及私有变量的方法及思路

在使用一些 Javascript 框架时，或许会看到类似的代码


代码如下:

　　var MyClass = new Class({
　　　　initialize: function(param, ...) {
　　　　　　this.param = param;
　　　　　　...
　　　　},
　　　　func1: function(...) {
　　　　　　...
　　　　}
　　});
　　var myObj = new MyClass(param);
　　myObj.func1(...);

这是一种典型的面向对象的类机制应用，与原生的 Javascript 类机制相比，显得更为清晰和自然。并且，在此基础上，实现类的继承也较为方便。那么，这是如何实现的呢？
众所周知，在 Javascript 中，将一个函数作为构造器，可以创建出一个对象，上面的代码可以简单的写成：


代码如下:

　　function MyClass(param) {
　　　　this.param = param;
　　　　this.func1 = function(..) {
　　　　　　...
　　　　};
　　}
　　var myObj = new MyClass(param);
　　myObj.func1();

其实还是蛮简单的，也不难理解。不过如果要构建一套大型的 Javascript 类库，可能就会比较混乱，从一堆代码中，要找出哪些是类，哪些是函数，哪些是类方法，哪些是类属性，是一件痛苦的事。
当然，这里并不是要比较它们的优劣，只是好奇 new Class 的实现方式而已。
在上面的代码中，使用 new MyClass() 这样的语句，意味着 MyClass 必须是一个函数，同时也就意味着 new Class 需要返回一个函数对象，从字面的意思上可以看出，函数 initialize 是当做构造函数来使用的，所以，new Class 返回的函数中，必须使用 initialize 来对对象进行初始化。基于这样的分析，可以得出以下代码：


代码如下:

　　function Class(argu) {
　　　　return function() {
　　　　　　var init = argu['initialize'] || function() {};  //如果没有构造函数 initialize，使用一个空函数作为默认构造函数
　　　　　　for(var p in argu) {
　　　　　　　　this[p] = argu[p];
　　　　　　}
　　　　　　init.apply(this, arguments); //使用当前函数的 this 来代替函数 initialize 原有的 this
　　　　}
　　}

上面的代码并不够严谨，但用来说明问题已经足够了。需要注意 init.apply(this, arguments) 这一句，这里有几个变量的指代，一个是 this，原本 initialize 中默认的 this，现在已被替代为返回的这个匿名函数的 this，而这个匿名函数，是通过 new Class 新建的自定义类的构造器。另外一个是 arguments，它指代的是匿名函数的参数，也就是上面的 new MyClass(param) 中的 param。
this 的转换有些让人头晕，那么有没有更为简单的方法呢？请看下面的代码：


代码如下:

　　function Class(argu) {
　　　　var obj = argu['initialize'] || function() {};
　　　　for(var p in argu) {
　　　　　　obj.prototype[p] = argu[p]; //注意，这里用的是 prototype
　　　　}
　　　　return obj; // 其實还是返回一個函數
　　}

呵呵，感觉直白了许多。
这就完成了一个简单的类机制的构建。通过这种机制，可以创建类的构造函数、方法及属性，但这些显然都是公有的，那么，如何实现私有变量及方法呢？
我们知道，Javascript 类的私有变量可以通过闭包的机制来完成。但使用 new Class({...}) 的方式转换后，显然很难形成有效的闭包。如何绕过这个问题呢？
Javascript 提供了两个方法：eval() 及函数对象的 toString() 方法，前者较为常见，而后者，可用于获取函数的具体代码。通过这两个方法，可以简单的模拟类的私有变量：


代码如下:

　　function Class(argu) {
　　　　var _ = argu['private'] || {};
　　　　eval('var obj = ' + (argu['initialize'] || function() {}).toString());
　　　　for(var p in argu) {
　　　　　　if(p == 'initialize' || p == 'private')
　　　　　　　　continue;
　　　　　　if(typeof argu[p] == 'function')
　　　　　　　　eval('obj.prototype[p] = ' + argu[p].toString());
　　　　　　else
　　　　　　　　obj.prototype[p] = argu[p];
　　　　}
　　　　return obj;
　　}

通过函数对象的 toString() 方法提取出函数的代码，并使用 eval 方法执行这些代码，这样就可以构造出一个有效的闭包范围，从而实现私有机制。我们可以如下应用：


代码如下:

　　var Person = new Class({
　　　　private: {
　　　　　　height: 160,
　　　　　　weight: 50
　　　　},
　　　　initialize: function(name, height, weight) {
　　　　　　this.name = name;
　　　　　　_.height = height || _.height;
　　　　　　_.weight = weight || _.weight;
　　　　},
　　　　show: function() {
　　　　　　alert('Name:' + this.name + '/nheight:' + _.height + '/nweight:' + _.weight);
　　　　}
　　});
　　var my = new Person("Zh");
　　my.show();

看起来不不错，不过在实际应用中，其实并没有太大的用途。主要是效率上，相比通常的实现方式，大概需要多花四倍的时间。在大型类库的构建上，这是不可容忍的，而小型的应用中，实现下面的代码更为简单直接：


代码如下:

　　function MyClass(param) {
　　　　var privateVar = ...;
　　　　this.param = param;
　　　　this.func = function() {
　　　　　　alert(privateVar);
　　　　};
　　}

赞 (0)

相关推荐

  • JavaScript 高级篇之闭包、模拟类,继承（五）

    JavaScript 高级篇之闭包、模拟类,继承（五）

    一.javascript中的闭包 1.我们一起先来理解什么是函数的作用域. 2.调用的对象 结合例子: 复制代码 代码如下: function display(something) { function executeDisplay1() { document.write("我在帮老板打印:"+something+"<br />");//引用外部函数的something参数 } executeDisplay1();//函数display引用了内部函数 }

  • javascript设计模式Constructor（构造器）模式

    Constructor是一种在内存已分配给该对象的情况下,用于初始化新创建对象的特殊方法.Object构造器用于创建特定类型的对象–准备好对象以备使用,同事接收构造器可以使用参数,以在第一次创建对象时,设置成员属性和方法值. 对象创建 创新新对象,在javascript中通常有两种方法:  1.对象直面量方法 var newObj = {}; 2.构造器的简洁方法 var newObj = new Object(); 在Object构造器为特定的值创建对象封装,或者没有传递值时,它将创建一个肯那

  • JavaScript设计模式之工厂模式和构造器模式

    什么是模式 前阵子准备期末考试,劳神又伤身的,实在闲不得空来更新文章,今天和大家说说javascript中的设计模式. 首先呢,我们需要知道的是:模式是一种可复用的解决方案,而反模式呢就是针对某个问题的不良解决方案. js反模式常见例子 1.向setTimeout和setInterval传递字符串,而不是函数,这会触发eval()的内部使用. 2.在全局上下文中定义大量的变量污染全局命名空间 3.修改Object类的原型 4.以内联形式使用js,嵌入在HTML文件中的js代码是无法包含在外部单元

  • js模拟类继承小例子

    复制代码 代码如下: //使用原型继承,中间使用临时对象作为Child的原型属性,临时对象的原型属性再指向父类的原型, //防止所有子类和父类原型属性都指向通一个对象. //这样当修改子类的原型属性,就不会影响其他子类和父类 function extend(Child, Parent) { var F = function(){}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.prototype.constru

  • 在JavaScript中模拟类(class)及类的继承关系

    Javascipt语法不支持"类"(class)[es6已经支持],但是有模拟类的方法.今天我主要谈谈Javascipt中模拟"类"的方法及js中继承的总结和回顾. js中实现"类"与继承,既是重点,又是难点.很多同学可能都对js中"类"与继承都有所了解,但是深入剖析的时候,感觉力不从心.模棱两可. 我们先来总结一下js定义"类"的几种方法: 方法一:构造函数法 这个方法是比较经典的方法,我们会经常见到.生

  • 详解JavaScript中的构造器Constructor模式

    详解JavaScript中的构造器Constructor模式

    构造器模式简单描述(看图): 构造器Constructor不能被继承,因此不能重写Overriding,但可以被重载Overloading.构造器用于创建特定类型对象--准备好对象以备使用,同时接收构造器可以使用的参数,以在第一次创建对象时,设置成员属性和方法的值 1.创建对象 新对象创建的两种方法 var newObject={}; var newObject=new object();//object 构造器的简洁记法 2.基本Constructor Javascript不支持类的情况下对象

  • JavaScript中利用构造器函数模拟类的方法

    前言 本文小编带大家一起学习的是在 JavaScript 中使用构造器函数(construcor function)模拟类.下面话不多说,感兴趣的朋友们下面来一起看看吧. 构造器函数简介 你可以使用 ES6 的 class 关键字来实现类,不过我建议你使用传统的构造器函数来模拟类,因为这样可以给人一种你是个 JavaScript 老手的错觉,哈哈! 什么是构造器函数?构造器函数是编写对象的方法之一.一般情况下,你可以这样编写一个对象: var obj = { a:1, b:2 }; 但也可以使用

  • JavaScript中使用构造器创建对象无需new的情况说明

    如下 复制代码 代码如下: function Person(name, age) { this.name = name; this.age = age; } var p = new Person('lily', 20); 发现某些库代码中创建正则对象的方式无需new,这让人感到奇怪.如下 复制代码 代码如下: var reg = RegExp('^he$'); 测试发现使用或不使用new,最后返回的都是正则对象,且typeof它们都是"object". 复制代码 代码如下: var r

  • javascript asp教程第三课 new String() 构造器

    javascript asp教程第三课 new String() 构造器

    开始:new String() 是本课程计划中较早出现的另一个让人感觉到奇怪的地方.但和转义字符一样, new String()是创建一个成功的asp javascript应用的必须元素.下面是本课的两个脚本:下面是实际上承担重量的脚本:行为中的new String( ):现在我们来看看下面的asp行.Request.Form 我们将在后面有独立的课程来讲授.下面才是我们现在要讲的重点.在request.form中所持有的数据(来自用户的数据)并不是一个javascript数据类型.相反,它是一

  • JavaScript 模拟类机制及私有变量的方法及思路

    在使用一些 Javascript 框架时,或许会看到类似的代码 复制代码 代码如下: var MyClass = new Class({ initialize: function(param, ...) { this.param = param; ... }, func1: function(...) { ... } }); var myObj = new MyClass(param); myObj.func1(...); 这是一种典型的面向对象的类机制应用,与原生的 Javascript 类机

  • Python类如何定义私有变量

    这篇文章主要介绍了Python类如何定义私有变量,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 前言 在java 的类中,如果你要定义一个私有变量,可以用修饰词 private,那么在Python 的类中呢,Python中没public private之类的修饰词,那Python 是如何定义私有变量的呢? 私有变量 在Python 类中定义私有变量,只要在变量前加 __ (两个下划线) ,那么该类的实例就不能引用了,看下面实例 >>>

  • JavaScript模拟重力状态下抛物运动的方法

    本文实例讲述了JavaScript模拟重力状态下抛物运动的方法.分享给大家供大家参考.具体分析如下: 这段JavaScript代码模拟重力状态下的抛物运动,可设置以下参数:横向初速度.纵向初速度.重力加速度(如果这个加速度是一个随时间变化的值,就能达到其他非匀加速运动的效果了).动画间隔时间等,相对专业 <!doctype html> <html> <head> <title>js抛物运动</title> <meta charset=&qu

  • Javascript 创建类并动态添加属性及方法的简单实现

    JavaScript 是一种很强的面向对象的语言,支持创建实例之后再添加属性和方法,虽然是小技巧,用的时候容易忘记,今天写了一个很小的例子,记录在这里,仅供参考. function MyClass() { //This function is same as a constructer alert("New Object Created"); } //Creating Object var MyObject = new MyClass (); NewObject.prototype =

  • javascript入门基础之私有变量

    先看javascript的普通函数用法 复制代码 代码如下: function sum(a,b){ var c = 10; function add(){ c++; } add(); return a + b + c; } var d = sum(4,5); alert(d) // 20 可以看出,外部要和函数sum进行交互,只能通过调用和返回值形式,无法访问里面的参数c和内部函数add().这对于函数来说属于正常逻辑. 接下来看javascript的类用法 复制代码 代码如下: functio

  • JavaScript 声明私有变量的两种方式

    前言 JavaScript并不像别的语言,能使用关键字来声明私有变量. 我了解的JavaScript能用来声明私有变量的方式有两种,一种是使用闭包,一种是使用WeakMap. 闭包 闭包的描述有很多种,比如: 能访问其它函数作用域的函数: 内部函数访问外部函数作用域的桥梁: ...... 使用闭包构建私有变量的逻辑在于: 1.在外部函数中声明变量和内部函数: 2.使用内部函数访问或者修改变量值: 3.在外部函数内返回内部函数: function outside(){ let val = 123;

  • Javascript定义类（class）的三种方法详解

    Javascript定义类（class）的三种方法详解

    将近20年前,Javascript诞生的时候,只是一种简单的网页脚本语言.如果你忘了填写用户名,它就跳出一个警告. 如今,它变得几乎无所不能,从前端到后端,有着各种匪夷所思的用途.程序员用它完成越来越庞大的项目. Javascript代码的复杂度也直线上升.单个网页包含10000行Javascript代码,早就司空见惯.2010年,一个工程师透露,Gmail的代码长度是443000行! 编写和维护如此复杂的代码,必须使用模块化策略.目前,业界的主流做法是采用"面向对象编程".因此,Ja

  • 浅谈Python中的私有变量

    私有变量表示方法 在变量前加上两个下划线的是私有变量. class Teacher(): def __init__(self,name,level): self.__name=name self.__level=level #获取老师的等级 def get_level(self): return self.__level #获取名字 def get_in_name(self): return self.__name 动态方法无法读取私有变量 即使是动态方法也无法读取私有变量,强行读取会报错. #

  • Javascript创建类和对象详解

    现总结一下Javascript创建类和对象的几种方法: 1.原始的创建方法: <script type="text/javascript"> var person = new Object(); person.name="Amy"; person.sex="Woman"; person.show=function(){ document.write("name is: "+this.name+" ; se

  • javascript模拟实现ajax加载框实例

    本文实例讲述了javascript模拟实现ajax加载框的方法,分享给大家供大家参考.具体方法如下: 复制代码 代码如下: function loading(p_value,str) { if (p_value) { if (!document.getElementById("load_area")) { var para1 = document.createElement("span"); var node=document.createTextNode(str)

随机推荐