• 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指向无法改变

     

  • 相关阅读:
    Java创建对象的几种方式
    Sqlserver建立Oracle的鏈接服務器
    千万级的大表!MySQL这样优化更好
    ConurrentHashMap和Hashtable的区别
    BTree和B+Tree详解
    为什么MySQL数据库索引选择使用B+树?
    网易跟贴这么火,背后的某个力量不可忽视
    知物由学 | 如何利用人工智能来对抗DDoS攻击?
    揭秘医疗安全防卫战:“我们仍在购买不安全的医疗设备”
    6月第5周业务风控关注 | 《网络安全等级保护条例(征求意见稿)》本周正式发布
  • 原文地址:https://www.cnblogs.com/cqweb/p/14179573.html
Copyright © 2020-2023  润新知