最近在学习JavaScript基础,在学习到面向对象编程时,学习到在JavaScript中实现模块化的方法,其中一个重要的点是如何封装私有变量。

实现封装私有变量的方法主要是:

  1. 使用构造函数

    function StringBuilder() {
    var buffer = []; this.add = function (str) {
    buffer.push(str);
    }; this.toString = function () {
    return buffer.join('');
    };
    }
    // 上面这种做法有个缺点,就是每生成一个新的实例,其中的方法就会生成一个新的实例,造成内存浪费,因此做如下改进
    function StringBuilder() {
    this._buffer = [];
    } StringBuilder.prototype = {
    constructor: StringBuilder,
    add: function (str) {
    this._buffer.push(str);
    },
    toString: function () {
    return this._buffer.join('');
    }
    };
    // 此时所有实例会共享这两个方法,不会重复生成
    // 但是问题又来了,我们封装的私有变量变得不私有了,在外部可以直接修改_buffer,如
    var sb = new StringBuilder();
    sb._buffer = 'hello, sb';
  2. 使用立即执行函数
    var module = (function() {
    function StringBuilder() {
    this._buffer = [];
    } StringBuilder.prototype = {
    constructor: StringBuilder,
    add: function (str) {
    this._buffer.push(str);
    },
    toString: function () {
    return this._buffer.join('');
    }
    }; function createStringBuilder() {
    var _sb = new StringBuilder();
    return {
    add: StringBuilder.prototype.add.bind(_sb),
    toString: StringBuilder.prototype.toString.bind(_sb)
    };
    } return {
    createStringBuilder: createStringBuilder
    }; })(); console.log(module); // { createStringBuilder: [Function: createStringBuilder] }
    var sb = module.createStringBuilder();
    sb.add('hello');
    sb.add('爱编程的小菜鸟');
    console.log(sb.toString()); // hello爱编程的小菜鸟

在立即执行函数中,重点在于createStringBuilder这个函数,这个函数实现了内外对接的接口,对内保护了StringBuilder的私有成员,对外又能提供需要访问的接口,实现了真正的私有变量封装。下面我们用一个简单的例子对上面的三种方式进行对比:

// 构造函数,var1无法被外界修改,但是每生成一个实例,fn都会被拷贝
function Class1() {
var var1 = 10;
this.fn = function() {
console.log(var1);
var1 += 1;
};
}
var c10 = new Class1();
var c11 = new Class1();
console.log(c10.var1); // undefined,变量不可被访问
console.log(c10 === c11); // false
c10.fn(); //
c11.fn(); //
c10.fn(); //
c11.fn(); // // 改进一下
function Class2() {
this._var1 = 10;
} Class2.prototype = {
constructor: Class2,
fn: function() {
console.log(this._var1);
this._var1 += 1;
}
};
var c20 = new Class2();
var c21 = new Class2();
c20.fn(); //
c20.fn(); //
c21.fn(); //
c21.fn(); //
console.log(c20._var1); // 11,变量可被访问
console.log(c20.fn === c21.fn); // true // 为了解决上述问题
var m = (function() {
function Class3() {
this.var1 = 10
}
Class3.prototype = {
constructor: Class3,
fn: function() {
console.log(this.var1);
this.var1 += 1;
}
}; function createClass3() {
var c3 = new Class3();
return {
fn: Class3.prototype.fn.bind(c3)
};
} return {
createClass3: createClass3
}
})();
var c30 = new m.createClass3();
var c31 = new m.createClass3();
c30.fn(); //
c30.fn(); //
c31.fn(); //
c31.fn(); //

