• 1.0 es6 箭头函数


    一、概述

    我们常见的window属性和方法有alter,document,parseInt,setTimeout,setInterval,localtion等等,这些在默认的情况下是省略了window前缀的。(window.alter = alter)。

    1. strict mode

    strict mode:js的严格模式,用于指定代码在严格条件下执行。

    为什么使用严格模式?

    消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;

    同样的代码,在"严格模式"中,可能会有不一样的运行结果;

    特点:

    严格模式下,没有直接的挂载者的话,this默认为undefined,正常模式下,没有直接的挂载者(或称调用者)的函数中this是指向window,这是约定俗成的;

    arguments,不允许对arguments赋值,禁止使用arguments.callee,arguments不再追踪参数的变化;

    不用var声明不会提升成全局变量,而是报错;

    2. this调用的四种模式

    首先牢记:js function有四种方式调用,每一种的this都不同。

    2.1 方法调用

    如果函数是一个对象的方法,则它的this指针指向这个对象。

    var x = 11;
    let obj = {
        x: 22,
        say: function () {
            console.log(this.x) //this绑定到了obj对象上
        }
    }
    obj.say(); //console.log输出的是22

    2.2 函数调用

    所谓函数调用,指的是声明一个function,然后调用。正常模式this指向window,严格模式是undefined。

    var a = 11  
    function test1() {
        this.a = 22; // 因为是函数调用,所以这里的this指向了window
        let b = function () {
            console.log(this.a); //这里也指向了window
        }
      b() // 这里也为函数调用 } let b = test1()

    function test1() {
    'use strict'
    console.log(this)
    }
    test1() // 开启严格模式,this指向undefined

    2.3 构造函数调用

    如果是该函数是一个构造函数,this指向new出来的新对象。

    var a = 11  //相当于window.a = 11, 函数中的this是根据上下文改变的
    function test1() {
        console.log(this) // 指向新创建出来的这个对象,这和java一样
        console.log(this.a) // undefined,这个对象还没有a属性
        this.a = 22
        console.log(this.a) // 22 this指向 new 出来的对象
        let b = function () {
            console.log(this.a); // 11 this指向 window对象
        }
        console.log(b)
        b() // 这里为函数调用,所以函数中的this指向window对象
    }
    new test1()

    2.4 apply & call & bind

    这类就是改变this,后面再来补充......

    2.5 传统的函数调用存在的问题?

     js的设计存在一个错误。当一个对象的方法返回了一个函数,在调用这个函数时,函数调用中的this应该绑定到外部函数的this,

    即应该绑定到函数b上,但是它却直接绑定到了window上。

    虽然严格模式规定了this不指向window,但是并没有解决这个问题,于是箭头函数来了。

    var a = 11
    let obj = {
        a: 22,
        b: function () {
            console.log(this) // 对象的方法,所以,这里的this指向当前对象
            return function () {
                console.log(this) // 方法调用,所以,这里的this指向window
                console.log(this.a) // 11 
            }
        }
    }
    
    obj.b()()

    3. 箭头函数

    箭头函数用 " => " 符号来定义。

    箭头函数相当于匿名函数,所以采用函数表达式的写法。

    在使用回调函数时,建议使用匿名函数,这肯定是没有问题的。

    let:用来声明变量,只在let命令所在的代码块内有效;

    const:声明一个只读的常量,一旦声明,常量的值就不能改变;

    箭头函数的使用实例:箭头函数的使用与java中的lambda类似

    // 原始写法(没有使用箭头函数)
    let sum = function (x, y) {
        return x+y
    }
    console.log(sum(1, 2))
    
    // 完整的写法,左边小括号,右边大括号(标准格式)
    const sum1 = (x, y) => {return x+y}
    console.log(sum1(1, 3))
    
    // 当要执行的代码块只有一条return语句时,可省略大括号和return关键字
    let sum2 = (x, y) => x+y
    console.log(sum2(1, 4))
    
    // 当传入的参数只有一个时,可以省略左边的小括号
    let sum3 = x => 1+5
    console.log(sum3(5))
    
    // 当不需要参数时,使用空的圆括号
    let sum4 = () => 1+6
    console.log(sum4())
    
    // 箭头函数在回调函数中是很简洁的
    const array = [1, 2, 3]
    let numbers = array.map(x => x*x);
    console.log(numbers)  // [1, 4, 9]
    
    // 在排序中的使用
    let sort = array.sort((x, y) => y - x)
    console.log(sort) // [3, 2, 1]

    3.1 箭头函数中的this问题

    箭头函数不会创建自己的this,它只会从自己的作用域链的上层继承this,它的this指向始终是看它的上一层函数作用域中的this,如果没有上一层函数,就是window。

    (1) 箭头函数本身与say平级以key:value的形式存在, 箭头函数本身所在的对象为obj,而obj的父执行上下文就是window,因此这里的this.x实际上表示的是window.x,因此输出的是11。

    var x = 11
    let obj1 = {
        x:22,
        say:()=>{
            console.log(this) // 指向window
            console.log(this.x);
        }
    }
    obj1.say(); // 11

    参考文档:

    es6箭头函数

    es6箭头函数中的this

    构造函数与普通函数的区别

    JavaScript 严格模式(use strict)

    this与箭头函数

    箭头函数里面的this

  • 相关阅读:
    读库存扣减系列文章有感
    为什么不要将spring-boot相关依赖打入二方包
    volatile的特性代码验证
    谈谈JVM(基础模型)
    谈String,StringBuilder,StringBuffer随笔
    maven 安装
    Mysql中常用的函数
    web网页打印的方法(浏览器通用)
    web网页打印的方法
    代理服务器的用途
  • 原文地址:https://www.cnblogs.com/shiyun32/p/11181646.html
Copyright © 2020-2023  润新知