preface

This article sorted out the five binding rules of JS this and common JS pointing questions. If you have different views on the answer, you are welcome to discuss in the comment section. Of course, you are also welcome to point out the question in the comment section.

1. Understand this

What is this? First of all, this does not refer to itself! This is a pointer to the object on which the function is called. Next, you need to know the five binding rules for this

Five binding rules for this

Priority: 5>4 > 3 (bind>apply/call) > 2 > 1

1. Default binding rule: call directly,this refers to window.

2. Implicit binding rules: whoever calls points to whoever. This always refers to the object that last called it

3. Explicit binding rules: This refers to the first pass of call, apply, and bind.

4. New binding rule: This refers to the object generated by the constructor.

Arrow function

3. The orientation of this

1. Arrow function

• This will not be changed
• When you create an arrow function, the this inside the arrow function points to the outer this.

2, new

When you call a function using the new keyword, this in the function must be the new object created by JS.

function func(){
    console.log(this);
}
new func() // this points to func {}
Copy the code

3, the bind

Bind means function.prototype.bind ().

The bind() function creates a new binding function that requires a () call. When called, this of the new function is specified as the first argument to bind(), and the remaining arguments are used as arguments to the new function. Call bind () multiple times, primarily the first bind

function func() {
    console.log(this); / / 1
}
func.bind(1.2.3).bind(2) ()Copy the code

Binding functions can also be constructed using the new operator, (bind and new)

function func() {
    console.log(this) //func {}
}
fun = func.bind(1);
new fun() // The priority is high
Copy the code

4. Apply and call

This of apply() and call() is specified as the first argument and is called directly, whereas bind creates a new function

• The rest of apply’s parameters are placed in an array.

• The rest of the call arguments are comma-separated.

  function func(args) {
      console.log(this,args) //[Number: 1] 2
  }
  func.apply(1[2.3]);
  func.call(1.2.3)
  Copy the code

5, implicit binding operation, who calls to whom

function func() {
    console.log(this)  //{name: 'hzy', func: [Function: func]} -- point to obj
}
obj = {name:'hzy'} // Assign
obj.func = func;
obj.func()
​
var name = "windowsName";
var a = {
    name: "Cherry".fn : function () {
        console.log(this.name);      // Cherry}}window.a.fn();  // The last call is a, so it points to a
​
var name = "windowsName";
var a = {
    name : null.// name: "Cherry",
    fn : function () {
        console.log(this.name);      // windowsName}}var f = a.fn;   // The fn method of object A is assigned to variable f, but it is not called
Var f= a.fein () -- prints null
f();  // Fn is called last, so point to window and print windowName
Copy the code

6. Direct call

This will point to the global object when the function is called directly if it does not satisfy the previous scenario. The Global object is Window in the browser environment and Global in node.js.

function func() {
    console.log(this) // window/global
}
func()
​
function outerFunc() {
    console.log(this) // { x: 1 }
    function func() {
        console.log(this) // Window
    }
    func()
}
outerFunc.bind({ x: 1}) ()Copy the code

7. Not in the function

Scenarios that are not in functions can be classified as < scrip > tags in the browser or module files in Node.js. This refers to window or Global

8 the Prototype.

Array.prototype._map = function (callback) {
    if(typeofcallback ! = ='function') {
        throw new Error('callback is not function')}console.log(this)    //this---------------------------> instance object [1,5,6]
    return this.reduce((prev,item,index,arr) = > {
        prev.push(callback(item, index, arr))
        return prev
    }, [])
}
​
let val = [1.5.6]._map(item= > item+ 1)
Copy the code

conclusion

Feel good writing, helpful to you, you can share with people around you, the more you share knowledge, do not be stingy

Follow-up update front-end other small knowledge summary, please pay attention to me, tidy up, share with you, we learn front-end together