This binding pointing rule in JavaScript

Source of the problem

existjsThere is a point of doubt inthisThere are various points of its pointing problems. Let’s take a look at how it binds pointing.

When the function is called,JavaScriptThis will be bound to a value by default
thisThe binding and the defined position (written position) have nothing to do with
thisThe binding is related to the call method and the call location.
thisIt is dynamically bound at runtime

This binding rules

1. Default binding

Notice:Default in strict modethisforundefined, It's not strictlywindow

When calling as an independent function, the default binding rules are used:

function foo() {
  (this) // window
}

function test1() {
  (this) // window
  test2()
}
function test2() {
  (this) // window
  test3()
}
function test3() {
  (this) // window
}

test1()

function fn(fnc) {
  fnc()
}

var obj = {
  bar: function () {
    (this)
  }
}

fn() // window because``The function is taken out,The function is executed independently

2. Implicit binding

Implicit binding rules are used when calling as an object method

function foo() {
  (this)
}

var obj = {
  bar: foo
}
() // obj

var obj1 = {
  bar: foo
}
var obj2 = {
  obj1: obj1
}
obj2.() // obj1

var obj3 = {
  foo: foo
}
var bar = 
// Take out the function and call it independentlybar() // window

3. Show bindings

usecall、apply、bindMake binding

function foo() {
  (this)
}

// bind
var obj = {
  name: 'jpliu'
}
var bar = (obj)
bar() // obj

// call/apply
(window) // window
({ name: 'jpliu' }) // {name: 'jpliu'}
(123) // 123 Number of Number {123} of Number('123') // String The object's'123'  String {'123'}

Bind

passnewWhen a keyword instantiates an object, it is bound to an instantiated object.

function Person(name) {
  (this) // Person {}
   = name // Person { name: 'jpliu' }
}
var p = new Person('jpliu')
(p)

5. Built-in method

// In fact, it is considered implicit binding, because these methods are all from `window`(function () {
  // Maybe it's not that simple here. This is a callback function, which has nothing to do with implicit binding. This is a black box implemented by the browser.  // In v8, there is a test case, mock, which uses call binding, and this is the window that points to  // So this depends on how to implement it  (this) // window
}, 2000)

// 2. Listen to clickconst boxDiv = ('.box')
// The `onclick` method of implicitly binds to the `boxDiv` triggers = function () {
  (this)
}
// `this` of `addEventListener` is implicitly bound// When the `this` of `callback` does not show binding// Use `bind` to display the `this` of the binding `addEventListener`('click', function () {
  (this)
})
('click', function () {
  (this)
})
('click', function () {
  (this)
})

// 3.Array.forEach/map/filter/find// The `this` of the callback function can be bound through the second parametervar names = ['abc', 'cba', 'nba']
(function (item) {
  (item, this)
}, 'abc')
(function (item) {
  (item, this)
}, 'cba')

6. Rule priority

1. The default rule has the lowest priority

2. Show that the binding priority is higher than the implicit binding

function foo() {
  (this)
}

var obj = {
  name: 'obj',
  foo: ('aaa')
}

// [String: 'aaa']
()

Binding priority is higher than implicit binding

var obj = {
  name: 'obj',
  foo: function () {
    (this)
  }
}

// The priority of new is higher than implicit binding// foo {}
var f = new ()

Binding priority is higher than bind

New binding, call, apply are not allowed to be used at the same time, so there is no higher priority for whom
New binding can be used with bind, new binding has higher priority

function foo() {
  (this)
}
var bar = ('aaa')
// foo {} is not [String: 'aaa']var obj = new bar()

7. Beyond the rules

Or undefined

// In non-strict mode// apply/call/bind: When null/undefined is passed, this will be automatically bound to the global object(null)
(undefined)

var bar = (null)
bar()

// Under strict mode,that is `null/undefined`

2. Indirect function reference

var obj1 = {
  name: 'obj1',
  foo: function () {
    (this)
  }
}

var obj2 = {
  name: 'obj2'
}

// Here is the function taken out and assigned to// = The return value of the operation method is the value on the right, the function definition// It is equivalent to taking out the function and then calling it independently, so it points to window;( = )()

3. Arrow function, arrow function cannot be usedbind/call/applyBindthis, arrow functionthisIt is the context environment in which it is defined and cannot be changed. It is staticthis, not dynamically bound

8. Practice

var name = 'window'

var person = {
  name: 'person',
  sayName: function () {
    ()
  }
}

function sayName() {
  var sss = 
  sss() // window: Independent function call  () // person: Implicit call  () // person: Implicit call  ;(b = )() // window: Assignment expression (independent function call), after using the = operator, this function method is returned. The subsequent calls have nothing to do with person}
sayName()

var name = 'window'

var person1 = {
  name: 'person1',
  foo1: function () {
    ()
  },
  foo2: () =&gt; (),
  foo3: function () {
    return function () {
      ()
    }
  },
  foo4: function () {
    return () =&gt; {
      ()
    }
  }
}
var person2 = { name: 'person2' }

// person1.foo1(); // person1(implicit binding)// person1.(person2); // person2 (show binding priority is greater than implicit binding)
// person1.foo2(); // window (no scope bound, upper scope is global)// person1.(person2); // window

// person1.foo3()(); // window (independent function call)// person1.(person2)(); // window (independent function call)// person1.foo3().call(person2); // person2 (the final call returns the function, using display binding)
// person1.foo4()(); // person1 (arrow function does not bind this, the upper scope this is person1)// person1.(person2)(); // person2 (the upper scope is displayed with a person2 bound to it)// person1.foo4().call(person2); // person1(Found on the upper levelperson1)

var name = 'window'

function Person(name) {
   = name
  ;(this.foo1 = function () {
    ()
  }),
    (this.foo2 = () =&gt; ()),
    (this.foo3 = function () {
      return function () {
        ()
      }
    }),
    (this.foo4 = function () {
      return () =&gt; {
        ()
      }
    })
}

var person1 = new Person('person1')
var person2 = new Person('person2')

person1.foo1() // person1
person1.(person2) // person2 (show higher than implicit binding)
person1.foo2() // person1 (this in the upper scope is person1)person1.(person2) // person1 (this in the upper scope is person1)
person1.foo3()() // window (independent function call)person1.(person2)() // window
person1.foo3().call(person2) // person2

person1.foo4()() // person1
person1.(person2)() // person2
person1.foo4().call(person2) // person1

var name = 'window'
function Person(name) {
   = name
   = {
    name: 'obj',
    foo1: function () {
      return function () {
        ()
      }
    },
    foo2: function () {
      return () => {
        ()
      }
    }
  }
}

var person1 = new Person('person1')
var person2 = new Person('person2')

.foo1()() // window
.(person2)() // window
.foo1().call(person2) // person2

.foo2()() // obj
.(person2)() // person2
.foo2().call(person2) // obj

This is the article about this binding rules in JavaScript. For more information about this binding rules, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!