分享一些前端开发中最常用的JS代码片段以及理解 JS闭包

记得几年前刚工作那时，听到高大上的 JS闭包一词让我一头雾水，很多初学者也许和我当时一样困惑，其实闭包也并没那么高深莫测。

今天我写了篇简单的学习笔记希望能帮助大家轻松理解 JS闭包。
参考资料：1.《你所不知道的JavaScript-上卷》闭包和作用域章节、2. 阮一峰老师的《学习JavaScript闭包》
( 大家学习时为了更好理解，最好跟着本文内容在IDE或浏览器控制台中，敲一遍所有的示例代码 )

要彻底弄懂闭包，必须先理解 JS的变量作用域，变量分为: 全局变量和局部变量，JS的特殊之处在于：每个函数都会创建一个新的作用域，函数内部可以读取函数外部的变量，相反函数外部无法读取内部变量。

var a = 123;

function foo() {
console.log(a);
}

foo(); // 123

function foo() {
var a = 123;
}

console.log(a); // error，查找不到变量a的引用

为了更透彻的理解作用域，请思考以下代码：

function foo(a) {
var b = a * 2;

function bar(c) {
console.log( a, b, c );
  }

  bar( b * 3 );
}

foo(2); // 2, 4, 12

上面代码中有三个逐级嵌套的作用域，我们可以将它们想象成几个逐级包含的作用域气泡如下图：

分享一些前端开发中最常用的JS代码片段以及理解 JS闭包

作用域气泡是逐级包含的，图中最里面的紫色气泡被完全包在最外层的foo所创建的淡蓝色气泡里。

气泡 1：包含着整个全局作用域，其中只有一个标识符 foo
气泡 2：包含着函数foo 所创建的作用域，其中有三个标识符 a、b、bar
气泡 3：包含着函数bar 所创建的作用域，其中只有一个标识符 c

当JS引擎执行 console.log(a, b, c) 时，开始查找 a、b、c 这3个变量的引用，引擎首先从最内部的作用域即function bar(c) {…} 中开始查找，由于无法在这里找到 a，因此它会去上一级的 function foo() {…} 作用域中继续查找，结果在这里找到了 a ，引擎便使用了这个引用，对于变量b、c 的查找过程也是一样，引擎会逐级向上查找。

到这里，我们知道了作用域的规则是只能从内部向外部查找变量。

那如果想从作用域外部读取内部的变量呢？
一般情况当然是不行的，但有个办法！我们可以在函数内部再定义一个函数，再将内部这个函数作为返回值，看下面代码你就明白了：

function foo() {
var a = 2;

function bar() {
console.log( a ); // 2
  }

return bar;
}

var todo = foo();
todo(); // 输出结果为2 说明在函数foo的外部访问到了内部的变量a，妈妈快看呀 这就是闭包！

函数 bar 就是闭包！

没明白？
我来解释下原理，函数 bar 的作用域能访问 foo 的内部作用域，而函数 bar 被作为值返回，当 var todo =foo(); 执行了函数 foo 时，其实就将函数 bar 作为值引用类型传递给了 todo，当执行 todo() 时等于执行了bar()，这样在foo 外部访问到了内部的局部变量 a，所以我们看到输出结果为2。神奇的闭包让函数从外面作用域访问到了内部作用域的变量，原理其实就是局部函数 bar 在它自己所定义的作用域之外被执行了。

JS 中，通常一个函数执行完后，内部的整个作用域都会被销毁，被JS引擎的垃圾回收器回收，但闭包的出现阻止了这件事，上个例子中函数 foo 的作用域就不会销毁，因为它内部的作用域依然还存在，原来是本身在使用变量 a 的引用，而 bar 在 foo 的作用域之外被执行，当每次调用 todo() 时，便又访问到函数 foo 内部的变量 a 。
简而言之，这个例子中的函数 bar 就是一个闭包。

分享一些前端开发中最常用的JS代码片段以及理解 JS闭包

