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

 

posted @ 2020-12-23 16:54  腓腓无忧  阅读(80)  评论(0编辑  收藏  举报