this

145 阅读2分钟

在调用函数时,函数内部都会出现一个隐藏的参数,这个参数叫做this。

this它一定要在真正调用时,才能确定它的值。从另一个角度理解:this它与执行上下文有关。请首先记住一句话:谁调用this,谁就是this.

this的相关知识

  1. 只要是能够写js代码的地方,都可以访问this.
  2. this的值是不固定的,会因为调用方式的不同和call或者apply而发生改变
  3. 我们无法修改this的值

this的指向

  1. 以函数的形式(这个函数不是某一个对象的属性)调用时,也就是说直接调用this时,this指向window(this的值就是window)

     function f(){
             console.log(this)
         }
         f();        //window
    
  2. 以方法的形式((这个函数是一个具体的对象的属性))调用时,this就是调用方法的那个对象

     let name="xiaoqiang";
     let text={
         name:"wangcai",
         abc:function(){
             console.log(this.name)
         }
     }
     text.abc();   //wangcai
     
     //或者通过赋值将this改为window
     var name="xiaoqiang";
     let text={
         name:"wangcai",
         abc:function(){
             console.log(this.name)
         }
     }
     var fn = text.abc;
     fn();    //xiaoqiang
    

其实这两条确定this的方式是一样的,在以函数的形式调用时,其实就是window.函数(),函数是作为window对象的方法调用的

  1. 当以构造函数的形式调用时,this就是新创建的那个对象

简单来说:如果在调用函数之前加一个new的话,会创建并返回一个新的对象,而这个函数内部的this就会指向这个对象。

var name = "xiongda"
function F() {
    this.name = "xiaoqiang";
    this.abs = function () {
        console.log(this, this.name)
    }
}
var f2 = new F();
f2.abs();       //F{name: "xiaoqiang", abs: ƒ}     "xiaoqiang"
  1. 使用Function对象的apply和call方法来指定函数内部的this的值。

    使用call方法.call(对象,参数1,参数2…); 使用apply方法.apply(对象,[参数1,参数2…]);

    作用:主要是把方法中的this用传入的对象来代替,参数依旧以一一相应的方式对形参赋值。

     var name = "xiongda"
     function f(x,y) {
         console.log(this.name);
         console.log(x+y)
     }
     var ao1={name:"wangcai"}
     var ao2={name:"maobing"}
     f.call(ao1,2,3);            //wangcai   5