In what scenario can we not use the arrow function?

Arrow function

Arrow functions are closely related to our work ; It can be said that the birth of arrow function , It has brought great convenience to our work . however What are the disadvantages of arrow functions ？ When can't you use the arrow function ？  Do you understand that ?
We think the arrow function is very advanced , Can avoid this The problem of , Arrow functions are used in all scenarios . Used in a scenario that cannot be used , There is a problem , You don't know what the problem is , Isn't that just adding to the mess ！ Is it right? ！

Here is a question for you first ：

const obj = {
    name: ' Zhang San ',
    getName() {
        return this.name
    },
    getName1: () => {
        return this.name
    }
}
obj.__proto__.getName2 = function() {
    return this.name
}
obj.__proto__.getName3 = () => {
    return this.name
}
console.log(' Ordinary function ',obj.getName())
console.log(' Ordinary function ',obj.getName2())
console.log(' Arrow function ',obj.getName1())
console.log(' Arrow function ',obj.getName3())
 Copy code 

What do you think will be output ？

Think quietly first ！

3,2,1 Publish the answer !

If the answer is wrong , Don't lose heart , After all, the Internet has 35 Delay of , Affect your operation and thinking , After reading this article , Make sure you don't get it wrong ！

What are the disadvantages of arrow functions ？

1. No, arguments, If you want to use , It can be used rest Parameters instead of . Here we define an arrow function, a normal function, and a function that uses rest Arrow function of parameter ：

   const fn1 = () => {
   console.log('arguments', arguments)
   }
   fn1(100, 200)
   
   function fn2(){
   console.log('arguments', arguments)
   }
   fn2(100, 200)
   
   const fn3 = (...values) => {
   console.log('values', values)
   }
   fn3(100, 200)
    Copy code 

   
   image.png

2. Unable to get apply、call、bind change this Point to Here we are defining an arrow function and an ordinary function

   const fn3 = () => {
   console.log('this', this)
   }
   fn3()
   
   function fn4(){
   console.log('this', this)
   }
   fn4()
    Copy code 

   Arrowhead function this It's his father's container this, Not determined at the time of implementation , It is defined at the time of definition .

   Pictured above , We can find out , The arrow function is executed twice  this It's all pointing Windows, Use call Nothing has changed , And ordinary functions The first time is pointing to Windows, The second time it became our incoming

When can't you use the arrow function ？

1. Object method , Not applicable to arrow function

const obj = {
    name: ' Zhang San ',
    getName() {
        return this.name
    },
    getName1: () => {
        return this.name
    }
}
 Copy code 

We define... In the object Ordinary function ：getName and Arrow function getName1, Next, let's call ：

console.log(' Ordinary function ',obj.getName())
console.log(' Arrow function ',obj.getName1())
 Copy code 

Here is a meditation for you 3s What output ？

Publish the answer ： We find that arrow function doesn't seem to get value ！

Why in object methods , Arrowhead function this Point to something other than this object ？

1. this Always point to the caller of the function

2. In the arrow function ,this It refers to the object where it is defined , Instead of using the object . let me put it another way , Arrow function does not have its own this, Instead, it inherits from the parent scope this.

obj.getName() in this Point to the caller of the function , That is to say obj example , therefore this.name = " Zhang San ".

getName1() Define through the arrow function , Arrow functions do not have their own this, Will inherit the parent scope this.

therefore obj.getName1() Execution time , The scope at this time points to window, and window No definition age attribute , All empty .

It can be concluded from the example that ： It is not appropriate to use arrow functions for functions defined in an object .

2. In the prototype method , Not applicable to arrow function

const obj = {
    name: ' Zhang San ',
}
obj.__proto__.getName = function() {
    return this.name
}
obj.__proto__.getName1 = () => {
    return this.name
}
 Copy code 

We define again in the object Ordinary function ：getName and Arrow function getName1, Next, let's call ：

console.log(obj.getName())
console.log(obj.getName1())
 Copy code 

Here is another meditation for you 3s What output ？

bang bang bang Publish the answer ：

Why? ？

The reason for the problem is this Point to window object , This is very similar to using arrow functions to define methods in objects .

3. Constructors don't work either ！

We have defined again Normal constructor ：Foo and Arrow function Foo1, Next, let's call ：

function Foo (name, sex) {
    this.name = name
    this.sex = sex
}
const Foo1 = (name, sex) => {
    this.name = name
    this.sex = sex
}
console.log(' Normal constructor ：', new Foo(' Zhang San ', ' male '))
console.log(' Arrow function ：', new Foo1(' Zhang San ', ' male '))
 Copy code 

Not only can't , I also reported an error ！

Why? ？

Constructor is through new Keyword to generate object instances , The process of generating an object instance is also to bind the instance through the constructor this The process of , The arrow function does not have its own this. So you can't use arrows as constructors , You can't go through new Operator to call the arrow function .

4. Callback function in dynamic context

such as , We need to add a click event to a button ：

const btn1 = document.getElementById('btn1')
btn1.addEventListener('click', () => {
    this.innerHTML = 'clicked'
})
 Copy code 

If we don't need to use... In the callback this, Then there is no problem , however ！ Using the this, Then the problem is huge ！

Why? ？

Arrowhead function this Points to his parent scope （ This points to window）, Instead of pointing to this button. At this time, we need to use ordinary functions .

5. Vue Life cycle and method Arrow functions cannot be used in

image.png

Why not ？

Vue It's essentially an object , We said that in object methods , Not applicable to arrow function . His essential and object methods , Not applicable arrow functions are the same .

So I have a question ：Vue no way , As one of the big hot frames react Would you? ？

The answer is ：react That's ok

because Vue The component is essentially a JS object ;React Components （ Not Hooks） He is essentially a ES6 Of class

If you don't believe me, we'll know by testing

class Man {
    constructor(name, city) {
        this.name = name
        this.city = city
    }
    getName = () => {
        return this.name
    }
}
const f = new Man(' Li Si ',' Shanghai ')
console.log(f.getName())
 Copy code 

image.png

Focus on

• Use arrow functions skillfully , Also for functions  this（ a key ） sensitive

• Vue The component is essentially a JS object ;React Components （ Not Hooks） He is essentially a ES6 Of class, The two are different

The end

About this article ：

source ： It's a foreign persimmon

https://juejin.cn/post/7103702621369663518