The point of this is also a point that js is relatively confusing. Sometimes it is easy to mistake who this points to.
There are two key points
: 1. this is always executed as the current execution environment.
2. The point of this depends on how the function is called
in the global execution context.
console.log(this == window); // true
var b = 20;
console.log(window.b); //20
this.add = (a,b) =>{
return a+b
}
window.add(5,5) //10
We can see from the code above. In the global var == this. == window.;
function context.
Depends on how the function is called.
Called directly in the global
function foo(){
return this;
}
console.log(foo() == window) //true
This still points to the window
bound to the object to call call, apply.
let obj = {
name:'lly',
age:20,
}
function gud(){
return this.name+':'+this.age
}
console.log(gud.call(obj)) //lly:20
console.log(gud.apply(obj)) //lly:20
call and apply modify the pointing of this, from pointing to window to being
used in the object obj constructor
function myobj(name,age){
this.name = name;
this.age = age;
this.say = function(){
return `我叫${
this.name}，今年${
this.age}`
}
}
let lly = new myobj('lly',22);
console.log(lly.say) //我叫lly，今年22
The constructor points to the current new object.
The process of new creation
1. Create an empty object.
2. Point this to this empty object.
3. Assign properties and methods
4. Return this.
used in object methods
let obj ={
name:'lly',
age:40,
says:function(){
return this.name+':'+this.age
}
}
console.log(obj.says()) // lly:40
When the function is called, it will point to the current function, so what if the function in the object is replaced by an arrow function.
var name = '全局';
var age=20;
let obj ={
name:'lly',
age:40,
says:() =>{
return this.name+':'+this.age
}
}
console.log(obj.says()) //全局:20
It will be magically found that this points to the global again, because the arrow function itself does not have this.
Use on Dom nodes
$('.btn').click(function(){
console.log(this);
})
document.getElementById('btn').onclick = function(){
console.log(this);
}
<button onclick="console.log(this);">点我</button>
this points to the DOM element node.
Summary
Judging the direction of this and the direction of this is determined when the function is called. You can judge whether it is an arrow function
according to a sequence . Judging whether there is a behavior to modify the pointer, call apply bind judges the execution context where it is located
----------------------------- Manual segmentation ------------------------------------
After reading the js that you don't know, make a record and compare the growth of the record.
Several binding rules of this
1. Default binding
function wait(){
console.log(this.a);
}
var a = 2;
wait(); // 2
The this in the above code points to the global variable a, and the default binding binds this to the global object, so it points to the global object. According to the location of the call as mentioned before, the location of the call is called in the global context, so it can be seen from this.
One thing to note is that in strict mode, it has nothing to do with where wait() is called:
2. Implicit binding
function add(){
console.log(this.a+this.b);
}
let objs = {
a:1,
b:2,
add:add
}
objs.add(); // 打印 3
We can see above that we refer the add method to a property of the object obj by reference. When we
call it through objs.add, we will find that this points to our objs. This is implicit binding,
**Implicit loss: **When using implicit binding, it may be lost as implicit binding.
function add(){
console.log(this.a);
}
let objs = {
a:10,
add:add
}
let objd = objs.add;
objs.add(); // 10
objd(); // undefined
What is implicitly bound to objs is just a reference, and it is still a reference when it is used again. Bindings without this will become the default bindings. So it is undefined;
3. Explicit binding (hard binding)
This is also the two call and apply we mentioned above to change the direction of this, which is called explicit binding, because we can see that this method has changed the direction of this.
function add(){
console.log(this.x+this.y);
}
let objs = {
x:1,
y:2
}
add.apply(objs) //3
This has been mentioned above, so let’s briefly talk about it. Apply modifies the point of add to objs. Unfortunately, explicit binding still doesn't solve the missing binding problem we raised earlier.
Hard binding bind method
function add(y){
console.log(this.x + y);
}
let objs = {
x:5
}
let bar = add.bind(objs);
bar(10); //15
bind(…) returns a hard-coded new function that sets the argument as the this context and calls the original function.
4.
The process of binding new to new I think everyone may know that
there are half of the steps in the modification of this in the middle.
function foo(a) {
this.a = a;
}
var bar = new foo(2);
console.log( bar.a ); // 2
When we call foo(…) with new, we construct a new object and bind it to this in the foo(…) call
. new is the last method that can affect the behavior of this binding when a function is called, we call it new binding.
If you want to determine the this binding of a running function, you need to find the direct call location of this function. After finding it,
the following four rules can be applied sequentially to determine the binding object of this.
- called by new? Bind to the newly created object.
- Called by call or apply (or bind)? Bind to the specified object.
- called by the context object? Bind to that context object.
- Default: binds to undefined in strict mode, otherwise binds to the global object