JavaScript中的变量升级与作用域解析<\/h1>

1. Hoisting(变量提升)<\/h2>
JavaScript中的变量提升(Hoisting)是一个重要的概念，它指的是变量和函数的声明会在编译阶段被提升到当前作用域的顶部。<\/p>

1.1 基本示例<\/h3>
var<\/span> x<\/span> =<\/span> 1<\/span>;  
<\/span><\/span>console<\/span>.log<\/span>(x<\/span> +<\/span> " "<\/span> +<\/span> y<\/span>);  \/\/ '1 undefined'
<\/span><\/span><\/span><\/span>catName<\/span>("Chloe"<\/span>)        \/\/'Choloe'
<\/span><\/span><\/span><\/span>
<\/span><\/span>var<\/span> y<\/span> =<\/span> 2<\/span>;
<\/span><\/span>function<\/span> catName<\/span>(name<\/span>) {
<\/span><\/span>    console<\/span>.log<\/span>("我的猫名叫 "<\/span> +<\/span> name<\/span>);
<\/span><\/span>}
<\/span><\/span><\/code><\/pre>等效代码：<\/p>
var<\/span> x<\/span>=<\/span>1<\/span>;
<\/span><\/span>var<\/span> y<\/span>;
<\/span><\/span>console<\/span>.log<\/span>(x<\/span> +<\/span> " "<\/span> +<\/span> y<\/span>);  \/\/ '1 undefined'
<\/span><\/span><\/span><\/span>
<\/span><\/span>function<\/span> catName<\/span>(name<\/span>) {
<\/span><\/span>    console<\/span>.log<\/span>("我的猫名叫 "<\/span> +<\/span> name<\/span>);
<\/span><\/span>}
<\/span><\/span>y<\/span> =<\/span> 2<\/span>;
<\/span><\/span>
<\/span><\/span>catName<\/span>("Chloe"<\/span>)        \/\/'Choloe'
<\/span><\/span><\/span><\/code><\/pre>1.2 函数内部的变量提升<\/h3>
var<\/span> username<\/span> =<\/span> 'hpdoger'<\/span>;
<\/span><\/span>
<\/span><\/span>function<\/span> echoName<\/span>(){
<\/span><\/span>    console<\/span>.log<\/span>(username<\/span>);  \/\/undefined
<\/span><\/span><\/span><\/span>    var<\/span> username<\/span> =<\/span> 'wuyanzu'<\/span>;
<\/span><\/span>}
<\/span><\/span>
<\/span><\/span>echoName<\/span>();
<\/span><\/span><\/code><\/pre>关键点<\/strong>：<\/p>

