Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

preface

This must be very familiar to everyone, in such as vue.js, various this, shua shua shua, but have encountered the problem of this pointing wrong?

I do. I’m guessing there are others out there.

Therefore, I have summarized some basic concepts and basic uses of this here for your reference.

Where does this appear

This in the global context

Console.log (this) prints out this in the global execution context, and the final output is the window object.

It follows that this in the global execution context refers to the Window object. This is also the only point where this intersects the scope chain, the bottom of which contains the Window object, and this in the global execution context also refers to the window object

This in the context of a function

Call a function in the global environment. This inside the function refers to the global variable Window.

Call a method within an object whose execution context this refers to the object itself

function foo(){
	console.log(this)}; foo();// window

let a = {
	b:0.fn:function(){
		console.log(this)
	}
}
a.fn(); //{ b:0, fn:f() }
Copy the code

This points to summary

  • When the function is called normally, in strict mode this is undefined, and in non-strict mode this refers to the global object window.

  • Call a method within an object whose execution context this refers to the object itself

  • The arrow function in ES6 does not create its own execution context, so this in the arrow function depends on its external function

  • The new keyword builds a new object, and this in the constructor is the new object itself

  • This in a nested function does not inherit this from the outer function.

    var myObj = { 
	name : "Ned".showThis: function(){ 
		console.log(this); // myObj
        var bar = function(){ 
        	this.name = "Azeri"; 
        	console.log(this) // window} bar(); }}; myObj.showThis();console.log(myObj.name); // Ned
console.log(window.name); / / o
Copy the code

    • Solution to this not inheriting

      • The inner functions use arrow functions
      • A variable will be created to store this in the outer function, which is accessible through the scope chain
      var myObj = { 
	name : "Ned".showThis:function(){ 
		console.log(this); // myObj
        var bar = () = >{ 
        	this.name = "Azeri"; 
        	console.log(this) // window} bar(); }}; myObj.showThis();console.log(myObj.name); / / o
console.log(window.name); //  
Copy the code
      var myObj = { 
	name : "Ned".showThis:function(){ 
		console.log(this); // myObj
        var self = this;
        var bar = function (){ 
        	self.name = "Azeri"; 
        	console.log(self) // window} bar(); }}; myObj.showThis();console.log(myObj.name); / / o
console.log(window.name); // 
Copy the code

Change the method to which this points

What call and apply have in common

Can change the context in which a function is executed, handing a method from one object to another, and executing it immediately

The object that calls call and apply must be a Function

The difference between call and apply

The call of the writing

Function.call(obj,param1,param2,...)
Copy the code

Note the following points:

  • The object that calls call must be a Function.
  • The first argument to call is an object. The caller of Function is going to point to this object. If not, the default is the global object Window.
  • Starting with the second parameter, any parameter can be accepted. Each parameter is mapped to the Function parameter at the corresponding location. But if you pass all the parameters as an array, they are mapped as a whole to the first parameter corresponding to Function, after which the parameters are empty.
function func (a,b,c) {}

func.call(obj, 1.2.3)
// the arguments received by func are actually 1,2,3

func.call(obj, [1.2.3])
// func receives the actual parameters [1,2,3],undefined,undefined
// Func accepts three arguments, but we only pass one
Copy the code

The apply of writing

Function.apply(obj[,argArray])
Copy the code

Note that:

  • Its caller must be Function, and it takes only two arguments, the first of which has the same rules as call.
  • The second argument, which must be an array or an array of classes, will be converted to an array of classes, passed into Function, and mapped to the corresponding parameters of Function. This is an important distinction between call and apply.
Func. Apply (obj, {0: 1, 1: 2, 2: 3, length: {0: 1, 1: 2, 2: 3, length: {0: 1, 1: 2, 2: 3, length: 3}) // the arguments received by func are actually 1,2,3Copy the code

Use of call and apply

Here are some usage scenarios for Call and Apply.

Disclaimer: There is no scenario in this example where call or apply is mandatory.

Call usage scenarios

Object inheritance like the following example:

function superClass () {
    this.a = 1;
    this.print = function () {
        console.log(this.a); }}function subClass () {
    superClass.call(this);  // Execute superClass and point this in the superClass method to subClass
    this.print();
}

subClass();
/ / 1
Copy the code

SubClass inherits superClass’s print method and a variable via the call method.

In addition, subclasses can extend other methods of their own.

bind

The use of the bind

The bind() method creates a new function that sets the this keyword to the supplied value when called. And when the new function is called, the given parameter list is taken as the first several items of the parameter sequence of the original function.

Its syntax is as follows:

Function.bind(thisArg[, arg1[, arg2[, ...]]])
Copy the code

The bind method is similar to apply and call in that it can also change the “this” reference inside a function.

The difference is that the bind method returns a function and needs to be called later before it is executed.

While apply and call are called immediately, consider the following example:

function add (c) { return this.a + this.b + c; } var obj = {a:1,b:2} add.bind(obj, 5); // 8 add.bind(sub, 5)(); // After the call, return 8Copy the code

If the first argument to bind is null or undefined, this points to the global object Window.

The last

The use of “ABC” depends specifically on personal use, after understanding, they become tools, how easy to come ~

By the way, I prefer apply more HHH and use it more often, so I usually choose Apply when I can use anyone in the scene.

Point a favor, learning progress together bar