“This is the 10th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

Hello, everyone, I touch fish small public, the real strong, will not complain, if you do not want to be looked down upon by others, you have to pay more than others ten times a hundred times more effort, to stand higher than others. The last article was on the use of WOW animation; Today we’re going to look at various ways to change the “this” reference.

About this

The direction of this is not determined during function definition. Only when the function is executed can it be determined who this refers to. In fact, this refers to the object calling it.

1. In the global context this refers to the window object
console.log(this) // window

Copy the code
2, inside the function
(1) The event function this refers to the event trigger
Var obj = document.getelementById ("test"); obj.onclick = function () { console.log(this); <button id="test"> </button>;Copy the code
(2) The ordinary function this refers to the caller
function a(){
  console.log(this) // window
}
a();
Copy the code
3. When a function is called by call or apply, this refers to the value of the object passed in
var obj = { fn: function(){ console.log(this); }} obj.fn() // fn this function obj.fn.call("that") //that this string obj.fn.apply("that") //that this stringCopy the code
4. The arrow function does not have this itself, so this in the arrow function looks up
Function wait() {setTimeout(() => {//this points to the current object console.log(this) //Window}, 1000)} wait()Copy the code
5. The reference to this in Vue

This in data refers to the window

The this in the lifecycle function refers to the Vue instance object

JS statement of Vue’s V-ON directive, where this is window

This in computed points to a Vue instance object

In methods, this refers to the vue instance object, while this of the callback is window.

Change the method to which this points

call

The first argument is the new object to which this points. The second argument starts as an argument. The syntax is b.call(a,1,2).

Here’s a useful way to do it: Two objects search each other to see if they have the same properties

Object. The prototype. The hasOwnProperty. Call (pointing to the Object, contains attributes); I often use this method to assign values, such as if the Vue data custom data object and interface data object have the same properties, if so.

var obj = { v: 4, f: 6, i: 7 }; var obj2 = { v: 0, t: 6, i: 5 }; Object.keys(obj).forEach(key => { if (Object.prototype.hasOwnProperty.call(obj2, key)) { obj[key] = obj2[key]; }}); console.log(obj) //{v: 0, f: 6, i: 5}Copy the code

apply

The first argument is the new object to which this points, and the second argument is in the form of an array, equivalent to arguments; Grammar: b.a pply (a, [1, 2])

function fn(a, b) { console.log(this.name, a, b); } var obj = { name: "Amy", fn: function () { console.log(this.name); }}; fn.call(obj, "1", "2"); //Amy 1 2 fn.apply(obj, ["1", "2"]); //Amy 1 2Copy the code

In fact, the two methods are almost immediately called, the result is the same, but the way of passing the parameter is different

bind

Bind, like apply/call, can change the direction of this, but bind does not execute the function immediately. Instead, it returns a new function with this bound, which you need to call again for final execution. Note that multiple calls to bind do not work.

function fn(a,b){
console.log(this.name,a,b)
}
var obj={
name:'Amy',
fn:function(){
console.log(this.name)
}
}
fn.bind(obj,'3','2') ()  //Amy 3 2
Copy the code

new

This in the constructor is bound to the new object being created. When fn’s function is created, we can call it with the new keyword, that is, the constructor to create the object. Here we instantiate an object, Zn

Function fn(){this.name=" zn.name "} var Zn=new fn(){this.name=" zn.name "} var Zn=new fn()Copy the code

return

When the constructor returns Object with a return, when new an instance Object, the reference to this is changed to return Object.

Return {name:" console.log "}} var Zn=new fn() console.log(zn.name) // var Zn=new fn() console.log(zn.name)Copy the code

Conclusion:

In fact, this article does not have too much principle explanation, interested friends can go to study; Well, this is the end of the article, welcome everyone (like + comment + attention) have a question can exchange with each other. I hope this article will be helpful to you and I hope you can support me more. Today is the 10th day of my participation in the first Wenwen Challenge 2022. Come on!