变量和函数声明会在编译阶段被处理<\/li>
只有声明被提升，赋值操作不会被提升<\/li>
函数声明比变量声明优先级更高<\/li>
<\/ul>
2. 变量升级<\/h2>
变量升级指的是变量作用域意外提升的情况，可能导致安全问题。<\/p>
2.1 声明错误导致的变量升级<\/h3>
function<\/span> echoName<\/span>(){
<\/span><\/span>    var<\/span> username<\/span> =<\/span> 'hpdoger'<\/span>
<\/span><\/span>    nickname<\/span> =<\/span> 'wuyanzu'<\/span>;  \/\/ 没有使用var\/let\/const声明，自动成为全局变量
<\/span><\/span><\/span><\/span>}
<\/span><\/span>
<\/span><\/span>function<\/span> CheckVal<\/span>(){
<\/span><\/span>    console<\/span>.log<\/span>(nickname<\/span>); \/\/wuyanzu
<\/span><\/span><\/span><\/span>    console<\/span>.log<\/span>(username<\/span>); \/\/Uncaught ReferenceError: username is not defined
<\/span><\/span><\/span><\/span>}
<\/span><\/span>
<\/span><\/span>echoName<\/span>();
<\/span><\/span>CheckVal<\/span>();
<\/span><\/span><\/code><\/pre>2.2 案例1-Fake Protect<\/h3>
<html<\/span>>
<\/span><\/span><body<\/span>>
<\/span><\/span><script<\/span>>
<\/span><\/span>  const<\/span> whiteList<\/span> =<\/span> ['index.html'<\/span>,'404.html'<\/span>,'hpdoger.html'<\/span>];
<\/span><\/span>
<\/span><\/span>  function<\/span> init<\/span>(){
<\/span><\/span>      const<\/span> Content<\/span> =<\/span> new<\/span> Object();
<\/span><\/span>      Content<\/span>["title"<\/span>] =<\/span> "XSS Demo"<\/span>;
<\/span><\/span>      page<\/span> =<\/span> location<\/span>.hash<\/span>.slice<\/span>(1<\/span>);  \/\/ 没有声明page变量，成为全局变量
<\/span><\/span><\/span><\/span>
<\/span><\/span>      if<\/span>(!<\/span>whiteList<\/span>.includes<\/span>(page<\/span>)){
<\/span><\/span>        Content<\/span>["page"<\/span>] =<\/span> "404.html"<\/span>;
<\/span><\/span>      }else<\/span>{
<\/span><\/span>        window.page<\/span> =<\/span> page<\/span>;
<\/span><\/span>      }
<\/span><\/span>      return<\/span> Content<\/span>;
<\/span><\/span>  }
<\/span><\/span>
<\/span><\/span>  function<\/span> loadPage<\/span>(page<\/span>){
<\/span><\/span>      window.open<\/span>(page<\/span>);
<\/span><\/span>  }
<\/span><\/span>
<\/span><\/span>  let<\/span> Content<\/span> =<\/span> init<\/span>();
<\/span><\/span>  alert<\/span>(Content<\/span>["title"<\/span>]);
<\/span><\/span>  page<\/span>?<\/span>loadPage<\/span>(page<\/span>):<\/span>loadPage<\/span>(Content<\/span>.page<\/span>);  \/\/ 可以直接控制page变量
<\/span><\/span><\/span><\/span><\/script<\/span>>
<\/span><\/span><\/body<\/span>>
<\/span><\/span><\/html<\/span>>
<\/span><\/span><\/code><\/pre>安全问题<\/strong>：未声明的page<\/code>变量成为全局变量，绕过白名单检查。<\/p>
2.3 案例2-midnightCTF(Crossintheroof)<\/h3>
<?<\/span>php<\/span>
<\/span><\/span>$xss =<\/span> $_GET['xss'<\/span>]?<\/span>$_GET['xss'<\/span>]:<\/span>""<\/span>;
<\/span><\/span>$xss =<\/span> preg_replace<\/span>("|[}\/{]|"<\/span>, ""<\/span>, $xss);
<\/span><\/span>?><\/span>
<\/span><\/span><\/span><script>
<\/span><\/span><\/span>setTimeout(function(){
<\/span><\/span><\/span>    try{
<\/span><\/span><\/span>        return location = '\/?i_said_no_xss_4_u_:)';
<\/span><\/span><\/span>        nodice=<?php echo $xss; ?>;
<\/span><\/span><\/span>    }catch(err){
<\/span><\/span><\/span>        return location = '\/?error='+<?php echo $xss; ?>;
<\/span><\/span><\/span>    }
<\/span><\/span><\/span>    },500);
<\/span><\/span><\/span><\/script>
<\/span><\/span><\/span><\/code><\/pre>解决方案<\/strong>：<\/p>
xss<\/span>=<\/span>alert<\/span>(1<\/span>);%<\/span>0<\/span>a<\/span>+<\/span>const<\/span>+<\/span>location<\/span>=<\/span>1<\/span>;
<\/span><\/span><\/code><\/pre>原理<\/strong>：<\/p>

使用const<\/code>声明局部变量location<\/code>，覆盖全局的window.location<\/code><\/li>
赋值操作会产生runtime error，进入catch块<\/li>
分号分隔语句，确保alert(1)<\/code>先执行<\/li>
<\/ol>
2.4 for循环中的变量升级<\/h3>
names<\/span> =<\/span> ['55kai'<\/span>,'pdd'<\/span>,'dasima'<\/span>];
<\/span><\/span>for<\/span> (var<\/span> i<\/span>=<\/span>0<\/span>;i<\/span><<\/span>names<\/span>.length<\/span>;i<\/span>++<\/span>) {
<\/span><\/span>    if<\/span>(names<\/span>[i<\/span>] ===<\/span> 'dasima'<\/span>){
<\/span><\/span>      console<\/span>.log<\/span>('wuhu~'<\/span>);
<\/span><\/span>    }else<\/span>{
<\/span><\/span>      console<\/span>.log<\/span>(names<\/span>[i<\/span>]);
<\/span><\/span>    }
<\/span><\/span>}
<\/span><\/span>console<\/span>.log<\/span>(i<\/span>); \/\/ 3 - i被提升到函数作用域
<\/span><\/span><\/span><\/code><\/pre>关键点<\/strong>：<\/p>

