The difference between arrow function and ordinary function in JS

JS The difference between arrow function and ordinary function

Link to the original text

The printed results are different

var person = {
    
  say: function () {
    },
  say2: () => {
    }
}
console.dir(person.say)
console.dir(person.say2)

• Arrow function is not prototype and arguments Attribute

this The direction of is different

• Of a normal function this It is determined when the function is running , Basically meet who calls to whom , Except in special cases
• Arrowhead function this It is determined in the function definition , Because the arrow function doesn't have this, So the inner this It points to the scope of the upper layer of the arrow function , And cannot pass call, apply, bind change this Point to

var aaaa = ' Big train '
var person = {
    
  aaaa: ' puddle jumper ',
  say: function () {
    
    console.log(this.aaaa)
  },
  say2: () => {
    
    console.log(this.aaaa)
  }
}
person.say() //  puddle jumper 
person.say2() //  Big train 

Ordinary function say Medium this Because it was person Object call , therefore this It points to person object , The result of printing is puddle jumper

Arrow function say2 Medium this It is determined when the function is defined , And objects do not constitute independent scopes , therefore this It points to the top-level scope window, The result of printing is Big train

Arrow function cannot be a constructor

function Person() {
    
}
const per = new Person()

Use new Four steps to create a constructor

1. Create an empty object
2. Link to prototype
3. change this Point to
4. Return new object

// 1. Create an empty object 
let obj = {
    }
// 2. Assign the object prototype of the object to Person Prototype object 
obj.__proto__ = Person.prototype
// 3. change this Point to 
let result = Person.call(obj, ...arguments)
// 4.  Return new object 
return result

Because the arrow function doesn't have prototype Of a prototype object , So if you use new You're going to report a mistake

Arrow function does not have its own arguments

const aa = ()=> {
    
  console.log(arguments)
}
aa()

Because the arrow function here looks up the upper scope arguments, But the global scope window It's not arguments Attribute , So wrong reporting

---

function aa() {
    
  const bb = ()=> {
    
    console.log(arguments)
  }
  bb()
}
aa() // Arguments [callee: ƒ, Symbol(Symbol.iterator): ƒ]

The arrow function here will find the upper scope aa Functional arguments