zoukankan      html  css  js  c++  java
  • 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下的

  • 相关阅读:
    java线程学习之volatile关键字
    java线程学习之yield方法
    java线程学习之join方法
    小程序hideTarBar隐藏TabBar后,获取windowHeight不准确问题
    canvas等base64格式上传到服务端直传到oss
    服务器关于node的注意事项
    node.js连接本地数据库
    小程序(mpvue框架)的总结
    git代码的注意
    js里的实用小技巧
  • 原文地址:https://www.cnblogs.com/shangjun6/p/9882106.html
Copyright © 2011-2022 走看看