JS基础梳理

变量提升

javascript的执行分为两个阶段
预解析 (该阶段会将JS的所有var关键字定义的变量和声明式定义的函数提前到当前作用域的顶部)
逐行运行代码

使用var关键字定义的变量提升

  //定义代码如下
  console.log(a)
  var a = 10
  console.log(a)
  //输出结果
  //1.undefined
  //2.10
  //以上结果并没有报错是由于出现了变量提升经过变量提升后该代码表现为
  var a
  console.log(a)
  a = 10
  console.log(a)

声明式函数的变量提升

  test()
  function test(){
      console.log(1)
  }
  //以上代码经过预解析后可以
  function test(){
      console.log(1)
  }
  test()

当使用var关键字定义的变量与声明式函数名相同时的变量提升

  test()
  function test(){
      console.log("test1")
  }
  var test = 10
  test = function(){
      console.log("test2")
  }
  test()
  //以上代码经过预解析后表现为
  function test(){
      console.log("test1")
  }
  test()
  test = function(){
      console.log("test2")
  }
  test()
  //此时var定义的变量被覆盖了

当函数定义在块级作用域中的情况

  
  test()
  if ( a ){
      function test(){
          console.log(true)
      }    
  }else{
      function test(){
          console.log(false)
      }  
  }
  var a = true
  //执行结果会报错
  //经过js预解析后表现为
  var a
  test()
  //由于if判断作用域由{}分隔故函数定义只会提前到if的{}之中这就是所谓的块级作用域。
  if ( a ){
      function test(){
          console.log(true)
      }
  }else{
      function test(){
          console.log(false)
      }  
  }
  a = true

JS中的 this 指向

单独的this,指向的是window对象

  alert(this)

全局函数中的this,指向的是window对象

  function test(){
      alert(this)
  }

使用new关键字调用的函数中的this指向的是object对象

  function test(){
      console.log(this)
  }
  new test()

使用call或者apply的方式调用函数

  function test(a,b){
      alert(this + ',' + a +',' + b)
  }
  //使用call方法方法调用 第一个参数表示call前面函数中的this指向
  //若参数为 null 和 undefined 则this都指向 window
  test.call('obj',10,20)  
  //使用apply 第一个参数表示call前面函数中的this指向
  //若参数为 null 和 undefined 则this都指向 window 其参数使用[]传递
  test.apply('obj',[10,20]);

使用bind方法绑定对象(定时器中的this指向window)

  setInterval(function(){
       alert(this) //由于使用了bind方法故其this对象指向为bind方法传递的参数
  }.bind('obj'),1000)

字面量方式定义的对象中的this指向

  var name = 'test'
  var obj = {
      name:'fuyoo',
      showName:function(){
          alert(this.name) //这里的this由谁调用它决定
      }
  }
  obj.showName() //this指向 obj
  var fn = obj.showName
  fn() //this指向window

元素绑定事件并触发时的this指向

  var oBtn = document.querySelector('input')
  oBtn.addEventListener('click',function(){
      alert(this ) //当前元素
  })

this面试题解答

  var x = 20
  var a = {
      x:10,
      fn:function(){
          var x = 30
          return function(){
              return this.x
          }
      }
  }
  console.log(a.fn())
  console.log((a.fn())()) 
  console.log(a.fn()() == (a.fn())())
  console.log(a.fn().call(this))
  console.log(a.fn().call(a))
  /*
  1.return function(){
       return this.x
  }
  2.20
  3.true
  4.20
  5.10
   */
  /**
  分析
  1 console.log(a.fn())
      a.fn()由于是直接调用返回了一段字符串
  2 console.log((a.fn())())
      (a.fn())()等价于 (function(){ return this.x })() this指向window
  3 console.log(a.fn()() == (a.fn())())  
      a.fn()()等于直接调用this指向window 返回20
      (a.fn())()等价于 (function(){ return this.x })() this指向window 返回20
  4 console.log(a.fn().call(this))  
      a.fn().call(this)
      可以理解为 var h = a.fn()  则h = function(){ return this.x }
      h.call(this) 这个this为window 故返回20
  5 console.log(a.fn().call(a)) 分析方法同console.log(a.fn().call(this)) this指向a
  */

标签: none

添加新评论