Prepare for interview ing…… 🌞 If there are mistakes welcome to correct

Core rules

This always refers to the object that last called it

The five rules

  • The arrow function is determined by the outer scope
  • If the new keyword appears, a new object is created,thisPoint to the newly created function
  • Show binding (throughapply,call,bindTrigger function,thisPoint to the first argument passed)
  • Implicit binding (when a function has a context object, as inobj.foo())
  • Default binding (in non-strict modethisRefers to the global, in strict mode isundefined)
  • The above rules have descending priorities

sample

Rule 1 Default binding

The title

var name = 'window'
let name2 = 'window10'
const name3 = 'window11'
function getName () {
  var name = 'wanli'
  function inner () { 
    console.log(this.name)
  }
  inner()
  console.log(this.name2)
  console.log(this.name3)
}

getName()
Copy the code

The results of

// window
// undefined
// undefined
// undefined
Copy the code

This in getName() refers to window, because it is the getName() that calls window, and this in inner() refers to window as well. Console. log(this.name2) and console.log(this.name3) print undefined because lets and const are not mounted to Windows.

Rule two: Implicit binding

The title

const User2 = {
  name: "wanli2".getName2: function() {
    console.log(this.name); }}; User2.getName2();Copy the code

The results of

// wanli2
Copy the code

User2.getname2 (), which is a normal function, this points to the object that last called it, User2.

Rule three shows the binding

The title

function getName() {
  console.log(this.name)
  return function() {
    console.log(this.name)
  }
}
var cat = { name: 'wanli' }
var name = Slime

getName()
getName.call(cat)
getName().call(cat)
Copy the code

The results of

// Slime // wanli // Slime // wanliCopy the code

In getName(), this points to window, so print slim. Getname.call (cat) this refers to cat, so print wanli. In getName().call(cat), this of getName() points to window, so it prints slim, and this of cat points to cat, so it prints wanli.

Rule four: New keywords

See the following title

Rule 5 arrow functions

The arrow function does not create its own execution context; the this in the arrow function depends on its external function, that is, whoever calls it inherits this.

The title

var name = "wanli";

function User(name) {
  this.name = name;
  this.getName = function() {
    console.log(this.name);
  };

  this.getName2 = () = > {
    console.log(this.name);
  };
}

const User2 = {
  name: "wanli2".getName2: () = > {
    console.log(this. name); }};var user1 = new User("Slim");
user1.getName(); 
user1.getName2();
User2.getName2(); 
Copy the code

The results of

// Slime // wanli // wanli2Copy the code

User1.getname2 () is the arrow function that points to the outer scope in which the function is defined. The outer scope is User. User2.getname2 (), arrow function. Since User2 is an object, this should point to window.

conclusion

In fact, this pointing is not difficult, more familiar with understanding, this is relatively basic knowledge.

Who is Slim?