JS中的各种this

JS中的this

1.在普通函数中

在普通函数中this：window

    function fun1(){
      console.log(this)
  }
  fun1();

2.在dom事件注册中

事件注册中：事件对象dom

 <p class="dom">在dom事件注册中</p>

        var dom = document.querySelector(".dom")
        dom.onclick =fun2
        function fun2(){
            console.log(this)
        }

3. 在对象中

this：为对象本身

var obj ={
     name:"wmq",
    age:20,
    say:function(){
        console.log(this.age)
        alert(`大家好我的名字${this.name}`)
    }

4. 全局函数中

全局方法中this：window【setinterval,settimeout】

var age =50;
 var obj ={

   name:"wmq",
   age:20,
   say:function(){
       console.log(this.age)
       alert(`大家好我的名字${this.name}`)
   },
   grow:function(){
       window.setInterval(function(){
           this.age++;
           console.log(this.age);
       },3000)
   }
 }
var fn=obj.say;
fn();
   

5.箭头函数中

箭头函数中的this 指向上一层作用域中的this

var age =50;
 var obj ={

   name:"wmq",
   age:20,
   say:function(){
       console.log(this.age)
       alert(`大家好我的名字${this.name}`)
   },
   grow:function(){
        window.setInterval(()=>{
           this.age++;
           console.log(this.age);
       },3000)
   }
 }
obj.grow()

6.构造函数中

作为构造函数调用，this 指代new 出的对象

    　function test(){
　　　　this.x = 1;
　　}
　　var o = new test();
　　alert(o.x); // 1
    //运行结果为1。为了表明这时this不是全局对象，我对代码做一些改变：
　　var x = 2;
　　function test(){
　　　　this.x = 1;
　　}
　　var o = new test();
　　alert(x); //2

7.call apply bind

call apply bind 中this指向的是call的第一个参数
call与apply都是执行一个函数，使用第一个参数进行冒充函数中this

  function add(a,b){
            console.log(this,a,b)
        }
         add.call({name:"wmq"},4,5)

apply的传参方式用数组

  function add(a,b){
            console.log(this,a,b)
        }
       add.apply({name:"wmq",age:18},[8,7]);

bind 把bind的第一个人参数作为this 创建一个人新的函数，并可以指定默认参数

   function add(a,b){
           console.log(this,a,b)
       }
  var fn =add.bind({eye:2,leg:2},10,5)
  fn();