闭包
2017-03-02 本文已影响13人
凸小布
闭包的简单说明
闭:关闭 封闭
包:包住,包裹
闭包:通过某种方式实现一个封闭的,包裹的,对外不公开的结构 | 空间
闭包的原理:变量的访问原则(即上一级的作用域无法访问下一集的作用域),其实函数本身就是闭包
闭包要解决什么问题
闭包里面的数据本来不允许外界访问,要解决的就是如何间接的访问到闭包中的数据
实现思路
01 函数内部的函数可以访问该函数中的变量
02 但是我们需要在函数外部访问到内部的变量
解决方案
在函数内部使用return关键字返回
问题：使用return关键字返回的数据(变量)[值类型|引用类型]，只能使用一次。
而且函数多次调用返回的并不是同一个变量 ？？？
答案：因为函数每调用一次，都会创建一个新的变量(对象），获取到这个对象之后无法修改该对象的值
闭包的基本模式
在函数的内部创建函数(内部函数)，在这个内部函数中，可以操作外部函数的值
01 在函数(外部)中创建函数(内部函数),在该函数(内部函数)中操作外部函数中的变量
02 在外部函数中,把内部函数作为返回值返回
03 调用外部函数,并接收其返回值(是一个函数)
04 调用接收到的返回值(内部函数),来间接的操作外部函数中的变量
// 闭包基本模式
<script>
function func(){
var num = 10;
return function (n){
num = n;
console.log(num);
}
}
var func = func();
func(11111);
</script>
// demo01 值类型 (演示使用return返回值类型的情况)
<script>
function func(){
var num = 10;
return num;
}
var x = func();
var y = func();
console.log(x);
console.log(y);
console.log(x == y);
console.log(x === y);
//问:x和y指向的是同一个变量吗
//一次性获得数据
//01 每次调用函数获得的数据并不是同一份数据
//02 只能获取值,但是却不能修改值
</script>
// demo02 引用类型 (演示使用return返回值类型的情况)
<script>
function func(){
var obj = {
name : "张三",
age : 18
}
return obj;
}
var obj1 = func();
var obj2 = func();
console.log(obj1 == obj2);//false
//说明:每次调用函数都会重新执行一遍函数中的代码,在上面的代码段中表现为,重新obj对象被创建了两次
</script>
// demo03 return + 函数
<script>
function func(){
var num = 100;
function innar(a){
num = a; //修改函数内部变量的值
console.log(num);
}
return innar;
}
var func = func();
func(9999);
</script>
// demo04 最终版
<script>
function func(){
var num = 1;
return function (a){
num = a;
console.log(num);
}
}
var func = func();
func(123);
func(456);
</script>
使用闭包来获取数据
使用闭包来设置值（单个数据）
<script>
function func(){
var num = 1;
return function (n){
num = n;
console.log(num);
}
}
var func = func();
func(100);
</script>
使用闭包来设置值（单个数据）
<script>
function func(){
var num = 9999;
return function (a){
if(a !== undefined){
num = a
}
return num;
}
}
var func = func();
var y = func();
var x = func(123);
console.log(y);
console.log(x + '--');
</script>
使用闭包来获取值(多个数据-数组)
<script>
function func(){
var name = "王者荣耀";
var age = 2;
return [
function getName(){
return name;
},
function getAge(){
return age;
}
]
}
var func = func();
console.log(func[0]());
console.log(func[1]());
</script>
使用闭包来获取值(多个数据-对象)
<script>
function func(){
var name = "张三";
var age = 18;
return {
getName : function(){
return name;
},
getAge : function(){
return age;
},
setName : function(nameValue){
name = nameValue;
},
setAge : function(ageValue){
age = ageValue;
}
}
}
var func = func();
console.log(func.getName());
console.log(func.getAge());
func.setName("张小花");
func.setAge(99);
console.log(func.getName());
console.log(func.getAge());
</script>
闭包的作用
提供了一种间接访问函数封闭空间中数据的方法.
01 访问函数内部的变量只能通过指定的接口
02 对变量的修改设置操作会更安全,我们可以在设置数据之前对数据进行校验
03 延长变量的生命周期
<script>
function func(){
var name = "小白";
var age = 1;
return {
getName : function(){
return name;
},
getAge : function(){
return age;
},
setName : function(nameValue){
name = nameValue;
return name;
},
setAge : function(ageValue){
// 基本校验
if(ageValue < 0){
ageValue = 0;
}
//其他的处理(异常检测)
age = ageValue;
return age;
}
}
}
var func = func();
func.setAge(-1);
console.log(func.getName());
console.log(func.getAge());
</script>
闭包 | 定时器 | 事件操作
js执行的任务
01 渲染任务
02 代码中的主要任务
03 事件型的任务(点击事件|定时器事件)
<script>
for (var i = 0; i < 10; i++) {
// 写法1
(function(i){
setTimeout(function(){
console.log(i);
}, 1000)
})(i);
// 写法2
setTimeout((function(j){
return function(){
console.log(j + '=');
}
})(i), 1000);
}
</script>
<script>
// 获取标签
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
// 写法1
(function(i){
divs[i].onclick = function(){
console.log(i);
}
})(i);
// 写法2
divs[i].onclick = (function(i){
return function(){
console.log(i);
}
})(i);
}
</script>
