The elf in JavaScript ——— this!!.
About this point to this problem, live tortured me an afternoon, come back to calm down the heart smooth, summed up the law.
当然,this这个复杂的问题不是一句两句可以说清楚,作为菜鸟,我的总结也就是为了做一些 ‘坑人的’ 笔试题,所以只能欢迎吐槽了。
There are generally two kinds of situations in the problem
- The caller is a function
- function is called by object (
this
point to object)
- function is called individually (
this
point to undefined, to global in non-strict mode)
- Caller is an object
- Object declaration in function (
this
point to undefined, non-strict mode to global)
- Object declaration outside of function (
this
point to Global)
PS: The presence of an anonymous function causes the loss of this point to be inconsistent with the above situation, with bind () to solve it.
give some chestnuts??????
- chestnuts?? A
var a = 1; var obj = {a:2, c:THIS.A + 10, b: function ( return THIS.A;} console.log (OBJ.B ()); //function B is called through the object obj, this points to obj "2" console.log (OBJ.C); //object declared outside function, this refers to global "11"
- chestnuts?? Two
var o = { a:10, b:{a:< Span class= "Hljs-number" >12, fn: function (console.log (THIS.A ); }}}o.b.fn (); //fn via object called by B, this points to B "12"
- Chestnuts?? Three
var o = { a:10, b:{ a:12, fn:function(){ console.log(this.a); console.log(this); } }}var j = o.b.fn;//fn未被执行j();//此时fn单独被调用,this指向全局,全局没有a【undefined】【window】
- Chestnuts?? Four
var name =' 222 ';var a = {name:' 111 ', say:function () {Console.log (THIS.name); } }VarFun = A.say;//say not executedFun (); //say is executed alone, this points to the global "222" A.say (); //function say is called through object A, this points to object a "111" var B = {name: ' 333 ', say:function (fun) {fun ();} b.say (A.say); //a.say not implemented fun (); //say executed separately, this points to global "222" /*b.say (function () {}), However, the function called by the B object say is executed, this points to B. But at this time this is not the this we want to print, we want to print this in function () {}, the This in function refers to global */B.say = A.say; //a.say is not executed, the function is assigned to B, at this time the B object can also print! B.say (); //say function is executed by object B, this points to B "333"
- Chestnuts?? Five
var name = ‘global‘;var obj = { name: ‘obj‘, getName: function () { return function () { console.log(this.name); } }}obj.getName()();//【global】/*var fn = obj.getName();fn();*/
Call and apply change this point
- The first parameter of call and apply is the point of this
- The other parameters of call are a one-pass
- The other parameters of the
- apply are passed as an array.
function fn< Span class= "Hljs-params" > (a,b,c) {console. Log (THIS.A + A + B + c);} var obj = {A: 20}fn.call10, 20, Span class= "Hljs-number" >30); //"80" fn.apply (obj, [100, 200, 300]) ; //"620"
You are welcome to join the Learning Exchange Group if you encounter any problems or want to acquire learning resources in the learning process.
343599877, we learn the front-end together!
The Little goblin in JavaScript.