- In js, this means: 'this, current', it is a pointer variable, which dynamically points to the running environment of the current function
- When calling the same function in different scenarios, the point of this may also change, but it always points to the real caller of the function; if there is no caller, it points to the global object window
Ordinary function: Regarding this, whoever calls it will point to whom, if there is no caller, it will point to the global object window
Arrow function: the this of the arrow function points to the object used by the function scope
One: this point in the global environment: this always points to window, whether it is strict mode or not
Console.log(this)://window
Window.console.log(this)//console method under window
The complete writing method of Console.log() is window.console.log(), window can be omitted, and window calls the console.log() method, so this points to window at this time
Two: this in the function: this in the ordinary function is divided into two situations, in strict mode and in non-strict mode
In strict mode:
Function test (){ ‘user strict’ console.log(this)}
test(); //undefined
window.test();//window
In strict mode, directly test () calls the function, this points to undefined, and window. Can be omitted or abbreviated
In non-strict mode:
Function test(){ console.log(this)}
test() //window
window.test()//window
In non-strict mode, the function object is called through test() and window.test(), and this points to window
Three: this in the object: the this of the object's internal method points to the object that calls these methods, that is, whoever calls it points to whom
- Layer object:
Let obj={ name:‘蒙蚜“，skill:function(){ name:”盟栝“ console.log(this.name)}}
obj.skill() //Mongolia
Call the obj.skill() method, and the returned value is Mongolian, indicating that this points to obj at this time
2. Second-level objects:
Let obj={name: "Mongolia", skill: function(){name: "Meng Cui"; console.log(this.name)}; obj2:{}name: "Little Braised Egg", skill2:function( ){name: "Master Luban", console.log(this.name)}}}
Obj.skill();//Mongolia
Obj.obj2.skill2();//Small marinated egg
The this of the internal method points to the object closest to the called function. The order of calling the skill2() method is: obj.obj2.skill2(), and the return value is a small egg, indicating that this in the skill2() method points to x to obj2
Summary: 1. The definition of a function does not affect its this point, which is only related to the object calling the function
2. For multi-level nested objects, the this of the internal method points to the object closest to the called function
Four: this in the arrow function: points to the object used by the function scope
Important features of the arrow function: there is no this he arguments in the arrow function, there is really no
The arrow function does not have its own this point, it will capture the outer execution environment where it is defined, and inherit this this value, pointing to the object where the current definition is located, the this point of the arrow function is determined when it is defined, and it will be forever Nor will it change. Even if you use call(), apply(), bind() and other methods to change the direction of this, it will not work
Example 1
Var isObject={ a:'hhh',functions}{console.log("object", this}}
isObject.functions() //object window
The global variable Obj is declared, and this points to the object of the global scope where the arrow function is located, that is, the window object
Example 2
Let show=()=>{console.log(this)}
Let obj={show:show}
Equivalent to obj={ show: ()=>{console.log(this)}
Show() //window
Window.show()//window
Obj.show();//window
Window.obj.show()//window
- Since the show function is an arrow function, it cannot bind this by itself, so find its upper scope. If the parent scope is still an arrow function, then look up, layer by layer until the point of this.
- The return value of Window.show() is window, so this points to window at this time
- Window.obj.show(), obj is an object, not an arrow function, so stop when you find it here, this is bound to obj. Window calls obj, so this in obj also points to window
This in the five constructors; points to the instance
this in the constructor
Supplement: The first letter of the function name of the constructor is capitalized, which is convenient for distinguishing ordinary functions
Function Person(name,age,sex){ this.name=name;this.age=age;this.sex=sex}
Supplement: The instance in the constructor must be declared with new
Let p=new Person(“wcc”,18,”boy”)
Console.log(p.age) //18
Console.log(p.name)//wcc
Console.log(p.sex)//boy
As can be seen from the above figure, this in the constructor points to the instance created under the constructor
Six this in the prototype chain: the value of this in an inheritance mechanism still points to the object it originally belongs to, not the object it belongs to when it is found from the prototype chain
Seven methods to change the point of this
1. The call(a,b,c) method receives three parameters, the first is the this pointer, the second and the third are the actual parameters of the transfer function, which can be numbers, strings, arrays, etc. It will be all right
Function fn(n1,n2){console.log(this);;console.log(n1,n2)}
Fn.call() //this:window
Let obj={fn:fn}
Fn.call(obj)//this:obj;n1,n2:undefined
Fn.call(1,2)//this:1,n1=2,n2=undefined
Fn.call(obj,1,2) //this:obj,n1=1,n2=2
Several special properties of the Call method
In non-strict mode: fn.call(undefined);//this=>window
Fn.call(null)//this=>window
In strict mode: fn.call(undefned) //this=>undefined
Use strict Fn.call(null):/this=>null
2. apply(a,[b]) is basically the same as call, the only difference is the way of passing parameters, apply puts the parameters that need to be passed to fn() into an array (or class array) and passes them in, although it is written An array, but it is also equivalent to passing fn() one by one
Fn.call(obj,1,2)
Fn.apply(obj,[1,2])
Function fn(n1,n2){console.log(this);console.log(n1,n2);console.log(arguments)}
Let obj={fn:fn}
Fn.apply(abj,[1,2])
fn.apply(abj,1,1)//report error
fn.apply(abj,[11,'appply',{a:123}]) //The second parameter must be an array, otherwise an error will be reported
- bind()
bind(a,b,c): the syntax is exactly the same as call, the difference lies in whether to execute immediately or wait for execution, bind is not compatible with IE6-IE8
The only difference between bind and call is that call directly changes the pointer of the function test, while bind generates a new function test2(), which changes the pointer
//call() method: change this in fn, and execute fn immediately
Fn.call(obj,1,2)
//apply() method: change this in fn, fn does not execute
Fn.bind(obj,1,2)
Example:
Bind and call method calls are similar in form, but the principle is completely different
Fn.call(obj,10,20) //fn is executed first, point this in fn to obj, and pass parameters 10 and 20 to fn
Fn.bind(obj,10,20)//bind is to first point this in fn to obj, and pass parameters 10, 20 to fn in advance, but at this time fn is not executed, only this points when fn is executed and pass parameters to work
Fn.bind(obj,10,20) //There will be no output
Fn.bind(obj,10,20)();//There will be output after calling
Requirements: When you click on the box box, you need to execute fn, and let this in fn point to obj
oBox.onClick=fn; //Fn is executed when clicked, but this in fn is oBox
oBox.onClick=fn.call(opp);//When binding the event, fn has been executed immediately (call itself is an immediate execution function), and then the return value of fn execution is bound to the event
oBox.onClick=fn.bind(opp); //fn.bind(opp); fn calls the bind method on funciton.prototype, execute this //function(){fn.call(opp)}
oBox.onClick=function(){this:oBox;fn.call(opp)}//
Same point:
Call, apply and bind are all public internal methods of JS functions. They all reset the this of the function and change the execution link of the function.
difference:
Bind is to create a new function, and call and apply are used to call the function
Call and apply have the same function, except that the parameters provided by call for the function are listed one by one, while the parameters provided by apply for the function are an array