var、let、const、this

最新推荐文章于 2023-11-21 17:02:49 发布

飞扬_柳絮

最新推荐文章于 2023-11-21 17:02:49 发布

阅读量491

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/tjcjava/article/details/90480473

版权

JavaScript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

一、var let 区别

Js 作用域：全局作用域、函数作用域、块作用域(es6)；
1、作用域不同： var 函数作用域；let、const 块作用域

相关参考：JS中全局作用域与局部作用域的理解深入理解js的变量提升和函数提升

/*var 函数作用域
 * if、for属于块作用域  
*/
if(true) { var a = 3;}
console.log(a); // 3
for(var i=0; i<4; i++) {
	var b = 5;
};
console.log(i);	// 4 
console.log(b); // 5

/*let 块作用域*/
if(true) { let a = 3;}
console.log(a); // Uncaught ReferenceError: a is not defined
for(let i=0; i<4; i++) {
	var b = 5;
};
console.log(i);	// Uncaught ReferenceError: i is not defined
console.log(b); // 5

2、var 在变量声明之前访问提示 undefined，let 则直接提示 ReferenceError

ReferenceError、TypeError：引用错误和类型错误区别

作用域区别：ReferenceError在作用域中找不到；TypeError在作用域中找到了但是做了它不可能做的事情

二、this 详解

this: 当前执行上下文（global、function 或 eval）的一个属性，在非严格模式下，总是指向一个对象，在严格模式下可以是任意值。

1.全局上下文(global): 指向全局对象

// 在浏览器中, window 对象同时也是全局对象：
console.log(this === window); // true

let a = 37;
console.log(window.a); // 37

2.函数上下文(function)：取决于函数被调用的方式

  // 2.1 非严格模式
  function f1(){
    return this;
  }
  //在浏览器中：
  f1() === window;   //在浏览器中，全局对象是window
  
  // 2.2 严格模式
  function f2(){
   "use strict"; // 这里是严格模式
    return this;
   }
   // 函数直接调用
   f2() === undefined; // true
   
   // 作为对象的属性或方法调用
   window.f2() === window; // true

   
   // 2.3示例: 对象可以作为 bind 或 apply 的第一个参数传递，并且该参数将绑定到该对象。
   var obj = {a: 'Custom'};

   // 声明一个变量，并将该变量作为全局对象 window 的属性。
   var a = 'Global';
   function whatsThis() {
    return this.a;  // this 的值取决于函数被调用的方式
   }
   whatsThis();          // 'Global' 因为在这个函数中 this 没有被设定，所以它默认为 全局/ window 对象
   whatsThis.call(obj);  // 'Custom' 因为函数中的 this 被设置为obj
   whatsThis.apply(obj); // 'Custom' 因为函数中的 this 被设置为obj

3.类上下文(eval)

与在函数中类似，因为类本质上也是函数，但也有一些区别和注意事项

  // 类中所有非静态的方法都会被添加到 this 的原型(静态方法不是 this 的属性，它们只是类自身的属性)
  class Example {
    constructor() {
      const proto = Object.getPrototypeOf(this);
      console.log(Object.getOwnPropertyNames(proto));
    }
    first(){}
    second(){}
    static third(){}
  }
  new Example(); // ['constructor', 'first', 'second']

4.axios 的回调函数中 this 不指向vue实例，为 underfind

详见: axios的回调函数中this不指向vue实例，为undefined