前端复盘（4）（含网址）

遇到了个微信面试，还是语音没有视频，我完全可以在电脑面前面的，可惜太紧张了没想到。哎，我还是太老实了。不过我也没错，毕竟硬实力才是干货，继续继续.

JavaScript的作用域

一、作用域

在 JavaScript 中, 作用域（scope，或译有效范围）就是变量和函数的可访问范围，即作用域控制着变量和函数的可见性和生命周期
二、全局/局部作用域

2.1 全局作用域(Global Scope)

（1）不在任何函数内定义的变量就具有全局作用域。

（2）实际上，JavaScript默认有一个全局对象window，全局作用域的变量实际上被绑定到window的一个属性。

（3）window对象的内置属性都拥有全局作用域，例如 window.name、window.location、window.top 等。

2.2 局部作用域(Local Scope)

（1）JavaScript的作用域是通过函数来定义的，在一个函数中定义的变量只对这个函数内部可见，称为函数（局部）作用域。

三、全局/局部变量

变量能够被定义在局部或者全局作用域，这导致运行时变量的访问来自不同的作用域。
3.1 全局变量

（1）在函数定义外声明的变量是全局变量。

（2）全局变量有 全局作用域，它的值可在整个程序中访问和修改。

（3）如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。

3.2 局部变量

（1）在函数定义内声明的变量是局部变量。

（2）因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。

（3）每当执行函数时，都会创建和销毁该变量，且无法通过函数之外的任何代码访问该变量。

（4）函数外无法访问函数内的变量，函数内却可以访问函数外的变量。

四、全局变量

1、在函数定义外声明的变量是全局变量；全局变量有全局作用域，它的值可在整个程序中访问和修改。
全局变量

2、如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。
全局变量

五、局部变量

1、因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。

2、每当执行函数时，都会创建和销毁该变量，且无法通过函数之外的任何代码访问该变量。

3、函数外无法访问函数内的变量，函数内却可以访问函数外的变量。

六、块级作用域

6.1 概念

块级作用域指在If语句，switch语句，循环语句等语句块中定义变量，这意味着变量不能在语句块之外被访问。

6.2 var 不支持块级作用域

（1）在If等语句块中，定义的变量从属于该块所在的作用域，和函数不同，他们不会创建新的作用域。

6.3 let和const

（1）为了解决块级作用域，ES6引入了 let 和 const 关键字，可以声明一个块级作用域的变量。

（2）全局作用域的生存周期与上述应用相同。局部作用域只在该函数调用执行期间存在。

七、上下文 vs 作用域

（1）首先需要说明的是上下文和作用域是不同的概念。

（2）每个函数调用都有与之相关的作用域和上下文。从根本上说，作用域是基于函数，而上下文是基于对象。

（3）作用域是和每次函数调用时变量的访问有关，并且每次调用都是独立的。上下文总是关键字 this 的值，是调用当前可执行代码的对象的引用。

JavaScript的同步与异步消息

有点长，先贴上网址，后续在下面提炼一下：https://blog.csdn.net/qq_22855325/article/details/72958345

this指针

1. this 指的是直接调用当前方法（函数）的那个对象，也就是说函数在谁那被调用，this就指的是谁。
   例子：

oBtn.onclick = function(){ 
        alert(this);   //oBtn
  }

 

 oBtn.onclick = fn1;

   function fn1(){ 

    alert(this); //oBtn
  }

很容易看出，函数是在按钮对象被点击的时候调用，所以this指的是obtn，这两种情况是等同的，只是调用函数的写法不同。

2. 当函数里面嵌套函数的时候，嵌套的那个函数里面的this指的是window,不要过分深究这个原因，因为这是JS的一个特性。
   例子:

oBtn.onclick = function(){

     alert(this); //oBtn(记得这里还是oBtn)

     fn1(); 
   }

  function fn1(){ 
   alert(this);  // window
   }

对于上述情况，当我们需要fn1里面的this指向按钮的时候怎么办呢，这个时候有两种方法。

(1) 将this作为参数传函数去

(2) 将this保存起来赋给另一个变量
例子：

1

oBtn.onclick = function(){

     alert(this); //oBtn

     fn1(this); 1 将上面的this作为参数传函数去
   }

  function fn1(obj){ 
    alert(obj);  // oBtn
  }

2

var that = null;
oBtn[i].onclick = function(){

   alert(this); //oBtn
   that = this ;// 将上面的this保存起来赋给另一个变量
   fn1();
}

function fn1(){ 
   alert(that);  // 指向oBtn
}

3. 如果有new关键字，this指向new出来的那个对象；

当用new去调用一个函数：这个时候this指的就是创建出来的对象 而且函数的默认返回值就是this 即这个对象（隐式返回 不用自己再写返回值）.
例子：

function CreatePerson(name){   //函数名首字母大写
      //var this=new Object(); 系统会偷偷在这里声明一个对象赋给this替咱们做，不用写
     this.name = name; 
     this.showName = function(){ 
        alert(this.name); 
     } 
     //return this;  函数的默认返回值就是this即这个对象（隐式返回 不用自己再写返回值）

} 
var p1 =new CreatePerson('haha'); 
//当用new去调用一个函数：这个时候this指的就是创建出来的对象 而且函数的默认返回值就是this即这个对象（隐式返回 不用自己再写返回值）
 p1.showName();

样例里的new操作符具体干了什么呢?

（1）创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
（2）属性和方法被加入到 this 引用的对象中。
（3）新创建的对象由 this 所引用，并且最后隐式的返回 this 。