The scope of functions and this pointing are very important parts of js. It takes a logic to clarify this thing and see how my logic is...
Below is an outline that you can directly select the items you are interested in to read.
• Function definition method: direct definition (under window, internal definition), object methods, object prototype methods;
• Function calling method: call directly, call/apply, with
• For methods of directly defined functions and objects, the scope is the scope chain at its definition by default.
• For directly defined functions, this points to window.
• For the object's method, this points to the instantiated object (corresponding to the case where the instantiated object returns this by default).
• Use call/apply to change this pointing of the method
• When defining a function or method, its scope chain can be changed by with.
Let’s talk about it in detail below:
The definition of functions, as mentioned in the outline, can be divided into two types: direct definition (under window, internal definition), object methods (or object prototype methods). From the following example code, you can see that the function fn1 and fn2 and the method doFunction of the object is from the corresponding domain when the function uses name.
var name = 'name under window<br/>';var resultCon;function fn1() { resultCon.innerHTML += name;}function MyObj() { var name = 'name under MyObj<br/>'; this.doFunction = function() { resultCon.innerHTML += name;What happens if "name" is replaced by "this.name" when using the value of name? See the following example:
var name = 'name under window<br/>';var resultCon;function fn1() { resultCon.innerHTML += this.name;}function MyObj() { var name = 'name under MyObj<br/>'; this.doFunction = function() { resultCon.innerHTML += this.name;Judging from the results, we can verify the 4th and 5th items in the outline. We can also see that this and scope are two separate sets of chains, following an independent variable query logic. The specific query logic will be mentioned in the following performance analysis. If you are a novice, it is recommended to first look at the basic knowledge of "js scope chain".
Regarding the calling method of a function, I use the following example to illustrate the 2nd and 6th article in the outline:
var name = 'name under window<br/>';var resultCon;function fn1() { resultCon.innerHTML += this.name;}function MyObj() { var name = 'name under MyObj<br/>'; this.doFunction = function() { resultCon.innerHTML += this.name;The use of call and apply when called is to change the this pointing of the called function. The use of with is to change the query domain of the variable in the called function. We remove the call and name in the above example and add with to demonstrate the function of with.
var name = 'name under window<br/>';var resultCon;function fn1(myScope) { with (myScope) { resultCon.innerHTML += name; }}function MyObj(myScope) { var name = 'name under MyObj<br/>';It is not convenient to use with, and you need to add with to the called function. Some people may wonder if you can call the following to change the scope of the variable as a whole without changing the called function?
with (myScope) { fn1(); fn2(); var obj = new MyObj(); obj.doFunction();}Unfortunately, no! Therefore, call and apply can be used everywhere in some mature frameworks, but with is rarely used. When using JSHint to detect js syntax, small red dots are marked with with. In some js encoding guidance, it is also recommended to use with as little as possible, because with changes to the default query chain of variables, it will confuse later maintenance personnel, and some performance considerations. Please use with with with with with with caution.
The above article deeply understands the scope and this direction of js functions is all the content I share with you. I hope it can give you a reference and I hope you can support Wulin.com more.