JavaScript this calling rules description_javascript skills

JavaScript function calling rule 1
(1) Global function calling:

Copy code The code is as follows:

function makeArray( arg1, arg2 ){
return [this , arg1 , arg2 ];
}

This is the most commonly used way to define a function. I believe that people who learn JavaScript are familiar with its use.
The calling code is as follows:
makeArray('one', 'two');
// => [ window, 'one', 'two' ]
This method can be said to be global function call.
Why is it said to be a global function?
Because it is a method of the global object window,
We can verify it with the following method:
alert( typeof window.methodThatDoesntExist );
// => undefined
alert( typeof window .makeArray);
// => function
So the method we used to call makeArray is the same as the method called below
window.makeArray('one', 'two');
// => [ window, 'one', 'two' ]
JavaScript function calling rule 2
(1) Object method calling:

Copy Code The code is as follows:

//creating the object
var arrayMaker = {
someProperty: 'some value here',
make: makeArray
};
arrayMaker.make('one', 'two'); // => [ arrayMaker, 'one', 'two' ]
//Or call it using the following method:
arrayMaker['make']('one', 'two'); // => [ arrayMaker, 'one', 'two' ]

See here and just now See the difference, the value of this becomes the object itself.
You may question: Why does the original function definition not change, but this changes?
Very good, you are right to have doubts. This involves the way functions are passed in JavaScript.
A function is a standard data type in JavaScript.
To be precise, it is an object. You can pass them or copy them.
It's like the entire function Both the parameter list and the function body are copied, and
is assigned to the attribute make in arrayMaker. It is like defining an arrayMaker like this:

Copy code The code is as follows:

var arrayMaker = {
someProperty: 'some value here',
make: function (arg1, arg2) {
return [ this, arg1, arg2 ];
}
};

If you don’t understand the second calling rule, you will often encounter various problems in event handling code bug, for example:

Copy code The code is as follows:

< script type="text/javascript">
function buttonClicked(){
var text = (this === window) ? 'window' : this.id;
alert( text );
}
var button1 = document.getElementById('btn1');
var button2 = document.getElementById('btn2');
button1.onclick = buttonClicked;
button2.onclick = function(){
buttonClicked();
};
< / script>

Clicking the first button will display "btn1" because it is a method call and this is the object it belongs to (button element).
Clicking the second button will display "window" because buttonClicked is called directly (unlike obj.buttonClicked()).
For this and the third button, the event handler is placed directly in the label. are the same. So the result of clicking the third button is the same as the second one.
So please pay attention:

Copy code The code is as follows:

button1.onclick = buttonClicked;
button2.onclick = function(){
buttonClicked();
};

This pointer is different.
JavaScript function calling rule three
Of course, if you are using the jQuery library, you don’t have to think so much. It will help rewrite the value of this to ensure that it contains a reference to the current event source element.

Copy code The code is as follows:

//Use jQuery
$('#btn1 ').click( function() {
alert( this.id ); // jQuery ensures 'this' will be the button
});

So how does jQuery overload the value of this?
The answer is: call() and apply();
When the function is used more and more, you will find that the this you need is not there In the same context, this makes communication extremely difficult.
In Javascript, functions are also objects. Function objects contain some predefined methods, two of which are apply() and call(). We can use them to reset the context of this.

Copy code The code is as follows:

< script type="text/javascript">
function buttonClicked(){
var text = (this = == window) ? 'window' : this.id;
alert( text );
}
var button1 = document.getElementById('btn1');
var button2 = document.getElementById( 'btn2');
button1.onclick = buttonClicked;
button2.onclick = function(){
buttonClicked.call(this); // btn2
};
< /script> ;

JavaScript function calling rule four
(1) Constructor
I don’t want to delve into the definition of types in Javascript, but at this moment we need to know that there are no classes in Javascript,
Also any custom type needs an initialization function, it is also a good idea to define your type using a prototype object (as a property of the initialization function),
Let’s create a simple type

Copy code The code is as follows:

//Declare a constructor
function ArrayMaker(arg1, arg2) {
this.someProperty = 'whatever';
this.theArray = [ this, arg1, arg2 ];
}
// Declare instantiation method
ArrayMaker.prototype = {
someMethod: function () {
alert( 'someMethod called');
},
getArray: function () {
return this.theArray;
}
};
var am = new ArrayMaker( 'one', 'two' );
var other = new ArrayMaker( 'first', 'second' );
am.getArray();
// = > [ am, 'one' , 'two' ]
other.getArray();
// => [ other, 'first', 'second' ]

A very important and noteworthy thing is the new operator that appears in front of the function call. Without that, your function is just like a global function, and the properties we create will be created on the global object (window), and you Don't want that.
Another point, because there is no return value in your constructor, if you forget to use the new operator, some of your variables will be assigned undefined.
So it is a good habit to start the constructor function with a capital letter. This can be used as a reminder not to forget the previous new operator when calling.
In this way, the code in the initialization function is the same as the code you use in other Initialization functions written in the language are similar. The value of this will be the object you will create.
Summary
I hope that through these, you can understand the differences in how various functions are called,
let your JavaScript code is free from bugs.
Knowing the value of this is your first step in avoiding bugs.