各种专业文献上的”闭包“（closure）定义的非常抽象，晦涩难懂。我的理解是，闭包就是能够读取其他函数内部变量的函数。由于在 Javascript 语言中，只有函数内部的子函数才能读取该函数的局部变量，因此可以把闭包简单理解成 “定义在一个函数内部的函数”。

在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以在函数外部读取内部的变量，另一个就是让这些变量的值始终保持在内存中。

其实在你写过的代码中到处都有闭包的身影，如果将函数当作第一级的值类型并到处传递时，你就会看到闭包在这些函数中的应用，如：定时器、事件监听器、Ajax请求、跨窗口通信、Web Workers 或任何其他异步或同步的任务中，只要使用了回调函数，那就是在使用闭包，下面举了几个闭包的例子：

// 闭包1
function wait(message) {
  setTimeout(function timer() {
console.log(message);
  }, 1000);
}

wait("Hello, closure!");

// 闭包2
function setupBot(name, selector) {
  $(selector).click(function () {
console.log("Activating" + name);
  });
}

setupBot("Closure Bot", "#bot");

// 等……
// 原来闭包无处不在啊

使用闭包的注意点：

(1) 由于闭包会使得函数中的变量都被保存在内存中，内存会消耗很大，如果滥用闭包，会造成网页的性能问题，在IE中还可能导致内存泄露。可以在退出函数之前，将不使用的局部变量全部删除 (设为null)。

(2) 闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

1. 使用!!操作符转换布尔值

有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值，如果存在就返回 true 值。为了做这样的验证，我们可以使用!!操作符来实现是非常的方便与简单。对于变量可以使用 !!variable 做检测，只要变量的值为:0、null、” “、undefined 或者 NaN 都将返回的是 false，反之返回的是 true。比如下面的示例：

function Account(cash) {
this.cash = cash;
this.hasMoney = !!cash;
}

var account = new Account(100.50);
console.log(account.cash); // 100.50
console.log(account.hasMoney); // true

var emptyAccount = new Account(0);
console.log(emptyAccount.cash); // 0
console.log(emptyAccount.hasMoney); // false

在这个示例中，只要account.cash的值大于0，那么account.hasMoney返回的值就是true。

2. 使用+将字符串转换成数字

这个技巧非常有用，其非常简单，可以交字符串数据转换成数字，不过其只适合用于字符串数据，否则将返回NaN，比如下面的示例：

function toNumber(strNumber) {
return +strNumber;
}

console.log(toNumber("1234")); // 1234
console.log(toNumber("ACB")); // NaN

这个也适用于 Date，在本例中，它将返回的是时间戳数字：

console.log(+new Date()) // 1461288164385

3. 并条件符

如果你写了一段这样的代码：

if (conected) {
    login();
}

你也可以将变量简写，并且使用 && 和函数连接在一起，比如上面的示例，可以简写成这样：

conected && login();

如果一些属性或函数存在于一个对象中，你也可以这样做检测，如下面的代码所示：

user && user.login();

4. 使用||运算符

在ES6中有默认参数这一特性。为了在老版本的浏览器中模拟这一特性，可以使用||操作符，并且将将默认值当做第二个参数传入。如果第一个参数返回的值为 false，那么第二个值将会认为是一个默认值。如下面这个示例：

function User(name, age) {
this.name = name || "Oliver Queen";
this.age = age || 27;
}

var user1 = new User();
console.log(user1.name); // Oliver Queen
console.log(user1.age); // 27

var user2 = new User("Barry Allen", 25);
console.log(user2.name); // Barry Allen
console.log(user2.age); // 25

5. 在循环中缓存array.length

这个技巧很简单，这个在处理一个很大的数组循环时，对性能影响将是非常大的。基本上，大家都会写一个这样的同步迭代的数组：

for(var i = 0; i < array.length; i++) {
console.log(array[i]);
}