var<\/code>声明的变量会提升到当前函数作用域<\/li>
未使用var<\/code>声明的变量会成为全局变量<\/li>
<\/ul>
2.5 with表达式中的变量升级<\/h3>
function<\/span> getUrlParam<\/span>(name<\/span>) {
<\/span><\/span>  var<\/span> reg<\/span> =<\/span> new<\/span> RegExp("(^|&)"<\/span> +<\/span> name<\/span> +<\/span> "=([^&]*)(&|$)"<\/span>);
<\/span><\/span>  var<\/span> r<\/span> =<\/span> window.location<\/span>.search<\/span>.substr<\/span>(1<\/span>).match<\/span>(reg<\/span>);
<\/span><\/span>  if<\/span> (r<\/span> !=<\/span> null<\/span>) return<\/span> unescape<\/span>(r<\/span>[2<\/span>]); return<\/span> null<\/span>;
<\/span><\/span>}
<\/span><\/span>
<\/span><\/span>function<\/span> init<\/span>(Content<\/span>,values<\/span>=<\/span>'index.html'<\/span>){
<\/span><\/span>    with<\/span> (Content<\/span>) {
<\/span><\/span>        title<\/span> =<\/span> 'XSS Demo'<\/span>;
<\/span><\/span>        page<\/span> =<\/span> values<\/span>;
<\/span><\/span>        location<\/span> =<\/span> values<\/span>;  \/\/ 如果Content没有location属性，会升级为全局变量
<\/span><\/span><\/span><\/span>    }
<\/span><\/span>}
<\/span><\/span>
<\/span><\/span>let<\/span> values<\/span> =<\/span> location<\/span>.hash<\/span>.slice<\/span>(1<\/span>);
<\/span><\/span>let<\/span> uid<\/span> =<\/span> getUrlParam<\/span>("role"<\/span>);
<\/span><\/span>
<\/span><\/span>let<\/span> ContentAdmin<\/span> =<\/span> {
<\/span><\/span>  title<\/span>:<\/span>''<\/span>,
<\/span><\/span>  page<\/span>:<\/span>''<\/span>
<\/span><\/span>}
<\/span><\/span>
<\/span><\/span>let<\/span> ContentUser<\/span> =<\/span> {
<\/span><\/span>  title<\/span>:<\/span>''<\/span>,
<\/span><\/span>  location<\/span>:<\/span>''<\/span>
<\/span><\/span>}
<\/span><\/span>
<\/span><\/span>if<\/span>(uid<\/span>!==<\/span>"admin"<\/span>){
<\/span><\/span>  init<\/span>(ContentUser<\/span>,values<\/span>);
<\/span><\/span>}else<\/span>{
<\/span><\/span>  init<\/span>(ContentAdmin<\/span>,values<\/span>);
<\/span><\/span>}
<\/span><\/span><\/code><\/pre>安全问题<\/strong>：<\/p>

当Content<\/code>对象没有location<\/code>属性时，location<\/code>会被升级为全局变量<\/li>
可以修改window.location<\/code>实现XSS<\/li>
<\/ul>
2.6 this绑定导致的变量升级<\/h3>
var<\/span> myobj<\/span> =<\/span> {
<\/span><\/span>    getbar<\/span> :<\/span> function<\/span>(){
<\/span><\/span>        console<\/span>.log<\/span>(this<\/span>.bar<\/span>);
<\/span><\/span>    },
<\/span><\/span>    bar<\/span>:<\/span> 1<\/span>
<\/span><\/span>};
<\/span><\/span>
<\/span><\/span>var<\/span> bar<\/span> =<\/span> 2<\/span>;
<\/span><\/span>var<\/span> getbar<\/span> =<\/span> myobj<\/span>.getbar<\/span>;
<\/span><\/span>
<\/span><\/span>myobj<\/span>.getbar<\/span>() \/\/1 - this指向myobj
<\/span><\/span><\/span><\/span>getbar<\/span>(); \/\/2 - this指向全局对象(浏览器中是window)
<\/span><\/span><\/span><\/code><\/pre>关键点<\/strong>：<\/p>

函数中的this<\/code>默认绑定到调用它的对象<\/li>
没有明确绑定时，this<\/code>会指向全局对象<\/li>
<\/ul>
3. 防御措施<\/h2>

始终使用严格模式<\/strong>：'use strict'<\/code>可以防止意外创建全局变量<\/li>
使用let\/const代替var<\/strong>：块级作用域可以避免变量提升问题<\/li>
避免使用with语句<\/strong>：with会改变作用域链，容易导致变量升级<\/li>
明确绑定this<\/strong>：使用.bind()<\/code>, .call()<\/code>, .apply()<\/code>或箭头函数明确this指向<\/li>
代码检查工具<\/strong>：使用ESLint等工具检查未声明的变量<\/li>
<\/ol>
4. 总结<\/h2>
JavaScript中的变量作用域管理需要特别注意：<\/p>

变量提升(Hoisting)是语言特性，而变量升级是潜在的安全问题<\/li>
未正确声明的变量会升级为全局变量，可能导致安全漏洞<\/li>
with语句和this绑定是常见的变量升级来源<\/li>
ES6的let\/const可以解决大部分作用域问题<\/li>
严格模式是防止意外全局变量的有效手段<\/li>
<\/ol>
开发者应养成良好的变量声明习惯，避免因变量升级导致的安全问题。<\/p>
JavaScript中的变量升级与作用域解析<\/h1>

1. Hoisting(变量提升)<\/h2> JavaScript中的变量提升(Hoisting)是一个重要的概念，它指的是变量和函数的声明会在编译阶段被提升到当前作用域的顶部。<\/p>

2. 变量升级<\/h2> 变量升级指的是变量作用域意外提升的情况，可能导致安全问题。<\/p>

1. Hoisting(变量提升)<\/h2>
JavaScript中的变量提升(Hoisting)是一个重要的概念，它指的是变量和函数的声明会在编译阶段被提升到当前作用域的顶部。<\/p>

2. 变量升级<\/h2>
变量升级指的是变量作用域意外提升的情况，可能导致安全问题。<\/p>
