this的指向

1.函数中的this，是谁调用，指向谁

遵循两条原则：a.判断this在哪个函数中 b. 这个函数是那种调用模式调用的

（1）普通函数调用，指向window      形式：函数名（）

<script>
  function fn(){
    console.log(this)
  }
  fn()
  </script>

打印结果：window

（2）对象调用函数，this指向调用方法的对象   形式：对象.函数名（）

obj={
  name:'zhangsan',
  sayHi:function(){
    console.log('大家好，我是'+this.name)
  }
}
console.log(obj)    //{name: "zhangsan", sayHi: ƒ}
obj.sayHi()         //大家好，我是zhangsan     这里obj对象调用函数sayHi，所以this指向obj

 

打印结果：{f：f}

（3）构造函数，this指向创建出来的实例     形式：new  函数名（）

  <script>
  function fn(name){
   this.name=name;
   this.say=function(){console.log('我的名字是'+this.name)}
  }
 var f =new fn('张三');
 f.say()
  </script>

打印结果：我的名字是张三

（4）注册事件，this指向事件源      形式：dom.事件名=函数

<body>
<div class="box">box的内容</div>
  <script>
  var box=document.getElementsByClassName('box')[0]
box.onclick=function(){
console.log(this.innerHTML)
}
</script>
</body>

打印结果：box的内容

（5）定时器调用，this指向window      形式：  setInterval(函数名,时间)

  <script>
  function fn(){
    console.log(this)
  }
setInterval(fn,1000)
</script>

打印结果：window

 （6）上下文调用，this指向call或者apply的第一个参数         形式：函数名.call(  )

 

posted on 2019-09-26 17:18  宅到深夜  阅读(165)  评论(0)    收藏  举报