This is a feature in Javascript that is very easy to misunderstand and then use incorrectly. Therefore, the following article mainly introduces to you the relevant information about the problem of this keyword pointing in Javascript. The test questions in the article test your familiarity with this. Friends in need can refer to it. Let's take a look together.
Preface
Javascript is an object-based dynamic language, that is to say, everything is an object. A typical example is that functions are also treated as ordinary objects. Javascript can implement object-oriented programming through certain design patterns, in which this "pointer" is a very important feature in realizing object-oriented programming. This article will give you a detailed introduction to the relevant content pointed to by the this keyword in Javascript. Let us do a small test first. If you get all the answers correct, congratulations, you don’t need to read any further.
Test questions
First question
<script> var str = 'zhangsan'; function demo() { var str = 'lisi'; alert(this.str); } window.demo(); // ?? var obj = { str: "wangwu", say: function() { alert(this.str); } } obj.say(); // ?? var fun = obj.say; window.fun(); // ?? </script>
Second question
<script> var username = 'zhangsan'; (function() { var username = 'lisi'; alert(this.username); // ?? })() function demo() { var username = 'wangwu'; function test() { alert(this.username); } test(); // ?? } demo(); </script>
Third question
<script> function Person() { this.username = 'zhangsan'; this.say = function() { alert('我叫' + this.username); } } var p = new Person(); p.say(); // ?? var p1 = new Person(); p1.say(); // ?? </script>
Question 4
##
<script> var username = 'zhangsan'; function demo() { alert(this.username) } var obj1 = { username: "lisi" }; var obj2 = { username: "wangwu" }; demo(); // ?? demo(obj1); // ?? demo(obj2); // ?? demo.call(obj1); // ?? demo.apply(obj2); // ?? </script>
Answer
this
#1. Point to the object of the calling function
<script> // this:指向调用函数的对象 var str = 'zhangsan'; function demo() { var str = 'lisi'; //this->window console.log(this); alert(this.str); } window.demo(); // zhangsan var obj = { str: "wangwu", say: function() { // this->obj alert(this.str); } } obj.say(); // wangwu var fun = obj.say; window.fun(); // zhangsan </script>
<script> // 2.匿名函数自执行|匿名函数|无主函数 this->window var username = 'zhangsan'; // 匿名函数自执行 this->window (function() { var username = 'lisi'; console.log(this); // window alert(this.username); // zhangsan })() function demo() { var username = 'wangwu'; // 无主函数 this->window function test() { // this->window alert(this.username); } test(); // zhangsan } demo(); </script>
<script> // 3.通过new的对象:this指向产生的对象 // 函数 function Person() { // 属性 this.username = 'zhangsan'; // 方法 this.say = function() { // this->p console.log(this); // Person对象 alert('我叫' + this.username); } } // 实例化出一个对象:p就具有了username属性和say方法 var p = new Person(); console.log(p); // Person对象 console.log(p.username); // zhangsan p.say(); // 我叫zhangsan // this->p1 var p1 = new Person(); p1.say(); // Person对象 我叫zhangsan </script>
First of all, let’s understand what apply()/call() is?
function.call([thisObj[,arg1[, arg2[, [,.argN]]]]]) function.apply([thisObj[,argArray]])
1. Call the function function, but this in the function points to thisObj (change the internal pointer of the object)
2. If thisObj is not passed parameter, the default is the global object
3. Contact and difference between call()/apply()
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() The parameters are all placed in the second array parameter
An example of understanding apply()/call():
<script> // apply()/call() function demo() { console.log(123); } // 调用函数的时候,demo.call()/demo.apply()最终调用的还是demo() demo(); // 123 demo.call(); //123 demo.apply(); // 123 </script> <script> // call()/apply()的区别: // call()参数单独再call中罗列 // apply()的参数通过数组表示 function demo(m, n, a, b) { alert(m + n + a + b); } demo(1, 5, 3, 4); // 13 demo.call(null, 1, 5, 3, 4); // 13 demo.apply(null, [1, 5, 3, 4]); // 13 </script>
The fourth usage example of this
<script> // this的第四个用法:call(obj)/apply(obj):强制性的将this指向了obj var username = 'zhangsan'; function demo() { alert(this.username) } var obj1 = { username: "lisi" }; var obj2 = { username: "wangwu" }; // call()/apply():打劫式的改变了this的指向 demo(); // zhangsan demo(obj1); //zhangsan demo(obj2); //zhangsan demo.call(obj1); // lisi demo.apply(obj2); // wangwu </script>
The above is the detailed content of Detailed test explanation of the problem pointed by this keyword in Javascript. For more information, please follow other related articles on the PHP Chinese website!