如果是一个小型数组，这样做很好，如果你要处理的是一个大的数组，这段代码在每次迭代都将会重新计算数组的大小，这将会导致一些延误。为了避免这种现象出现，可以将 array.length 做一个缓存：

var length = array.length;

for(var i = 0; i < length; i++) {
console.log(array[i]);
}

也可以这样写：

for(var i = 0, length = array.length; i < length; i++) {
console.log(array[i]);
}

6. 检测对象中属性

当你需要检测一些属性是否存在，避免运行未定义的函数或属性时，这个小技巧就显得很有用。如果你打算定些一些跨兼容的浏览器代码，你也可能会用到这个小技巧。例如，你想使用 document.querySelector() 来选择一个 id，并且让它能兼容IE6浏览器，但是在IE6浏览器中这个函数是不存在的，那么使用这个操作符来检测这个函数是否存在就显得非常的有用，如下面的示例：

if ('querySelector' in document) {
document.querySelector("#id");
} else {
document.getElementById("id");
}

在这个示例中，如果 document 不存在 querySelector 函数，那么就会调用 docuemnt.getElementById(“id”)。

7. 获取数组中最后一个元素

Array.prototype.slice(begin,end)用来获取begin和end之间的数组元素。如果你不设置end参数，将会将数组的默认长度值当作end值。但有些同学可能不知道这个函数还可以接受负值作为参数。如果你设置一个负值作为begin的值，那么你可以获取数组的最后一个元素。如：

var array = [1,2,3,4,5,6];

console.log(array.slice(-1)); // [6]
console.log(array.slice(-2)); // [5,6]
console.log(array.slice(-3)); // [4,5,6]

8. 数组截断

这个小技巧主要用来锁定数组的大小，如果用于删除数组中的一些元素来说，是非常有用的。例如，你的数组有10个元素，但你只想只要前五个元素，那么你可以通过 array.length=5 来截断数组。如下这个示例：

var array = [1,2,3,4,5,6];
console.log(array.length); // 6

array.length = 3;
console.log(array.length); // 3
console.log(array); // [1,2,3]

9. 替换所有

String.replace()函数允许你使用字符串或正则表达式来替换字符串，本身这个函数只替换第一次出现的字符串，不过你可以使用正则表达多中的 /g 来模拟 replaceAll() 函数功能：

var string = "john john";

console.log(string.replace(/hn/, "ana")); // "joana john"
console.log(string.replace(/hn/g, "ana")); // "joana joana"

10. 合并数组

如果你要合并两个数组，一般情况之下你都会使用Array.concat()函数：

var array1 = [1,2,3];
var array2 = [4,5,6];

console.log(array1.concat(array2)); // [1,2,3,4,5,6];

然后这个函数并不适合用来合并两个大型的数组，因为其将消耗大量的内存来存储新创建的数组。在这种情况之个，可以使用 Array.pus().apply(arr1,arr2)来替代创建一个新数组。这种方法不是用来创建一个新的数组，其只是将第一个第二个数组合并在一起，同时减少内存的使用：

var array1 = [1,2,3];
var array2 = [4,5,6];

console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];

11. 将NodeList转换成数组

如果你运行 document.querySelectorAll(“p”) 函数时，它可能返回DOM元素的数组，也就是NodeList对象。但这个对象不具有数组的函数功能，比如 sort()、reduce()、map()、filter() 等。为了让这些原生的数组函数功能也能用于其上面，需要将节点列表转换成数组。可以使用 [].slice.call(elements) 来实现：

var elements = document.querySelectorAll("p"); // NodeList
var arrayElements = [].slice.call(elements); // 将NodeList转化为数组
var arrayElements = Array.from(elements); // 另一种方式将NodeList转化为数组

12. 数组元素的洗牌

对于数组元素的洗牌，不需要使用任何外部的库，比如Lodash，只要这样做：

var list = [1,2,3];
console.log(list.sort(function() { Math.random() - 0.5 })); // [2,1,3]

