js学习笔记 day5

 
## 1.作用域

<script>

<script>
//作用域
//作用:起作用
//域:范围
//起作用的范围
 
//变量起作用的范围就是变量的作用域
 
//1.块级作用域
//JavaScript中没有块级作用域
 
//如果有块级作用域下面的代码的显示结果为 undefined undefined
// for(var i=0; i<10;i++){
 
// var num = i;
 
// }
 
// console.log(i);
 
// console.log(num);
//2.词法作用域
//就是在代码写好的那一刻,变量的作用域就已经确定了,这种作用域,就是所谓的词法作用域
//和词法作用域相对的叫动态作用域 js中是词法作用域不是动态作用域
// var a = 123;
function f2(){
var a = 456;
function f1(){
console.log(a);
}
}
f2();
//3.在JavaScript中唯一能产生作用域的东西是 函数!
var a = 1;
function test(){
var b = 10;
}
//4.词法作用域的规则
//函数允许访问函数外的数据.
//整个代码结构中只有函数可以限定作用域.
//作用域规则首先使用提升规则分析
//如果当前作用域中有了该变量, 就不考虑外面的同名变量
 
</script>
## 2.变量和函数的声明提升(js代码的执行过程)

<script>
 
//js代码的执行分为两个步骤
//1.预解析
//提升(hoisting)
//JavaScript代码在预解析阶段,会对以var声明的变量名,和function开头的语句块,进行提升操作
 
//2.执行
 
// func();
// function func(){
// alert("Funciton has been called");
// }
 
//变量的提升
// alert(a);
// var a = 1;
 
//提升之后的代码模拟
// var a;
// alert(a);
// a = 1;
 
//函数同名,如何提升
//预处理的时候,会将两个函数全部提升,但是后面的函数会覆盖掉前面函数
// func1(); //last
// function func1(){
// console.log('This is first func1');
// }
//
// func1(); //last
// function func1(){
// console.log('This is last func1');
// }
// //预解析提升后的代码
// function func1(){
// console.log('This is first func1');
// }
//
// function func1(){
// console.log('This is last func1');
// }
// func1(); //last
// func1(); //last
 
//变量和函数同名
//在提升的时候,如果有变量和函数同名,会忽略掉变量,只提升函数
alert(foo); //undefined 函数体
function foo(){}
var foo = 2;
alert(foo); //2
//预解析 提升后的代码
function foo(){};
alert(foo);
foo=2;
alert(foo);
</script>

## 3.作用域链


<script>
//只要是函数就可以创造作用域
//函数中又可以再创建函数
//函数内部的作用域可以访问函数外部的作用域
//如果有多个函数嵌套,那么就会构成一个链式访问结构,这就是作用域链
 
//f1--->全局
function f1(){
//f2--->f1--->全局
function f2(){
//f3---->f2--->f1--->全局
function f3(){
}
//f4--->f2--->f1---->全局
function f4(){
}
}
//f5--->f1---->全局
function f5(){
}
}
 
 
 
//变量的搜索原则
//1.在使用变量的时候
//* 首先在所在的作用域中查找
//* 如果找到了 就直接使用
//* 如果没有找到 就去上级作用域中查找
//2.重复以上步骤
//* 如果直到0级作用域链也就是全局作用域还没有找到,报错
</script>

## 4.闭包(一种现象)

<script>
//1、什么是闭包
//闭:闭合,关闭,封闭
//包:包裹,包起来
 
//一个具有封闭的对外不公开的, 包裹结构, 或空间
 
//2、js中的闭包
//就是函数
 
//3、闭包的原理就是作用域访问原则
//上级作用域无法直接访问下级作用域中的变量
 
function f1(){
var num = 123;
function f2(){
console.log(num);
}
f2();
}
 
//4.闭包要解决什么问题?
//1.闭包内的数据不允许外界访问
//2.要解决的问题就是间接访问该数据
 
function foo () {
var num = 123;
return num;
}
 
var x = foo();
console.log(x);
 
var y = foo();
console.log( x === y );
 
//用来说明函数的每次调用,返回的对象都是新的 每次都不一样
function foo(){
var obj = {
name:"潘文斌",
nickName:"文武宝宝"
}
return obj;
}
var obj1 = foo();
var obj2 = foo();
console.log(obj1 == obj2);
 
 
//使用return关键字将函数内部的数据返回,这个数据只能被使用一次
function foo(){
var num = 123;
return num;
}
 
