What is the difference between JavaScript normal functions and arrow functions?

The content of this article is about the difference between ordinary JavaScript functions and arrow functions? It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

I often use arrow functions, but I don’t have an in-depth understanding of arrow functions. Now let’s look for the differences between these two functions

1. The arrow function itself does not have a prototype (prototype )

Since the arrow function has no prototype, the arrow function itself does not have this

let a = () => {}
console.log(a.prototype) // undefined
let b = function () {}
console.log(b.prototype) // Object

2. The this of the arrow function points to this## inherited from the first ordinary function in the outer layer when it is defined. #

let a;
let barObj = {
    msg: 'bar的this指向'
}
let fooObj = {
    msg: 'foo的this指向'
}
bar.call(barObj)
foo.call(fooObj) // { msg: 'bar的this指向'  }
bar.call(fooObj)
a() // { msg: 'foo的this指向' }

function foo() {
    a()
}
function bar () {
    a = () => {
        console.log(this)
    }
}

It can be concluded from the above example:

The this of the arrow function points to the first ordinary function in the outer layer when it is defined, which has nothing to do with the location of use.

The this of the inherited ordinary function points to Change, this of the arrow function will also change.

You cannot directly modify the this of the arrow function

You can modify the this pointer of the inherited ordinary function, and then the this of the arrow function will also change accordingly

3. Arrow function Using arguments

let b = () => {
        console.log(arguments);
    }
    b(1,2,3,4) // arguments is not defined

    function bar () {
        console.log(arguments);  // 完成第二个普通函数
        bb('完成第一个普通函数')
        function bb() {
            console.log(arguments); // 完成第一个普通函数
            let a = () => {
                console.log(arguments); // 完成第一个普通函数
            }
            a('箭头函数')
        }
    }
    bar('完成第二个普通函数')

From the above we can draw the following two points

When the arrow function points to window, arguments will report an undefined error
1. If it is not window, then It is the arguments of the first ordinary function in the outer layer

4. The arrow function cannot use new

No matter where this of the arrow function points, using new to call the arrow function will report an error, arrow The function has no constructor

let a = () => {}
    let b = new a() // a is not a constructor

[Related recommendations:

JavaScript video tutorial]

The above is the detailed content of What is the difference between JavaScript normal functions and arrow functions?. For more information, please follow other related articles on the PHP Chinese website!