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取值，即可拿到实参。

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

JavaScript中的this指向？箭头函数与普通函数区别？

相关推荐