preface

Record this pointing to learning front-end interview basics – object-oriented has summarized several cases of this, now extend

1 obj.fun()

This ->.(dot) obj object

Var obj = {name: 'I ', fun:function(){console.log(this.name)}} obj.fun(); / / Lao wangCopy the code

2 New constructor ()

This -> new The new object being created

function Obj(name) { this.name = name; This. Fun = function () {console.log(this.name)}} var obj = new obj (' old king ') obj.fun(); / / Lao wangCopy the code

Prototype. fun=function(){}

This -> will call some child before the.(dot) of the fun common function, because the methods in the prototype object will be called “child.fun()”.

function Obj(name) { this.name = name; } prototype. Fun = function () {console.log(this.name)} var Obj = new Obj(' prototype.fun '); / / Lao wangCopy the code

4 Anonymous function in the self-harmonic callback function

This -> window in strict mode (usestrict), this->undefined because such functions are called without a. Or new!

"use strict"; (function () {console.log(this) // 'use strict' -> undefined 'use strict' this -> window})(); Var arr = [1] arr.foreach (function () {console.log(this) {'use strict' -> undefined 'use strict' this -> window });Copy the code

5 this in the arrow function

This refers to the nearest scope other than the current function – almost all anonymous functions can be used – arrow functions are simplified – arrow functions are shorthand for most anonymous functions – arrow functions only allow this to refer to this in the outer scope, while local variables within the arrow function can still only be used within the arrow function. The arrow function cannot be used! So, arrow functions are still scoped! It just affects this! Local variables are not affected. The arrow function is the underlying equivalent of.bind(), which permanently binds the external this

var obj = { num: 0, arr: ['1', '2', '3'], fun: ForEach () {this.arr.foreach (function (n) {console.log(this.num + n)) // forEach() {this.arr.foreach (function (n) {console.log(this.num + n) } // the arrow function changes the *this of the callback function to the nearest external this * // fun: Function () {// this.arr.foreach ((n) => {// console.log(this.num + n)) // bind (); // bind (); // bind (); ForEach (function (n) {console.log(this.num + n); // forEach(function (n) {console.log(this.num + n); // forEach(function (n) {console.log(this.num + n) Bind (this)) //}} obj.fun()Copy the code

6 Change this (bind/apply/call)

  • Call can be used to temporarily replace this in the function once
    • 1). Immediately call the function before.(point)
    • 2). Automatically replaces this in the function before.(dot) with the specified new object
    • 3). You can also pass arguments to the function to be called
  • Use apply to temporarily replace this in a function
  • You can permanently replace this in the bind function; call cannot replace this in the arrow function
Function addsum(base, bonus1, bonus2) {console.log(' ${base + bonus1 + bonus2} ')} var lw = {ename: Var arr = [5000,2000,1000] addsum. Call (lw, 2000,1000) addsum. Call (lw, 2000,1000) addsum. Var addsum2 = addsum.bind(lw) var addsum3 = addsum.bind(ll,5000) var addsum2 = addsum.bind(ll,5000) Addsum3 (1000,1000) // Lao li's total salary is :7000Copy the code

7 This in DOM events

If you want this to refer to the DOM element, do not change this -> window

var btn = document.getElementsByTagName('button')[0]
btn.onclick = function () { console.log('button', this) }
btn.addEventListener('click', function () { console.log('button', this) })
Copy the code

The last

Above way to summarize their learning summary, there are other ways a, welcome each big comment on Tony welcome each big god more correct, not praise, for supervision and correct (￣. ￣) about the article is often asked about the interview can help you stay, the younger brother can complement to perfect the exchange of learning together, thank you for your bosses (~ ￣ del ￣) ~