vue深度解析----var和let的区别

最新推荐文章于 2024-03-21 10:15:18 发布

新城山语

最新推荐文章于 2024-03-21 10:15:18 发布

阅读量439

点赞数

文章标签： javascript 前端 servlet

本文链接：https://blog.csdn.net/qq_30339573/article/details/126913320

版权

vue深度解析

es6 语法- var -const- let 用法详解

javascript作用域

javascript只有函数作用域，没有块级作用域。
即在fucntion里面定义的变量是有作用域的，if、for等代码块定义的变量是没有作用域的。
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>ES6语法-var-const-let用法详解</title>
</head>

<body>
  <div id="app">
    <button>测试1</button>
    <button>测试2</button>
    <button>测试3</button>
  </div>
  <script>
    //作用域代码
    if(true){
      //externalVal没有作用域
      var externalVal = "externalVal";
    }
    function domainTest(){
      var funVal ="funVal";
      //这里可以访问到externalVal和funVal
      console.log(externalVal + "----" + funVal);
    }
    domainTest()
    if(true){
      console.log(externalVal); //可以访问到externalVal
      //console.log(funVal); 这一行访问不到变量，报错
    }

    //使用var定义变量的局限性
    var btns = document.getElementsByTagName('button')
    for(var i = 0;i < btns.length;i++){
      btns[i].onclick = function(){
        alert("点击了第" + i + "个按钮");
      }
    }
  </script>
</body>
</html>

是因为for

为什么会一直出现的是3呢？这是因为作用域，for代码块没有作用域，当循环for结束的时候，监听的i是几？肯定是3，那么当我们点击按钮的时候i就是3。所以打印出来的就是"点击了第三个按钮 " var作用域在js中存在的缺陷，在ES6版中，使用新定义的变量let就可以解决。

let用法

是为了解决es6之前版本，var作用域本身存在缺陷，使用新的定义变量let 可以解决。

添加代码的话

  <div id="app">
    <button>测试1</button>
    <button>测试2</button>
    <button>测试3</button>
  </div>
  <script>
    //作用域代码
    if(true){
      //externalVal没有作用域
      var externalVal = "externalVal";
    }
    function domainTest(){
      var funVal ="funVal";
      //这里可以访问到externalVal和funVal
      console.log(externalVal + "----" + funVal);
    }
    domainTest()
    if(true){
      console.log(externalVal); //可以访问到externalVal
      //console.log(funVal); 这一行访问不到变量，报错
    }

    //使用var定义变量的局限性
    let btns = document.getElementsByTagName('button')
    for(let i = 0;i < btns.length;i++){
      btns[i].onclick = function(){
        alert("点击了第" + (i +1)+ "个按钮");
      }
    }
  </script>

因为let定义的变量自带块级作用域。

const用法

当我们希望定义的变量不要被二次赋值的时候（也就是常量），使用const关键字来定义。

const c = 80;
c = 100；//报错 
const c; //报错，常量定义的时候必须赋值

ES6语法--对象的增强写法

ES5中对象最令人觉得繁琐的就是构造函数、prototyp、依靠原型链实现继承。因为它使用的不是面向对象的语法，所以使用过程比较混乱。

代码

    function Player(name,age){//定义对象
      this.name = name;
      this.age = age;
    }
    //定义对象的成员函数
    Player.prototype.toPrint = function(){
      alert(this.name + "---" + this.age)
    }
    var player1 = new Player("james",35);
    var player2 = new Player("kobe",39);
    player1.toPrint()  //james---35  调用函数方法
    player2.toPrint()  //kobe---39

ES5中对象最令人觉得繁琐的就是构造函数、prototyp、依靠原型链实现继承。因为它使用的不是面向对象的语法，所以使用过程比较混乱。下面我们结束如何使用简介的ES6语法定义对象和继承的增强语法。

10.说一说Vue2.0 双向绑定的原理与缺陷？得分点： Object.defineProperty、getter、setter

标准回答： Vue响应式指的是：组件的data发生变化，立刻触发视图的更新原理： Vue 采用数据劫持结合发布者-订阅者模式的方式来实现数据的响应式，通过Object.defineProperty来劫持数据的setter，getter，在数据变动时发布消息给订阅者，订阅者收到消息后进行相应的处理。通过原生js提供的监听数据的API，当数据发生变化的时候，在回调函数中修改dom 核心API：Object.defineProperty 作用: 用来定义对象属性特点：默认情况下定义的数据的属性不能修改描述属性和存取属性不能同时使用，使用会报错响应式原理：获取属性值会触发getter方法设置属性值会触发setter方法在setter方法中调用修改dom的方法加分回答 Object.defineProperty的缺点：

一次性递归到底开销很大，如果数据很大，大量的递归导致调用栈溢出不能监听对象的新增属性和删除属性无法正确的监听数组的方法，当监听的下标对应的数据发生改变时

教育政府医疗