zoukankan      html  css  js  c++  java
  • JavaScript中的this指向?箭头函数与普通函数区别?

    匿名函数,定时器,自执行函数中this指向window

    普通函数直接调用this指向window

    事件函数中this指向触发事件的元素

    对象中方法中this谁调用的方法this指向谁

    构造函数中this指向这个实例

    call,apply,bind方法中this指向第一个参数值

    严格模式下全局作用域中函数中this 指向的是undefined

    箭头函数中this由其外部的作用域中的this决定

    box.onclick = function(){
        let fun = () => {
            console.log(this)    // this 指向 box,外部的函数作用域中this指向box
        } 
        console.log(this)        // this 指向 box
        fun()    
    }
    
    // 普通匿名函数
    box.onclick = function(){
        let fun = function () {
            console.log(this)    // this 指向window,匿名函数
        }
        console.log(this)        // this 指向 box
        fun()    
    }

    简单的说,箭头函数就是对匿名函数的简化

    1.箭头函数形式上做了改变,简化了函数体。

      一般的箭头函数这样写:

    () => {
        return 
    }

      单参数,单语句

    (x) => x+1 //return可以省略
    x => x+1   //括号也可以省略
    // 普通匿名函数写法
    function (x) {
        return x+1
    }

      没有参数时,必须要有个括号

    () => 100
    // 普通匿名函数
    function () {
        return 100
    }

    2.普通函数支持通过arguments 获取未知个数的实参,而箭头函数不支持arguments用法。

    箭头函数中可变参数是利用rest取参数值
    可以利用… 对个数不明参数的参数进行囊括。函数内,可以通过数组的方式。对rest取值,即可拿到实参。

    (x, y, ...rest) =>{
        let i,sum = x+y
        for (i=0; i < rest.length; i++){
            sum += rest[i]
        }
        return sum
    }

    3.箭头函数在es6标准下可使用,普通函数则没有这个限制。

    4.this指向的修改。箭头函数的this指向外部,常在对类的方法进行构造时使用,使函数体内的this始终指向这个类。如果需要this指向当前源,则可使用普通函数。

    5.箭头函数是匿名函数,不能作为构造函数,不能使用new

    6.箭头函数没有原型属性

    7.箭头函数不能当做Generator函数,不能使用yield关键字

    8.箭头函数this指向无法改变

     

  • 相关阅读:
    c语言中 fgetc函数、fputc函数实现文件的复制
    c语言 13-7 利用fgetc函数输出文件的字符数
    c语言 13-6 利用fgetc函数输出文件的行数
    c语言中fgetc函数:显示文件内容
    c语言 13-5
    c语言 获取程序上一次运行时间的程序
    hzwer模拟赛 虫洞
    LYDSY热身赛 escape
    bzoj2330 糖果
    繁华模拟赛 Vicent坐电梯
  • 原文地址:https://www.cnblogs.com/cqweb/p/14179573.html
Copyright © 2011-2022 走看看