HTML5
分享创造价值 合作实现共赢

HTML5

当前位置: 首页 > 新闻动态 > HTML5

临时死区和功能范围

发布时间:2023-02-23 10:15:29作者:顺晟科技点击:

暂时性死区

临时死区是从变量声明到声明完成的块,在声明完成之前是一个封闭的作用域。

如果变量在声明之前就被使用,那么它是不可用的,这也称为临时死区。

Var没有临时死区,因为var有变量提升let,const有块级作用域,有一个临时死区console.log(a)没有变量提升;//错误初始化前无法访问' let a='东方不败' console . log(b);//在初始化const b='东方不败' console.log(c)之前错误封装了访问' b '//未定义,因为var中有变量。var c='求败于东' ES6规定,如果一个代码块中有let和const命令声明的变量,这个代码块从一开始就为这些变量形成一个封闭的作用域,这些变量直到声明语句完成后才能被访问(获取或设置),否则会报告ReferenceError。从语法上来说,这被称为“时态死区”(temporal dead zone,TDZ),即从代码块开始到变量life语句完成的区域。

函数作用域

案例1

一旦设置了参数的默认值,在函数初始化的时候,参数就会形成一个单独的作用域,当初始化结束的时候,这个作用域就消失了。如果未设置参数的默认值,则不会出现此语法。

var x=1function f(x,y=x){ console . log(y);}f(2) //2上例中,函数参数在这里(x,y=x),这个区域是一个单独的作用域。y的默认x变量指向第一个参数x,而不是全局变量x,这里调用f函数,将值2传递给x,所以y=2,打印结果为2。

手表行业旅游

设x2=1函数f2(y2=x2){设x2=2 console . log(y2);}f2() //1调用f2函数。由于f2函数没有参数,y2=x2形成了一个单独的作用域,这个作用域是未定义的,所以x2指向外部全局变量x2,这意味着y2=1。在这里,函数内部的x2不起任何作用。

函数执行时,会先执行参数,再执行函数体。//Error函数F2(y2=x2){ let x2=2 console . log(y2);}f2() //Error在上面的例子中,如果删除了全局变量x2,就会报错,因为声明了变量,又把一个未声明的变量赋给了y2,就会报错。

var xx=1 function fxx(xx=xx){ console . log(xx);}fxx()上面的写法也会给出错误,因为函数的参数有单独的作用域,在这个参数作用域内,执行结果是让xx=xx,给xx赋值一个未声明的变量xx给出错误。(临时死区)

如果函数的默认参数是函数,那么函数的作用域也要遵循这个规则。

let foo='out '功能栏(func=()=foo){ let foo=' come ' console . log(func());}bar() //out本例中,函数参数为func,默认值为匿名函数,返回值为变量foo。因为函数参数在这里形成了一个单独的作用域,变量foo没有在这个作用域中定义,所以foo会指向外部的全局变量foo。如果移除了全局变量foo='out '并报告了一个错误,则分配一个未声明的变量。

app应用

您可以使用此功能编写参数默认值错误引发,如果参数未通过,则引发错误。

函数throw err(){ throw new error(' parameter不得省略')}函数省略(must fn=throw err()){ return must fn }省略();//未传递参数会引发错误:不得省略参数。如果没有传递参数,默认情况下该函数将调用throwErr()函数并抛出错误。

如果该参数的默认值设置为undefined,则意味着该参数可以省略。

rest参数

argumentsarguments可以获取函数的参数值和函数信息(名称、长度)等。

function au(arr){ console . log(' arguments:'arguments);} au(2,1,4,3) 在这里插入图片描述

您可以通过数组方法操作函数参数,如排序。arguments对象不是一个数组,而是一个类似于数组的对象。为了使用array方法,必须先使用Array.from将其转换为数组。

Function au(arr){ //按数组方式对函数参数进行排序。返回数组。来自(参数)。sort();}console.log(au(2,1,4,3)) //[1,2,3,4] 在这里插入图片描述

Rest参数ES6提供rest参数,语法: (.变量名),它实际上是一个剩余运算符。函数参数可以通过rest参数轻松操作,rest参数是一个实数组。

//resy参数(残差运算符)functionresidue(.val){ console . log(val);//[1,2,3]} residual (1,2,3) rest参数(residual operator)只能放在最后一位,否则报错。

//函数剩余2(.val,b){ }//剩余运算符不是最后一位,错误为函数剩余3 (c,val) {console.log (c,val);//1 [2,3,4,5]}由arguments on Residue3 (1,2,3,4,5)完成的参数排序,使用rest就可以轻松完成,而且更有语义,更易读。

让au2=(.val)=val . sort()console . log(au2(2,1,4,3));//[1, 2, 3, 4]

严格模式

ES5,可以在严格模式下设置函数:functions s(){ ' use strict '//strict mode }

//es5严格模式函数s(){ '使用严格'//严格模式//代码.}ES6做了修改,规定只要函数参数使用了默认值、解构赋值和扩展运算符,函数内部的显示就不能设置为严格模式,否则报错。

//es6在严格模式下报错,因为函数S2 (a,b=a) {'use strict'//code的默认值.}//报告错误,解构赋值consts3=function ({a,b }){ ' use strict ' }/报告错误。剩余算子consts4=(.a)={'use strict'} es6使用的是函数内部的严格模式应该同样适用于函数体和函数参数,但是在执行函数的时候会先执行参数,再执行函数体,所以有一些不严谨的情况。只有函数体才能知道参数是否应该在严格模式下执行,但是函数的参数是先执行的,所以es6做了修改。

函数S5(val=070){ ' use strict ' return val } S5()//报错时,函数默认值为八进制070。在严格模式下,前缀0不能用于表示八进制,因此会报告一个错误。

但实际上,因为默认参数是在函数中设置的,所以函数先执行参数,再进入函数体。由于es6的限制,报告了一个错误。

有两种方法可以绕过这个限制。

首先,设置全局严格模式。

使用严格的函数S6(val=100){ console . log(val);}s6() //100第二种方法是将函数嵌套在不带参数的立即执行函数中。

const s7=()={ 'use strict '设a;return(function(val=200){ return val })()} console . log(S7())。匿名函数的调用方法:在上面的例子中(function(val=200){return val})(),return的整个函数用()括起来,最后加了一个()调用,()代表函数中的调用。

案例源代码:https://gitee.com/wang_fan_w/es6-science-institute

如果你觉得这篇文章对你有帮助,请点亮星星。

TOP

QQ客服

18910140161