Preface
Javascript is an object-based dynamic language, that is, everything is an object. A very typical example is that functions are also regarded as ordinary objects. Javascript can implement object-oriented programming through certain design patterns, where this "pointer" is a very important feature of object-oriented. This article will introduce you in detail about the relevant content of this keyword pointing in Javascript. Let's do a small test first. If you answer all the answers correctly, congratulations on not having to read it down.
Test questions
Question 1
<script>
var str = 'zhangsan';
function demo() {
var str = 'lisi';
alert();
}
(); // ??
var obj = {
str: "wangwu",
say: function() {
alert();
}
}
(); // ??
var fun = ;
(); // ??
</script>
Question 2
<script>
var username = 'zhangsan';
(function() {
var username = 'lisi';
alert(); // ??
})()
function demo() {
var username = 'wangwu';
function test() {
alert();
}
test(); // ??
}
demo();
</script>
Question 3
<script>
function Person() {
= 'zhangsan';
= function() {
alert('My name' + );
}
}
var p = new Person();
(); // ??
var p1 = new Person();
(); // ??
</script>
Question 4
<script>
var username = 'zhangsan';
function demo() {
alert()
}
var obj1 = {
username: "lisi"
};
var obj2 = {
username: "wangwu"
};
demo(); // ??
demo(obj1); // ??
demo(obj2); // ??
(obj1); // ??
(obj2); // ??
</script>
Answer
- Question 1: zhangsan wangwu zhangsan
- Question 2: zhangsan zhangsan
- Question 3: My name is zhangsan My name is zhangsan
- Question 4: zhangsan zhangsan zhangsan lisi wangwu
(Look down, there is a detailed analysis below)
this
- Point to the object that calls the function
- Object-free calling function/anonymous function self-call (this points to window)
- Objects generated by new
- apply/call call
1. Point to the object that calls the function
<script>
// this: Point to the object that calls the function var str = 'zhangsan';
function demo() {
var str = 'lisi';
//this->window
(this);
alert();
}
(); // zhangsan
var obj = {
str: "wangwu",
say: function() {
// this->obj
alert();
}
}
(); // wangwu
var fun = ;
(); // zhangsan
</script>
- The global function (demo) belongs to the method of the window object. Windows calls demo so this points to window
- obj calls the say method, this points to obj
- fun() is a global function, and the declared fun receives a simple function in obj and does not call it (() is called the function). At this time, fun is a function (function(){alert();}). Then when fun() calls the function, this points to window
- Whoever calls the function, then this points to
2. Call function without object/anonymous function self-call -> this point to window
<script>
// 2. Anonymous function self-execution | Anonymous function | Masterless function this->window var username = 'zhangsan';
// Anonymous function self-execution this->window (function() {
var username = 'lisi';
(this); // window
alert(); // zhangsan
})()
function demo() {
var username = 'wangwu';
// No main function this->window function test() {
// this->window
alert();
}
test(); // zhangsan
}
demo();
</script>
- Because the anonymous function has no name, it is hung to window
- test(), whoever calls test will point to whom. Of course, I have experimented with it. It is not called by window, nor is it called by demo. If no one cares about it, then it points to window. It is equivalent to a master calling it, no master function.
3. Objects generated through new
<script>
// 3. Object through new: this points to the generated object // Function function Person() {
// Attributes = 'zhangsan';
// method = function() {
// this->p
(this); // Person object alert('My name' + );
}
}
// Instantiate an object: p has the username attribute and say method var p = new Person();
(p); // Person object (); // zhangsan
(); // My name is zhangsan
// this->p1
var p1 = new Person();
(); // Person object My name is zhangsan</script>
- When our function Person uses this to write the format of properties and methods, we must use new to make the properties and methods valuable, and use new to use the properties and methods in the function through new to use new to make the properties and methods in the function.
4. Apply/call call
First, let’s understand what apply()/call() is?
apply()/call(): Finally, it is called function, but this inside points to thisObj
([thisObj[,arg1[, arg2[, [,.argN]]]]]) ([thisObj[,argArray]])
Notice:
1. Call function function, but this inside the function points to thisObj (change the pointer inside the object)
2. If thisObj does not pass parameters, it defaults to global object.
3. call()/apply() contact and difference
Contact: The function is the same, the first parameter is thisObj
Difference: If there are more parameters passed
The actual parameters of call() are listed one by one
The actual parameters of apply() are all placed in the second array parameter
An example of understanding apply()/call():
<script>
// apply()/call()
function demo() {
(123);
}
// When calling the function, the final call to demo()/() is still demo() demo(); // 123
(); //123
(); // 123
</script>
<script>
// The difference between call()/apply(): // The call() parameter is listed separately in the call // The parameters of apply() are represented by an array function demo(m, n, a, b) {
alert(m + n + a + b);
}
demo(1, 5, 3, 4); // 13
(null, 1, 5, 3, 4); // 13
(null, [1, 5, 3, 4]); // 13
</script>
The fourth usage example of this
<script>
// The fourth usage of this: call(obj)/apply(obj): Forcefully point this to obj var username = 'zhangsan';
function demo() {
alert()
}
var obj1 = {
username: "lisi"
};
var obj2 = {
username: "wangwu"
};
// call()/apply(): The robbery style changes this direction demo(); // zhangsan
demo(obj1); //zhangsan
demo(obj2); //zhangsan
(obj1); // lisi
(obj2); // wangwu
</script>
- If you directly call the demo, whether it is obj1 or obj2, then the demo is still a window call.
- Whether you use call or apply, the demo functions are the final calls, but they will force this to point to obj1/obj2 and force their first parameter object.
Summarize
The above is the entire content of this article. I hope the content of this article will be of some help to your study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.