JavaScript中为什么使用立即执行函数来封装模块?的更多相关文章

  1. JavaScript中的闭包与匿名函数

    知识内容: 1.预备知识 - 函数表达式 2.匿名函数 3.闭包 一.函数表达式 1.定义函数的两种方式 函数声明: 1 function func(arg0, arg1, arg2){ 2 // 函 ...

  2. JavaScript中常见的数组操作函数及用法

    JavaScript中常见的数组操作函数及用法 昨天写了个帖子,汇总了下常见的JavaScript中的字符串操作函数及用法.今天正好有时间,也去把JavaScript中常见的数组操作函数及用法总结一下 ...

  3. JavaScript中常见的字符串操作函数及用法

    JavaScript中常见的字符串操作函数及用法 最近几次参加前端实习生招聘的笔试,发现很多笔试题都会考到字符串的处理,比方说去哪儿网笔试题.淘宝的笔试题等.如果你经常参加笔试或者也是一个过来人,相信 ...

  4. 一篇文章把你带入到JavaScript中的闭包与高级函数

    在JavaScript中,函数是一等公民.JavaScript是一门面向对象的编程语言,但是同时也有很多函数式编程的特性,如Lambda表达式,闭包,高阶函数等,函数式编程时一种编程范式. funct ...

  5. 使用 JavaScript 中的 window 对象执行计时操作,完成一个抽奖程序

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 window 对象执行计时操作,完成一个抽奖程序 实现思路: 在 HTML 页面中放置背景图片.转盘和指针 3 张图片,并设置指 ...

  6. javascript中的两个定时函数setTimeOut()和setInterVal()的区别

    js中经常性要用到间隔几秒或暂停几秒执行某个函数, 简单介绍我从网上收集到setTimeOut()和setInterVal()的区别1.setInterVal()介绍 1)定义 setInterval ...

  7. JavaScript中的闭包和匿名函数

    JavaScript中的匿名函数及函数的闭包   1.匿名函数 2.闭包 3.举例 4.注意 1.匿名函数 函数是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途.匿名函数:就是没 ...

  8. javascript 中break、 continue、函数不能重载

    在javascript中,break与continue有着显著的差别. 如果遇到break语句,会终止最内层循环,无论后面还有多少计算. 如果遇到continue,只会终止此次循环,后面的自循环依然执 ...

  9. 谈谈javascript中的变量提升还有函数提升

    在很多面试题中,经常会看到关于变量提升,还有函数提升的题目,所以我就写一篇自己理解之后的随笔,方便之后的查阅和复习. 首先举个例子 foo();//undefined function foo(){ ...

随机推荐

  1. Python3解析html高级操作

    一.xpath相关 1.1 xpath获取节点下的所有内容 问题描述:xpath获取节点下的所有文本可通过“*//text()”实现,但如果想获取节点下的内容---包括文本和标签那就没有直接的办法. ...

  2. 从零开始 —— Canvas(一)

    从零开始-Canvas 1.颜色.样式和阴影 属性 a.fillStyle(设置或返回用于填充绘画的颜色.渐变或模式) 语法:context.fillStyle = color(颜色值) | grad ...

  3. PDF 补丁丁 0.6.1.3498 版重大更新:为文本PDF文档自动生成书签!

    新的 PDF 补丁丁开放了内部测试了很久的好用功能——自动书签. 这个功能可以在一分钟内快速生成文本型 PDF 文档的书签(说明:本功能分析文档中的文本,生成标题,故对扫描版的 PDF 文档无效). ...

  4. linux 查找指定进程并kill

    ps -ef | grep  php | grep -v 'grep' | awk '{print $2}'| xargs kill -9

  5. SQL通配符

    通配符可用于替代字符串中的任何其他字符. 在 SQL 中,通配符与 SQL LIKE 操作符一起使用. SQL 通配符用于搜索表中的数据. 在 SQL 中,可使用以下通配符: 通配符 描述 % 替代 ...

  6. Kali Linux Vmware虚拟机(新手)安装

    准备工作: 1.安装VMware workstation 软件 2.下载好kali linux 的ios系统文件 3.打开电脑的虚拟化支持(Intel VT-x/EPT或AMD-V/RVI(V)) 虚 ...

  7. 利用map和reduce编写一个str2float函数,把字符串'123.456'转换成浮点数123.456:

    #!/usr/bin/env python3 # -*- coding: utf-8 -*- from functools import reduce CHAR_TO_INT = { ': 0, ': ...

  8. Ubuntu中搭建强化学习平台(使用anaconda管理Python并安装tensorflow、opencv)

    首先介绍一下anaconda,annoconda是一个开源的Python发行版本,里面集成了python.conda等多个科学包及其依赖项.安装完成之后,就可以使用conda版本管理器进行管理,可以让 ...

  9. 手把手教你如何使用Cocos2d Console 进行html5项目发布

    手把手教你如何使用Cocos2d Console 进行html5项目发布   1.首先需要先安装Cocos2d Console运行需要的工具. 详情参见 这篇文章 http://www.cocoach ...

  10. Linux 虚拟文件系统概述

    转自:http://blog.csdn.net/u011373710/article/details/70198080 文章梗概 本文首先以“尽量不涉及源代码”的方式讨论Linux虚拟文件系统的存在的 ...