zoukankan      html  css  js  c++  java
  • ES6学习之关键字

    前言:什么是ES6?ECMAScript 6(简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。其中相比较于ES5新增了诸多的特性,并且ES6可转换为ES5的语法。->在线ES6转换为ES5工具
    本系列学习随笔参考了阮一峰老师的《ES6标准入门》

    一、let关键字

    1、解决变量提升现象

    我们在js中定义变量时,用var声明会出现这种情况:

    console.log(a); //不会报错,输出为undefined
    var a=1;
    

    这就是js的变量提升现象,当浏览器在解析函数时,会将var 声明的变量声明到函数的最前端,导致变量在声明之前使用不会报错,此时let关键字就解决了这个问题。let的作用域只在当前的代码块起作用。

    console.log(a); //ReferenceError:a is not defined
    let a=1;
    

    2、不同代码块互不影响

    由于let关键字作用只在当前代码块中起作用,所以不会受外部影响。

    function n() {
      let a = 1;
      if (true) {
        let a = 5;
      }
      console.log(a); // 输出1
    };
    

    3、同一代码块不能重复定义

    {
        var a=1;
        var a=2;//无报错
    }
    {
    	let a=1;
    	let a=2;//Uncaught SyntaxError: Identifier 'a' has already been declared
    }
    

    二、const关键字

    1、const声明一个只读的常量。一旦声明,常量的值就不能改变。

    const PI = 3.1415;
    PI = 3;//Uncaught TypeError: Assignment to constant variable.
    

    其本质是对象所存储的内存地址不可变。

    const PI={}  
    PI.num=3.14159;//不会报错  
    PI={num=3.14159};//VM1187:1 Uncaught SyntaxError: Identifier 'PI' has already been declared
    

    2、const声明的常量必须声明时就赋值;

    const PI; // SyntaxError: Missing initializer in const declaration
    

    3、const声明的常量跟let的作用域一样。

    if (true) {
      const PI = 3.14159;
    }
    console.log(PI); // Uncaught ReferenceError: PI is not defined
    

    三、super 关键字

    我们都知道,this关键字总是指向函数所在的当前对象,ES6又新增super关键字,指向当前对象的原型对象。他有两种使用方式:

    1、当做函数使用

    class parent {
        constructor() {
            console.log(11)
        }
    }
    class child extends parent{
        constructor() {
            super();
        }
    }
    let c = new child();//打印11
    

    当做函数使用时,super()调用会生成一个空对象,作为context来调用父类的constructor,返回this对象,作为子类constructor的context继续调用构造函数。

    2、当做对象使用

    const proto = {
      foo: 'hello'
    };
    const obj = {
      foo: 'world',
      find() {
        return super.foo;
      }
    };
    Object.setPrototypeOf(obj, proto);
    obj.find() // "hello"
    

    上面代码中,对象obj.find()方法之中,通过super.foo引用了原型对象proto的foo属性。

    3、注意区分super与this

    说到super与this的区别,我们就要先来看一下this关键字:
    this关键字最终指向的是调用它的对象。我们可以看下面两个例子;

    function GetThis(){
    	console.log(this);
    };
    GetThis();//打印出window对象。
    

    为什么会这样呢。其实最后的调用我们也可以写成window.GetThis();调用他的就是window对象。
    如果不信的话我们可以再举个例子;

    var getThis={ 
    	user:'me',
    	fn:function(){
    		console.log(this);
    	}
    }
    getThis.fn();//打印的就时getThis对象;
    

    接下来我们再看一个this与super结合的例子就能理解了:

    const proto = {
      x: 'hello',
      foo() {
        console.log(this.x);
      },
    };
    const obj = {
      x: 'world',
      foo() {
        super.foo();
      }
    }
    Object.setPrototypeOf(obj, proto);
    obj.foo()// "world"
    

    上面代码中,super.foo指向原型对象proto的foo方法,但是绑定的this却还是当前对象obj,因此输出的就是world。

  • 相关阅读:
    WebGoat之Injection Flaws
    WebGoat之Web Services
    XPath语法
    用Maven在Eclipse中配置Selenium WebDriver——方法1
    用Maven在Eclipse中配置Selenium WebDriver——方法2
    Enum与enum名字相互转换
    数据库数据类型varchar(n)与nvarchar(n)比较
    网页切图工具
    Html标签
    在VS的Solution Explorer中高亮当前编辑的文件
  • 原文地址:https://www.cnblogs.com/hongxuquan/p/10161631.html
Copyright © 2011-2022 走看看