What is it

When we’re doing object-oriented programming, we’re basically dealing with this, which can go wrong if used incorrectly. So what is this? We usually think of it as a pointer, and when used in different places, it points to different things, but the most important thing to note is that this only points to when executed.

“You change or do not change, this is there, no increase, no decrease…..”

2. Binding rules

Since this has different directions in different scenarios, it has certain rules. Generally, this can be used in five scenarios, as follows:

  • The default binding
  • Implicit binding
  • According to the binding
  • The new binding
  • Arrow function binding

Let’s talk about the “This” direction of each scenario.

1. Default binding

The default binding is divided into strict mode and non-strict mode. In strict mode this refers to undefined, and in non-strict mode this refers to the global window.

Non-strict mode:

var a = 'liben';
function moren1() {
    console.log(this.a)  // Print liben this to point to the global window
}
moren1()
Copy the code

Non-strict mode:

var a = 'liben';
function moren2() {
    "use strict"
    console.log(this.a)  // Error this refers to undefined
}
moren2()
Copy the code

Strict mode calls do not affect the default binding:

function moren3() {
    console.log(this.a) / / print liben
}
(function(){
    "use strict"
    moren3()
})()
Copy the code

2. Implicit binding

When a function references a context object, the implicit binding rule binds this in the function to that context object. Usually in this case we think “whoever called it, this refers to whoever.”

var ysObj = {
    b: "liben".yinshi1: function() {
            console.log(this.b)
    }
}
ysObj.yinshi1()  / / print liben
Copy the code

Implicitly bound functions lose their binding object in certain cases, and use the default binding to bind this to a global object or undefined, as follows:

Function aliases lose implicit binding

var ysObj = {
    b: "liben".yinshi1: function() {
        console.log(this.b)
    }
}
var yinshi2 = ysObj.yinshi1  // Function alias
yinshi2()    // undefined loses this binding this refers to window
Copy the code

Parameter passing is an implicit assignment missing the this binding

var ysObj = {
    b: "liben".yinshi1: function() {
        console.log(this.b)
    }
}
function doYinshi(fn) {
    fn()
}
doYinshi(ysObj.yinshi1) // undefined

setTimeout(ysObj.yinshi1, 1000)  // undefined

doYinshi.call(ysObj, ysObj.yinshi1) // undefined
Copy the code

3. Show the binding

With the call(), apply(), or bind() methods, the first argument is an object to which the this is bound when the function is called.

function xianshi() {
    console.log(this.c)
}
var xsObj = {
    c: "xianshi"
}
xianshi.call(xsObj)  // xianshi

xianshi.apply(xsObj) // xianshi

xianshi.bind(xsObj)() // xianshi
Copy the code

Note that bind is special. Bind this multiple times only once, and the reference to this will not change.

function xianshi() {
    console.log(this.c)
}
var xsObj = {
    c: "xianshi"
}
var xsObj2 = {
    c: "xianshi2"
}
xianshi.bind(xsObj2).bind(xsObj)() Xianshi2 bind this bind only for the first time

xianshi.bind(xsObj2).call(xsObj) Xianshi2 bind this pointer will not change
Copy the code

If we pass null or undefined as a binding object for this to call, apply, or bind, these values will be ignored during the call, and the default binding rules will apply.

function xianshi() {
    console.log(this.c)
}
var xsObj = {
    c: "xianshi"
}
var c = "moren"
xianshi.call(null)  // moren
Copy the code

4. New binding

A) create (or construct) a new object b) execute the [[Prototype]] connection C) execute the constructor method and add the properties and methods to the object referenced by this (the new object will be bound to this) D) if the function returns no other object The function call in the new expression will automatically return the new object

function New_(d) {
    this.d = d
}
var dd = new New_("newnewnew")
console.log(dd.d)  // newnewnew
Copy the code

5. Arrow function binding

The arrow function does not have its own this; the this in the arrow function inherits from the this in the outer code block.

var jtObj = {
    f: "jiantou".jiantou: () = > {
        console.log(this.f)
    },
    putong: function() {
        console.log(this.f)
    }
}
var f = "123"
jtObj.jiantou()  / / 123
jtObj.putong()   // jiantou
Copy the code

3. Binding priority

Arrow functions > New Binding > Explicit Binding > Implicit binding > Default binding

For example, using display bindings in arrow functions does not work either:

var jiantou = () = > {
    console.log(this.f)
}
var jtObj = {
    f: "jiantou",}var f = "123"
jiantou.call(jtObj)  / / 123
Copy the code

For example, the new constructor and bind display binding, this does not change, indicating that the new binding takes precedence over the display binding:

function _newBind(h) {
    this.h = h
    console.log(this.this.__proto__ === _newBind.prototype)
}
var newbindObj = {
    h: 'h_obj'
}
var NewBind = _newBind.bind(newbindObj)
new NewBind("liben") // _newBind {h: "liben"} true
Copy the code

Four,

  • Whether the function is called in new (new binding), and if so, this is bound to the newly created object

  • Whether the function is called by call,apply, or by using bind, if so, this binds to the specified object

  • Whether the function is called in a context object (implicitly bound), and if so, this binds to that context object. Usually obj. Func ()

  • If none of the above, use the default binding. If in strict mode, it is bound to undefined, otherwise to a global object

  • If null or undefined is passed to call, apply, or bind as a binding object for this, these values will be ignored during the call and the default binding rules will apply

  • If it is an arrow function, the arrow function’s this inherits the outer block’s this

This article is the author summarizes the compilation, if there is bias, welcome to leave a message correction, if you think this article is useful to you, might as well point a thumbs-up ~

About the author: GitHub Jane Book Nuggets