现在你学会了些有用的JavaScript小技巧。希望这些小技巧能在工作中帮助你解决一些麻烦，或者说这篇文章对你有所帮助。如果你有一些优秀的JavaScript小技巧，欢迎与我们一起分享

1. HTML5 DOM 选择器

// querySelector() 返回匹配到的第一个元素
var item = document.querySelector('.item');
console.log(item);

// querySelectorAll() 返回匹配到的所有元素，是一个nodeList集合
var items = document.querySelectorAll('.item');
console.log(items[0]);

2. 阻止默认行为

// 原生js
document.getElementById('btn').addEventListener('click', function (event) {
    event = event || window.event；

if (event.preventDefault){
// w3c方法 阻止默认行为
        event.preventDefault();
    } else{
// ie 阻止默认行为
        event.returnValue = false;
    }
}, false);

// jQuery
$('#btn').on('click', function (event) {
    event.preventDefault();
});

3. 阻止冒泡

// 原生js
document.getElementById('btn').addEventListener('click', function (event) {
    event = event || window.event；

if (event.stopPropagation){
// w3c方法 阻止冒泡
        event.stopPropagation();
    } else{
// ie 阻止冒泡
        event.cancelBubble = true;
    }
}, false);

// jQuery
$('#btn').on('click', function (event) {
    event.stopPropagation();
});

4. 鼠标滚轮事件

$('#content').on("mousewheel DOMMouseScroll", function (event) { 
// chrome & ie || // firefox
var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1)) || 
        (event.originalEvent.detail && (event.originalEvent.detail > 0 ? -1 : 1));  

if (delta > 0) { 
// 向上滚动
console.log('mousewheel top');
    } else if (delta < 0) {
// 向下滚动
console.log('mousewheel bottom');
    } 
});

5. 检测浏览器是否支持svg

function isSupportSVG() { 
var SVG_NS = 'http://www.w3.org/2000/svg';
return !!document.createElementNS &&!!document.createElementNS(SVG_NS, 'svg').createSVGRect; 
} 

// 测试
console.log(isSupportSVG());

6. 检测浏览器是否支持canvas

function isSupportCanvas() {
if(document.createElement('canvas').getContext){
return true;
    }else{
return false;
    }
}

// 测试，打开谷歌浏览器控制台查看结果
console.log(isSupportCanvas());

7. 检测是否是微信浏览器

function isWeiXinClient() {
var ua = navigator.userAgent.toLowerCase(); 
if (ua.match(/MicroMessenger/i)=="micromessenger") { 
return true; 
    } else { 
return false; 
    }
}

// 测试
alert(isWeiXinClient());

8. jQuery 获取鼠标在元素上的坐标

$('#ele').click(function(event){
//获取鼠标在图片上的坐标 
console.log('X：' + event.offsetX+'\n Y:' + event.offsetY); 

//获取元素相对于页面的坐标 
console.log('X：'+$(this).offset().left+'\n Y:'+$(this).offset().top);
});

9. 验证码倒计时代码

<!-- dom -->
<input id="send" type="button" value="发送验证码">

// 原生js版本
var times = 60, // 临时设为60秒
    timer = null;

document.getElementById('send').onclick = function () {
// 计时开始
    timer = setInterval(function () {
        times--;

if (times <= 0) {
            send.value = '发送验证码';
            clearInterval(timer);
            send.disabled = false;
            times = 60;
        } else {
            send.value = times + '秒后重试';
            send.disabled = true;
        }
    }, 1000);
}

// jQuery版本
var times = 60,
    timer = null;

$('#send').on('click', function () {
var $this = $(this);

// 计时开始
    timer = setInterval(function () {
        times--;

if (times <= 0) {
            $this.val('发送验证码');
            clearInterval(timer);
            $this.attr('disabled', false);
            times = 60;
        } else {
            $this.val(times + '秒后重试');
            $this.attr('disabled', true);
        }
    }, 1000);
});

10. 常用的一些正则表达式

//匹配字母、数字、中文字符 
/^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/ 

