ES6新增(部分)

83 阅读5分钟

1. this

this是 JavaScript 语言的一个关键字。 它是函数运行时,在函数体内部自动生成的一个对象,只能在函数体内部使用。

2.改变this指向

  • call方法

    1.call()方法可以进行普通函数的调用

    2.call()方法可以改变this的指向,如果没有参数,this指向window

    3.call()方法可以改变this的指向,如果有一个参数,this指向该参数

    4.call()方法可以改变this的指向,如果有多个参数,this指向第一个参数,剩下的是个参数列表(构造函数继承的案例)

  • apply方法

    1.apply()方法可以进行普通函数的调用

    2.apply()方法可以改变this的指向,如果没有参数,this指向window

    3.apply()方法可以改变this的指向,如果有一个参数,this指向该参数

    4.apply()方法可以改变this的指向,如果有多个参数,第一个参数是null或者window,第二个参数是数组

  • bind方法

    推荐使用第二种形式,第三种用的相对较少,但也是必须掌握的内容。

    bind() 函数会创建一个新函数(称为绑定函数),新函数与被调函数(绑定函数的目标函数)具有相同的函数体(在 ECMAScript 5 规范中内置的call属性)。当目标函数被调用时 this 值绑定到 bind() 的第一个参数,该参数不能被重写。绑定函数被调用时,bind() 也接受预设的参数提供给原函数。一个绑定函数也能使用new操作符创建对象:这种行为就像把原函数当成构造器。提供的 this 值被忽略,同时调用时的参数被提供给模拟函数。

    <script>
 
    // 1、
    var fn1 = function () {
        console.log("我是函数表达式");
    }
    // fn1();
    fn1.call();
 
    var name = "小红";
    var obj1 = {
        name: "小花",
        getName: function () {
            console.log(1111);
            console.log(this.name);
        }.bind()
    }
    obj1.getName();
    /*   obj1.getName();//小花
      obj1.getName.call();//小红 */
    var obj2 = {
        name: "小刚",
        getName: function () {
            console.log(this.name);
        }
    }
    obj2.getName();
    obj2.getName.call();
    obj2.getName.call(obj1); //小花
 
 
    // 2、
    fn1.apply()
    obj1.getName.apply(); //小红
    obj2.getName.apply(obj1); //小花
    console.log(Math.max(20, 30, 50)); //50
    console.log(Math.max.call(window, 20, 30, 50)); //50
    console.log(Math.max.apply(Window, [20, 30, 50])); //50
    console.log(Math.max.apply(null, [20, 30, 50])); //50

 
    // 3、
    // fn1.bind();
    var fn2 = function () {
        console.log(22222222222222);
        console.log(this.name); //小红 小花
        console.log("bind调用");
    }.bind()
    // .bind(obj1)
 
    fn2()
    // fn2.bind();
 
    var name = "喜羊羊";
    var object = {
        name: "懒洋洋",
        getName: function () {
            var name = "美羊羊";
            var that = this;
            console.log(this.name); //懒羊羊
            console.log(name); //喜羊羊 美羊羊
            function func1() {
                console.log(this.name); //喜羊羊
                console.log(name); //美羊羊 undefined
                // var name = "村长羊";
            }
            func1();
            var name = "暖羊羊"
            var name = function () {
                console.log(name); //f name()
                console.log(this.name);
            }
            name();
            var func2 = function () {
                console.log("999999999999999999999999999999");
                console.log(name);
                console.log(this.name); //喜羊羊 懒羊羊
                // }.bind(this)
                return name;
                // console.log(this.name); 
            }.bind(that)
 
            console.log(func2());
            func2.call(this);
        }
    }
    //
    object.getName();
  • ES6
    其实就是 JS 发展过程中的 某一个 版本而已 那个版本的版本号叫做 ES6

    微信
    在最初的时候, 是不具有 微信支付
    随着版本的更新, 在某一个版本内推出了 微信支付

    JS
    在最初的时候, 是只有 var 关键可以声明变量
    随着版本的更新, 在某一个版本内推出了 新的变量声明方式

    JS 的更新
    在 推出ES6 的时候, 这个版本推出的新东西比较多
    所以后续程序员们为了方便记忆, 把 ES6 以后的版本 统称为 ES6+

  • ES6 新增两种变量声明的 方式

     ES5 我们只能使用 var 声明变量
      *      语法 和 var 一样
      * 
      *      let 变量名 = 值
      *      const 变量名 = 值
      * 
      *  let/constvar 的差异
      * 
      *      1. let/const 声明的变量 不允许出现重复的
      *          * 使用 var 声明变量的时候可以出现重复声明, 后一个值会覆盖前一个值
      *          * let/const 不允许
      *      2. let/const 声明的变量没有变量提升
      *          * var 关键字声明的变量有变量提升, 值为 undefined
      *          * let/const 不允许
      *      3. let/const 声明的变量 会受限于 所有的 {}
      *          * 也就是 使用 let/const 声明的变量 是块级作用域
      *          * var 声明的变量 只受限于 函数内部
      * 
      *  letconst 的差异
      *      1. let 声明的叫做变量(后续可以修改内部的值); 
      *          const 声明的叫做常量(后续不能修改内部的值, 也不能修改内部的引用地址)
      *      2. 因为 let 后续可以修改变量的值, 所以他首次定义时, 可以不赋值;
      *          但是 const 声明的时常量, 后续不能重新修改他的值, 所以首次定义时, 必须赋值
    
  • 箭头函数
    如果形参只有一个,则小括号可以省略;

    函数体如果只有一条语句,则花括号可以省略,并省略return,函数的返回值为该条语句的执行结果;

    箭头函数 this 指向声明时所在作用域下 this 的值;

    箭头函数不能作为构造函数实例化;

    不能使用 arguments;

  • 展开运算符

    展开运算符(spread operator)允许一个表达式在某处展开。展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以使用。

    展开运算符不能用在对象当中,因为目前展开运算符只能在可遍历对象(iterables)可用。iterables的实现是依靠[Symbol.iterator]函数,而目前只有Array,Set,String内置[Symbol.iterator]方法,而Object尚未内置该方法,因此无法使用展开运算符。不过ES7草案当中已经加入了对象展开运算符特性。

  • Map和Object的区别
    一个Object 的键只能是字符串或者 Symbols,但一个Map 的键可以是任意值。

    Map中的键值是有序的(FIFO 原则),而添加到对象中的键则不是。

    Map的键值对个数可以从 size 属性获取,而 Object 的键值对个数只能手动计算。

    Object 都有自己的原型,原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。

    Map对象的属性
    size:返回Map对象中所包含的键值对个数
    Map对象的方法
    set(key, val): 向Map中添加新元素

    get(key): 通过键值查找特定的数值并返回

    has(key): 判断Map对象中是否有Key所对应的值,有返回true,否则返回false

    delete(key): 通过键值从Map中移除对应的数据

    clear(): 将这个Map中的所有元素删除