This point - super classic interview questions

this Binding rules of

Bind one ： The default binding ;

Independent function call
Independent function call can be understood as that the function is not bound to an object for call
Calls to independent functions Point to global object window

Binding two ： Implicit binding ;

Called through an object , Functional this The binding of is the location of the function call , Instead of defining the location of the function
That is, in its call location , Is a function call initiated through an object .
Implicit binding : object.fn()– It is necessary to have an object theme Call it up Function of This process is called implicit binding :
Implicit binding : It will automatically bind the object to the function this, Point to the caller

Kidnap three ： According to the binding ;

Implicit binding has a prerequisite ：
1. There must be a reference to the function inside the called object （ For example, an attribute ）;
2. If there is no such reference , On call , An error will be reported that the function cannot be found ;
3. It is through this reference , Indirect will this Bound to this object ;

call、apply、bind We explicitly bound this Object to point to , So it's called According to the binding

call、apply The first parameter is the same , Later parameters ,apply Is an array ,call For parameter list ;

If we want a function to always be bound to an object
bind The binding of will form a new function When called, the new function , The new function is always bound by our own specified binding this Object

Title binding four ：new binding

JavaScript The function in can be used as the constructor of a class , That is to use new keyword

Use new Keyword to call a function is , Do the following ：
1. Create a new object ;
2. This new object will be executed prototype Connect ;
3. This new object will be bound to the function call this On （this The binding of is completed in this step ）;
4. If the function does not return another object , The expression returns the new object ;

title this Interview question one

var name = "window";

var person = {
    
  name: "person",
  sayName: function () {
    
    console.log(this.name);
  },
};

function sayName() {
    
  var sss = person.sayName;
  sss(); // window:  Independent function call 
  person.sayName(); // person:  Implicit call 
  person.sayName(); // person:  Implicit call  (person.sayName)() In fact, it is equivalent to person.sayName();
  (b = person.sayName)(); // window:  Assignment expression ( Independent function call ) As long as it is an assignment expression -- Is the call of independent functions --- This kind of code will not be written in development 
}

sayName();

title _this Interview question two

var name = "window";

var person1 = {
    
  name: "person1",
  foo1: function () {
    
    console.log(this.name);
  },
  foo2: () => console.log(this.name),
  foo3: function () {
    
    return function () {
    
      console.log(this.name);
    };
  },
  foo4: function () {
    
    return () => {
    
      console.log(this.name);
    };
  },
};

var person2 = {
     name: "person2" };

// person1.foo1(); // person1( Implicit binding )
// person1.foo1.call(person2); // person2( Show binding takes precedence over implicit binding )

// person1.foo2(); // window( The arrow function doesn't this, Do not bind scope , The upper scope is global )
// person1.foo2.call(person2); // window

// person1.foo3()(); // window( Independent function call )
// person1.foo3.call(person2)(); // window( Independent function call )-- The point is to look only at the final this Who is the binding , Here is the call of independent function 
// person1.foo3().call(person2); // person2( The final call returns the function expression ,  The display binding is used )

// person1.foo4()(); // person1( Arrow functions are not bound this,  Upper scope this yes person1)
// person1.foo4.call(person2)(); // person2( The upper scope is shown bound to a person2)
// person1.foo4().call(person2); // person1( The upper level found person1)person1.foo4() Make the upper scope person1, And because the arrow function doesn't this, No binding call, But from the upper scope 

title _this Interview question three

var name = "window";

function Person(name) {
    
  this.name = name;
  (this.foo1 = function () {
    
    console.log(this.name);
  }),
    (this.foo2 = () => console.log(this.name)),
    (this.foo3 = function () {
    
      return function () {
    
        console.log(this.name);
      };
    }),
    (this.foo4 = function () {
    
      return () => {
    
        console.log(this.name);
      };
    });
}
//  Function every time new A new object will be created every time   Every time it comes in this It is also customized according to the parameters you pass in this
var person1 = new Person("person1");
var person2 = new Person("person2");

person1.foo1(); // person1
person1.foo1.call(person2); // person2( Display is higher than implicit binding )

person1.foo2(); // person1 ( In the upper scope this yes person1)
person1.foo2.call(person2); // person1 ( In the upper scope this yes person1)

person1.foo3()(); // window( Independent function call )
person1.foo3.call(person2)(); // window
person1.foo3().call(person2); // person2

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

var obj = {
    
  name: "obj",
  foo: function () {
    },
};

title _this Interview question 4

var name = "window";

function Person(name) {
    
  this.name = name;
  this.obj = {
    
    name: "obj",
    foo1: function () {
    
      return function () {
    
        console.log(this.name);
      };
    },
    foo2: function () {
    
      return () => {
    
        console.log(this.name);
      };
    },
  };
}

var person1 = new Person("person1");
var person2 = new Person("person2");

person1.obj.foo1()(); // window  Calls to independent functions 
person1.obj.foo1.call(person2)(); // window person1.obj.foo1.call(person2) It's change foo1 Of this Pointing to person2  however foo1 The return value is an independent function   The call of independent function is window
person1.obj.foo1().call(person2); // person2  Implicit binding person2

person1.obj.foo2()(); // obj  Upper scope   The upper scope of this function mainly depends on the return value foo2 Who transferred it   Here is obj  Retrieved 
person1.obj.foo2.call(person2)(); // person2  Upper scope   The upper scope of this function mainly depends on the return value foo2 adopt call change this Become person2  So it is person2
person1.obj.foo2().call(person2); // obj  The upper scope is foo2 Become... By implicit binding obj,  The arrow function doesn't this  Look at the direction of the upper scope 

//

//  Understanding of the upper scope 
// var obj = {
    
// name: "obj",
// foo: function() {
    
//  The upper scope is global 
// }
// }

// function Student() {
    
// this.foo = function() {
    
//  The upper scope is function Student
// }
// }