JsBOM和DOM、var let const、变量提升函数提升、闭包、回调函数、原型原型链

1. DOM和BOM

   DOM是操作文档出现的API，document为其中的一个对象；

   BOM是为了操作浏览器出现的API，window为其中的一个对象；

   

   简单来说BOM就是操作上图A区的，DOM就是操作上图B区的

   ​ 常用的BOM对象为：

   • window（重要）window 代表 浏览器窗口

   • Navigater,封装了浏览器的信息

   • screen代表屏幕尺寸

   • location 代表当前页面的URL信息。

   • history 代表浏览器的历史记录

     常用的DOM对象为：

   • document代表当前的页面，HTML DOM文档树

2. var let const

   首先应该知道什么是全局变量和局部变量。

   全局变量就是在函数外声明的，作用域是全局的。

   局部变量就是在函数内声明的，作用域为函数内部。

   Es6新增了块级作用域，let可以实现块级作用域

   {
       let a=1;
   }
   console.log(a); //a is not defined
   
   {
       var a=1
   }
   console.log(a)// 1
   

   var和let的相同点

   • var和let在函数内部声明都是具有局部作用域的
   • var和let在函数外和在块级作用域外都是具有全局作用域的

   var和let的不同点

   • var不可以实现块级作用域，let可以把
   • var可以被再次声明，let不能被再次声明
   • var具有变量提升的功能，let不具有变量提升的功能

   const定义常量

   const定义的常量既不能重新声明也不能重新赋值，且必须进行初始化。

   但是用const定义的数组或对象当中，可以进行单个属性值的更改，但也不能从新赋值整个数组或对象。

   const per={
       name:"cong",
       age:18,
       height:180
   }
   per.age=17;
   console.log(per.age);//17
   	
   per={
       name:"con",
       age:19,
       hight:183
   }//错误的方式
   

3. 变量提升 函数提升

   变量提升

   console.log(a)//undefined
   var a=1;
   

   这两句代码中就相当进行了代码提升，与下面代码相同

   var a;
   console.log(a);
   a=1;
   

   函数定义的三种方法

   1. 函数声明

      function myfunction(){
          alert(...);
      }
      //调用
      myfunction();
      

   2. 函数表达式

      var myfunction=function(){
          alert(...)
      }
      //调用
       myfunction();
      

   3. 构造函数(不常用)

      var myfunction=new function("alert(...)");
      //调用
      myfunction();
      

      函数提升

      在函数提升中，函数声明的形式会被提升，而函数表达式不会被提升

      myfunction1();
      myfunction2();
      function myfunction1(){
          alert(111);
      }
      var myfunction2=function(){
          alert(222);
      }
      //111
      // myfunction2 is not a function
      

      相当于

      function myfunction1(){
      alert(111);
      }
      myfunction1();
      var myfunction2;
      myfunction2();
      myfunction2=function(){
          alert(222);
      }
      //111
      // myfunction2 is not a function
      

   4. 回调函数

      首先了解同步异步的概念。

      在我们学习的传统单线程编程中，程序的运行是同步的（同步不意味着所有步骤同时运行，而是指步骤在一个控制流序列中按顺序执行）。而异步的概念则是不保证同步的概念，也就是说，一个异步过程的执行将不再与原有的序列有顺序关系。

      简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。

      回调函数中就有异步的实践。

      什么是回调函数？

      A “callback” is any function that is called by another function which takes the first function as a parameter. （在一个函数中调用另外一个函数就是callback）

      var a=0;
      function myfunction(x){
          console.log(x);
      }
      function timer(time){
          setTimeout(function(){
              a=6;
          },time);
      }
      
      console.log(a);
      timer(3000);
      bb(a);
      
      //结果为0 0
      

      这是因为js中的异步功能，程序在执行到timer函数后，我们希望它等三秒再往下执行，但js是异步的，它不会去等这三秒，而是直接跳出程序往下执行。这就需要我们来使用回调函数了。

      var a=0;
      function myfunction(x){
          console.log(x);
      }
      function timer(time,callback){
          setTimeout(function(){
              a=6;
              callback(a);
          },time);
      }
      
      console.log(a);
      timer(3000,myfunction);
      
      //结果为0 6
      

      这下把函数做为一个参数以后，程序就需要在执行函数时等待三秒之后再执行myfunction函数

      所以回调的更详细概念就来了：

      一般而言，函数的形参是指由外往内向函数体传递变量的入口，但此处加了callback后则完全相反，它是指函数体在完成某种使命后调用外部函数的出口！这时候应该明白什么叫"回调"了吧，也就是回头调用外部函数的意思。

   5. 闭包

      function out(){
          var a=1;
          function in(){
              alert(a);
          }
      }
      out();//1
      

      上面的代码就是闭包，在我的理解中闭包就是能够读取其他函数内部的变量的函数（「函数」和「函数内部能访问到的变量」的总和，就是一个闭包。）

      闭包的用途：

      • 读取函数内部的变量
      • 让变量的值始终保持在内存中

   6. 原型 原型链

      • 在javascript中每一个函数都有一个prototype属性，指向函数的原型对象

      function per(){
          age:3
      }
      per.prototype.name="cong";//为函数的原型对象创建一个属性
      var per1=new per();      //创建一个实例对象
      console.log(per1.name); //cong
      

      由上面代码可知道per1的原型对象就是

      • 每个对象也都会有一个__proto__属性，指向该对象的原型

      function per(){
          
      }
      var per1=new per();
      console.log(per1.__proto__ === per.prototype);//true
      

      • 每一个原型都有一个constructor属性，指向该对象的构造函数

      function per(){
          
      }
      console.log(per===per.prototype.constructor);//true
      

      

      当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层为止，object为所有对象的顶层。而这样一条的不断向上查找原型的链条就叫原型链。

      红色线条就是原型链