javascript中有关this的解析题

  1.作用域链

  作用域:浏览器给js一个生存环境(栈)内存

  作用域链:js中的关键字var function 都可以提前声明和定义,提前声明和定义,放在我们的内存地址(堆)内存中,然后js从上到下逐行执行,遇到变量就去内存地址查找是否存在这个变量有就直接使用,没有就继续向父级查找,直到window下结束,这种查找机制叫作用域链

  this的目的:js代码中存在大量的变量和函数,我们在只用他们的时候他们到底归属谁

  this               ( this是js的关键字,指定一个对象,然后去代替他)

  1.this分为函数内的this,函数外的this

  函数内的this,指向行为发生的主体(方法)

  函数外的this,都指向window   (没有意思)

  2.函数的this和函数在什么环境下定义的没有关系,而和自己的主体有关

  3.主体怎么找?    就看这个函数带没带"."  如果函数和方法执行带".",那么this指向"."前面的对象,如果不带点,this就指向window

  4.自执行函数里面的this都指向window 

    小技巧:this个变量的面试题,先找到this的主体是谁,然后把它们换成那个主体就行了

  5.给元素中的某一个事件的绑定方法,

    当事件触发时,就执行绑定的方法,方法中的this指向当前元素;

  

  总结:怎样找到this的指函数内

  函数内的this跟函数在哪定义没有关系,只跟在执行时的主体有关,带点的主体就是"."前面的,不带"."就是window

  案例分析:

  1.

    var a={
    chifan:function(){
      console.log(this);
      }
    }
    a.chifan()             ( 这里面的this  a就是主体,因为他在"."前面)

  function chifan{

      console.log(this)

    }

  chifan()                                    (这个里面没带点,所以指向this指向window)

  2.var num=45;

  var obj={

    num=12,

    ff:(function(){

      console.log(this.num)

      })()                                            其结果为45;       (因为他是自调用,所以它的this指向window)

  var um=45;
  var obj={
    um:12,
    ff:function(){
      console.log(this.um)
      }
    }
  obj.ff()                                                  其结果为12;     ("." 因为有点,所以this指向它点前面就是他的对象) 

  3.  body中输入

  <div  id="div1"> hello world</div>

 

  function fn(){
    console.log(this)                             (其this指向的对象是div1    后面跟的语句为document.getElementById("div1").onclick=fn;        他的前面有".")
  } 
  document.getElementById("div1").onclick=function(){
    console.log(this);                           (其this指向的对象是div1    因为"."在他的前面)
  fn()                      (其this的指向的对象是window,因为没"."   )
  }
  document.getElementById("div1").onclick=fn;

  4.奇虎360的一道经典面试题

  

 1) var val=1;
  var obj={
    val:2,
    del:function(){
      console.log(this);                    this指的是对象obj
      this.val*=2
      console.log(val)                      (因为没有this,所以是一道作用域的题,内部没有声明val这个变量,所以去父级找,结果是1)
      console.log(this.val)    (有this,因为"." 所以他的对象是obj ,  obj中val的值为2,所以其结果是4)
    }
  }
  var ff=obj.del()

  

 2) var val=1;
  var obj={
    val:2,
    del:function(){
      console.log(this);              this指定的window;
      this.val*=5                         window的val被赋值为5*1(1是val全局的值)   最后的结果是val被赋值了5
      console.log(val)                (全局下的val)     所以结果是5
      console.log(this.val)          (全局下的val)    所以结果是5
     }
   }
  var fn=obj.del;   

  fn()

  

  最后说一下var ff=obj.del()与var fn=obj.des;fn()的区别

  var ff=obj.del()     说的是声明一个变量 将obj为对象的del()函数赋值给ff;

  var fn=obj.del;fn()     说的是声明一个变量将obj为对象的del以匿名函数赋值给fn,   因为没"." 所以fn()是在window下的

posted on 2018-10-31 11:32  Web引领者  阅读(235)  评论(0编辑  收藏  举报