var x = foo();
 
//1.函数内部的函数中可以访问该函数中的变量
//2.但是我们需要在函数外部去访问函数中变量
 
function foo(){
var num = 123;
return function(a){
//1.如果传参数,这里的a肯定不是Undefined,所以条件判断为true
if(a !== undefined){
num = a;
}else{
//如果不传参,代表要获取这个值,直接return
return num;
}
};
}
var func = foo();
//设置值
func(789);
 
//理想状态下的获取值
var x = func();
console.log(x);
func(987);
console.log(func());
 
//1.闭包基本模式
 
//在外部函数(foo)内创建函数(inner),在这个内部函数(inner)中,可以操作foo中的数据
//将外部函数的返回值设置为内部函数
//在外部调用外部函数(foo),就可以接受到返回值(内部函数)
//使用这个内部函数,就可以在外部对外部函数里的变量进行修改
</script>
### 1.使用闭包返回多个值

 


<script>
function foo() {
var name = "张国荣";
var age = 18;
 
return [
function(){
return name;
},
function(){
return age;
}
]
}
 
var getName = foo();
console.log(getName[0]());
console.log(getName[1]());
 
 
function foo() {
var name = "张国荣";
var age = 18;
 
return {
getName:function () {
return name;
},
getAge:function () {
return age;
}
}
}
 
var obj = foo();
console.log(obj.getName());
console.log(obj.getAge());
 
2.使用对象返回多个方发法
function foo() {
var name = "高金彪";
var gender = "female";
 
return {
 
getName:function () {
return name;
},
setName:function(value){
name = value;
return name;
},
setGender:function(value){
gender = value;
// return gender;
},
getGender:function(){
return gender;
}
 
};
}
 
var obj = foo();
console.log(obj.getGender());
 
console.log(obj.setGender("雄"));
// console.log(obj.getGender());
</script>



### 2.闭包的作用

<script>
function foo(){
var name = "潘明";
var badLevel = -1000000000000000000000000000000000;
return {
getName: function () {
return name;
},
setName: function (value) {
name = value;
return name;
},
getBadLevel:function(){
return badLevel;
},
setBadLevel:function (value) {
//在函数外部想要修改数据
//只能通过函数内部的方法
//我们可以在函数内部定义的这个方法里
//设置安全措施,校验之类的操作
//可以保证系统的安全性和稳定性
if(value > 0 ){
throw "你敢说我坏!!!";
}
 
badLevel = value;
return badLevel;
}
}
}
var obj = foo();
 
        obj.setName("高金彪");
 
obj.setBadLevel(obj.getBadLevel() * -1 * Math.pow(10,10000000));
console.log(obj.getBadLevel());
 
//闭包的作用
//最基本的作用:可以通过闭包返回的函数或者方法,来修改函数内部的数据
//创建一个私有的空间,保护数据
//外部想要访问数据,只能通过函数提供的方法
//在提供的方法中,我们可以设置一些校验逻辑,让数据变得更加安全
 
var name = "";
var age = 19;
 
//张二狗
name = "二狗";
 
//隔壁老王
name = "隔壁老王到此一游";
</script>
### 3.条件式函数声明


<script>
 
//条件式函数声明是否会被提升,取决浏览器
//条件式函数声明不推荐去写
foo(); //这里会报错,因为未被提升
if(true){
function foo(){
console.log("123");
}
}
foo();
</script>

## 5.闭包的总结

### 1.JS中的闭包是什么

1. 在函数外部访问不到函数内部的数据
2. 要解决的问题就是需要在外部间接的访问函数内部的数据

### 2.闭包的作用:

​       **如果把数据放在全局作用域内,那么所有人都可以随意修改,这个数据就不再可靠。**

​       **闭包可以创建一个私有空间,在这个空间内部的数据,外部无法直接访问**

​       **外部空间想要访问函数内部的数据,只能通过闭包提供的指定的方法,在这个方法内部**
​        **可以设置一些校验规则,让数据变得更加的安全。**

</script>·

猜你喜欢

转载自www.cnblogs.com/cwp115/p/9191826.html