JavaScript--预解释和作用域

最新推荐文章于 2024-07-13 22:27:25 发布

Laman_lin

最新推荐文章于 2024-07-13 22:27:25 发布

阅读量162

点赞数

文章标签： JavaScript 笔记预解释作用域

本文链接：https://blog.csdn.net/weixin_41853113/article/details/80635315

版权

 
 基本数据类型的引入和引入数据类型 

 
  <style> 

 
  .div1{ 

 
  width: 100px; 

 
  height: 100px; 

 
  background: red; 

}

 
  </style> 

 
  <body> 

 
  <div id="div1" class="div1"> 

 
  haha 

 
  </div> 

 
  <script> 

 
  var oDiv = document.getElementById('div1'); 

 
  var color = oDiv.style.backgroundColor; //var color = 'red' 

 
  //var oStyle = oDiv.style; // 

 
  console.dir(oDiv) 

 
  oDiv.onclick = function (){ 

 
  //oDiv.style.backgroundColor = 'black'; 

 
  //color = 'black'; 

 
  oStyle.backgroundColor = 'black'; 

}

 
  </script> 

 
 </body> 

 
 作用域的深入 

预解释 ：
当浏览器开始解析js代码的时候，首先看当前运行环境(作用域)内带var和function，带var的变量会提前声明(预解释)但是不会赋值，带function的会提前声明并赋值。带var变量提前声明的时候并不会被赋值，但是有一个默认的undefined值。当代码执行过后才会赋值。

 
 堆栈内存： 栈内存【全局作用域和私有作用域】（提供一个让js代码执行的环境）， 

 
 堆内存：【存储空间】所有的引用数据类型，需要存储的内容都在堆内存中（对象存储键值对；函数存储代码字符串）保存的是一个地址 

 
 预解释只看等号左面的变量，并不会看你的值是什么 

 
 我们的预解释只发生在当前作用域 

 
  console.log(obj);//undefined 

 
  console.log(num);//undefined 

 
  var num = 12; //赋值 

 
  console.log(num); //12 

 
  var obj = {'name': 'tianxi', age: 30}; //对象类型 

 
  console.log(obj); 

 
  console.log(haha); //报错 Uncaught ReferenceError: haha is not defined 

 
  /*-----------------------------------------------------*/ 

 
  var a = function () {}; 

 
  预解释只看等号左面的变量，并不会看你的值是什么 

 
  function sum(num1, num2) { //当代码执行到这的时候，声明和赋值都已经结束，直接跳过 

 
  function haha() { 

 
  }; //我们的预解释只发生在当前作用域 

 
  var total = 0; 

 
  total = num1 + num2; 

}

 
 在全局作用域下，加var和不加var的区别 1 是否被提前声明 2 不加var那么就是一个赋值过程，相当于给window添加了一个属性并且赋值 

 
 预解释的时候 

 
 1 无论条件是否成立，都会预解释 

 
  console.log(total); //undefined 

 
  if('total' in window){ 

 
  var total = 6; 

}

 
 console.log(total); //6,undefined.  

 
 2 预解释的时候带var关键字之看等号左面 

 
  //a(); 

 
  var a = function (){ 

 
  alert(); 

}

 
 3 自执行函数不被预解释 

 
 !function (){ 

 
  var b = 0; 

}()

 
 4 return下面的代码仍然会被预解释,但是return后面的值即使你是一个函数也不会被预解释 

 
  function fn(){ 

 
  console.log(num); //??undefined 

 
  return function (){ 

 
  console.log(num); 

}

 
  var num = 9;//return 下面的代码不执行，但是还会声明提前 

}

 
  fn(); 

 
 5.预解释是一种无节操的机制 

 
  if(!"num" in window){ 

 
  var num = 12; 

}

 
  console.log(num);//->undefined 

 
  //-------------------------------------------------------------------------- 

 
  fn() ; //Uncaught TypeError: fn is not a function 把fn声明提前了 

 
  var fn = function () { 

 
  console.log(12); 

}

 
  fn();//推荐使用这种匿名函数之构建函数-》找bug好找，只需要往下面找就行 

 
  /*---------------------------------------*/ 

 
  fn() ; //12 把fn整个函数都提前并且执行 

 
  fn = function () { 

 
  console.log(12); 

}

 
 //练习 

 
 //window预解释： 

 
 //1、声明加定义fn=000fff111； 

 
 //2、变量提升 var = fn； 

 
 //3、声明（已经声明就不重复操作，只赋值）加定义 fn=000fff222； 

 
 //4、所以最后fn=000fff222； 

 
 //5、只要前面有提示错误，下面就不继续执行 

 
  fn();//->2 

 
 function fn(){ 

 
  console.log(1); //虽然重复，但是提前，并且已经做过一遍 

}

 
 fn();//->2 

 
 var fn = 12 //代码执行到这的时候，我们原来的函数引用地址已经被破坏，并且把n赋值为12， 

 
 fn(); //=》10 前面已经有一个fn，不是函数所以报fn is not function 

 
 function fn(){ 

 
  console.log(2); 

}

 
 fn(); 

 
 //结果： 2 2 error 

 
 如何查找上级作用域 

 
 函数运行运行时候上一级作用域只和在哪里定义有关系 

 
  var num = 12; 

 
 function fn(){ 

 
  var num = 100; 

 
  return function (){ 

 
  // var x = 13; 

 
  console.log(num); 

}

}

 
 var f = fn(); //100 x的值才会预解释 

 
 f(); //undefined  

 
 作用域销毁与内存释放 

 
 我们想要让内存释放，只需要把她的变量赋值为null，若当前的栈内存没有任何东西被应用，就会被浏览器销毁 

 
 1.全局作用域：当页面关闭时就会销毁 

 
 2.私有作用域 

 
 function fn(){ 

 
 var num = 100; 

 
 return function(){} 

}

 
 fn()(); //首先执行一次fn，返回一个小函数对应的地址，然后紧接着让返回的小函数再执行。 

 
 //例子： 

 
 function(){ 

 
 var i = 10; 

 
 return function(n){ 

 
 console.log(n + (++i)); 

}

}

 
 var f = fn(); 

 
 f(10); //->21 

 
 f(20); //->32 

 
 f()(10); //->21 

 
 f()(20); //->31 

 
 this关键字 

关注