Arrow function

This is the 27th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

🙊 foreword: arrow function believe that we have used, will use the people are always successful, afraid of using the wrong may choose not to, more code a few lines of words. But people who have used it say it’s great. So this article to understand the arrow function play.

Arrow function using

Let’s get a deeper understanding of using arrow functions based on the comparison of normal functions and arrow functions

1. Grammatical format

Our normal function syntax looks like this

function(){function body contents}Copy the code

Whereas our arrow function looks like this, isn’t it neat

(Parameter)=>{body content}Copy the code

🏀 For example: we iterate through the array and modify the array

var hobby=["Eat"."Sleep"."Play"]
    var arr = hobby.map(function(item){ // Ordinary function implementation
        return "Joe likes it."+item;
    })
    var brr =hobby.map((item) = >{return "Tom likes it."+item}); // Arrow function implementation
    console.log(arr)
    console.log(brr)
Copy the code

🏀 If you want to return an object, change the way you write it, the wrong way will be treated as the body of the function

 var obj1 = () = >{name:"Romantic code farmers."; age:20} // Error
 var obj = () = >({name:"Romantic code farmers.".age:20}) // Write it correctly
  console.log(obj1(),"The wrong way to write it")
  console.log(obj(),"The right way to write it.")
Copy the code

The subtotal:

1. If you have only one argument, you can omit (). If the function body has only one statement, you can omit {} and returnVar BRR = Caldwell. Map (item=>" Caldwell "+item);
2. As anonymous functions, arrow functions cannot be named

2. This point

Arrow functions do not have their own execution context. So there’s no this,arguments,

The arrow function’s this points to the parent of its object

🏀 here’s an example

    var a = {
        name: "May you sail a thousand ships.".init: function () {
            console.log(this)
            console.log(this.name)
        }
    }
    var b = {
        name: "I get what I want at last.".init: () = > {
            console.log(this)
            console.log(this.name)
        }
    }
    a.init()
    b.init()
Copy the code

You can see that the normal function this points to its own object, while the arrow function this looks outside and points to the window, which has no output because it has no name field.

The arrow function changes this from “dynamic” to “static”, essentially inheriting the parent object “this”

Arrow functions’ this points to this in the outer scope of the definition, and normal functions’ this points to the context of the call.

3. Cannot be used as a constructor

Arrow functions, as anonymous functions, have no prototype and do not have their own this to point to, so they cannot use the new constructor

Here’s an example:

    function mao(name,age){ // A normal function
        this.name=name,
        this.age=age
    }
    var fn = (name,age) = > ({ // Arrow function
        name:name,
        age:age
    })
    var b = new mao("Romantic code farmers.".100) // A normal function
    console.log(b)
    var a = new fn("Zhang".200) // Arrow function
    console.log(a)
Copy the code

Analysis:

💠 How does the new constructor work

1. Create an empty object {};
2. The stereotype chain of the object to be instantiated points to that object stereotype.
3. Bind the object to a reference to this
4. Returns the object.

Since arrow functions have no prototype pointer to this, arguments cannot be used.

🏀 post a handwritten new constructor here, and a future article exploring constructors in depth

function mao(name,age){
        this.name=name;
        this.age=age;
    }
/ / write a new
function _new(fn, ... args){ / /... Args is the ES6 expansion; arguments can also be used
    // Create an empty Object with Object
    let obj=new Object(a);// The new object will be connected by prototype
    obj.__proto__=fn.prototype;
    // The new object is bound to the function call's this
    letres=fn.call(obj,... args);// Return obj if null or undefined, res if not
    return res instanceof Object? res:obj; }var a= _new(mao,"Romance till death do us part.".20)
console.log(a)
Copy the code

💠 is at the end

🙊 if the above error, welcome the big guy pointed out, very grateful.

💌 may you go through a thousand sails and finally get what you want 💌

A romantic universe, but also cherish the world’s daily code farmers