The Little goblin in JavaScript.

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.