//验证邮箱 
/^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/ 

//验证手机号 
/^1[3|5|8|7]\d{9}$/ 

//验证URL 
/^http:\/\/.+\./

//验证身份证号码 
/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/ 

//匹配中文字符的正则表达式 
/[\u4e00-\u9fa5]/ 

//匹配双字节字符(包括汉字在内) 
/[^\x00-\xff]/

11. js时间戳、毫秒格式化

function formatDate(now) { 
var y = now.getFullYear();
var m = now.getMonth() + 1; // 注意js里的月要加1 
var d = now.getDate();
var h = now.getHours(); 
var m = now.getMinutes(); 
var s = now.getSeconds();

return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s; 
} 

var nowDate = new Date(1442978789184);

alert(formatDate(nowDate));

12. js限定字符数（注意：一个汉字算2个字符）

<input id="txt" type="text">

//字符串截取
function getByteVal(val, max) {
var returnValue = '';
var byteValLen = 0;
for (var i = 0; i < val.length; i++) { if (val[i].match(/[^\x00-\xff]/ig) != null) byteValLen += 2; else byteValLen += 1; if (byteValLen > max) break;
        returnValue += val[i];
    }
return returnValue;
}

$('#txt').on('keyup', function () {
var val = this.value;
if (val.replace(/[^\x00-\xff]/g, "**").length > 14) {
this.value = getByteVal(val, 14);
    }
});

13. js判断是否移动端及浏览器内核

var browser = { 
    versions: function() { 
var u = navigator.userAgent; 
return { 
            trident: u.indexOf('Trident') > -1, //IE内核 
            presto: u.indexOf('Presto') > -1, //opera内核 
            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核 
            gecko: u.indexOf('Firefox') > -1, //火狐内核Gecko 
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端 
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios 
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android 
            iPhone: u.indexOf('iPhone') > -1 , //iPhone 
            iPad: u.indexOf('iPad') > -1, //iPad 
            webApp: u.indexOf('Safari') > -1 //Safari 
        }; 
    }
} 

if (browser.versions.mobile() || browser.versions.ios() || browser.versions.android() || browser.versions.iPhone() || browser.versions.iPad()) { 
    alert('移动端'); 
}

之前我用过一个检测客户端的库觉得挺好用的，也推荐给大家叫 device.js，大家可以 Googel 或百度
GItHub仓库地址：https://github.com/matthewhudson/device.js

14. getBoundingClientRect() 获取元素位置

//它返回一个对象，其中包含了left、right、top、bottom四个属性
var myDiv = document.getElementById('myDiv');
var x = myDiv.getBoundingClientRect().left; 
var y = myDiv.getBoundingClientRect().top; 

// 相当于jquery的： $(this).offset().left、$(this).offset().top // js的：this.offsetLeft、this.offsetTop

15. HTML5全屏

function fullscreen(element) {
if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
    }
}

fullscreen(document.documentElement);

秒客网

分享一些前端开发中最常用的JS代码片段以及理解 JS闭包

1. 使用!!操作符转换布尔值

2. 使用+将字符串转换成数字

3. 并条件符

4. 使用||运算符

5. 在循环中缓存array.length

6. 检测对象中属性

7. 获取数组中最后一个元素

8. 数组截断

9. 替换所有

10. 合并数组

11. 将NodeList转换成数组

12. 数组元素的洗牌

1. HTML5 DOM 选择器

2. 阻止默认行为

3. 阻止冒泡

4. 鼠标滚轮事件

5. 检测浏览器是否支持svg

6. 检测浏览器是否支持canvas

7. 检测是否是微信浏览器

8. jQuery 获取鼠标在元素上的坐标

9. 验证码倒计时代码

10. 常用的一些正则表达式

11. js时间戳、毫秒格式化

12. js限定字符数（注意：一个汉字算2个字符）

13. js判断是否移动端及浏览器内核

14. getBoundingClientRect() 获取元素位置

15. HTML5全屏

相关文章