JavaScript this的指向问题

Posted 2020-09-22

this的指向

在函数创建的时候，this的指向还未确定，它最终指向调用它的对象

 

window.onload=function(){
　　window.a="我的曾经"
　　function da(){
　　　　console.log(this.a)
　　}
　　da()　　//我的曾经
}

解：window对da()函数进行调用，故this指向window

 

window.onload=function(){
　　window.a="我的曾经"
　　var bn={
　　　　a:"小白",
　　　　da:function(){
　　　　　　console.log(this.a)
　　　　}
　　}
　　bn.da()　　//小白
}

解：bn对象对da()函数进行调用，故this指向window

 

window.onload=function(){
　　window.a="我的曾经"
　　var a="小白"
　　var bn={
        a:"大白",
        da:{
            //a:"打包",
            b:function(){
                console.log(this.a) 
            }
        }
　　}
　　bn.da.b()　　//undefined
}

解：da对象调用b()函数，故this指向da

 

window.onload=function(){
　　window.a="我的曾经"
　　var a="小白"
　　var bn={
        a:"小白",
        da:{
            a:"打包",
            b:function(){
                console.log(this.a) 
            }
        }
　　}
    var hk=bn.da.b
　　hk()　　//我的曾经
}

解：var hk=bn.da.b这句话，将b()函数赋值hk，所以它调用的是window.hk(),故this指向window

 

构造函数的this指向

function this(){
    this.user = "呵呵哒";
}
var a = new this();
console.log(a.user); //呵呵哒

解：new关键字就是创建一个对象实例，所以a是个对象，所以函数this()被对象a调用，那么this指向的自然是对象a，对象a中会有user，是因为new关键字于复制了一份this()函数

 

function fu(){  
    this.user = "武器";  
    return {};  
}
var a = new fu;  
console.log(a.user); //undefined

function fu(){
　　this.name="大叔";
　　return 25; 
}
var a=new fu;
console.log(a.name)　　//大叔

解：如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例，如果return null，虽然null也是对象，但是在这里this还是指向那个函数的实例

 

call()

var a = {
    user:"hhh",
    fn:function(a,b){
        console.log(this.user); //hhh
        console.log(a+b); //8
    }
}
var b = a.fn;
b.call(a,3,5);

解：call() 方法，它的第一个参数当做作 this 的对象。即this指向a，其他参数都直接传递给函数自身即b

 

 

apply()

var a = {
    user:"hhh",
    fn:function(a,b){
        console.log(this.user); //hhh
        console.log(a+b); //11
    }
}
var b = a.fn;
b.apply(a,[3,5]);

解：apply() 方法有两个参数，用作 this 的对象和要传递给函数的参数的数组

 

bind()

var a = {
    user:"hhh",
    fn:function(aa,bb,cc){
        console.log(this.user); //hhh
        console.log(aa,bb,cc); //1 2 3
    }
}
var b = a.fn;
var c = b.bind(a,1);
c(2,3);

解：bind() 方法，它其实返回一个函数，它的第一个参数当做作 this 的对象。即this指向a，其他参数按顺序都传递给函数自身即b

 

this指向的应用

window.onload=function(){
    var bn={
        fn:function fn(){  
            function hj(){
                console.log(this)
            }
            hj()
        },
        gn:function gn(){  
            function hj(obn){
                console.log(obn)
            }
            hj(this)
        },
        bn:function bn(){
            var that=this
            function hj(){
                console.log(that)
            }
            hj()
        }
    }
    bn.fn()    //window
    bn.gn()　　//gn
    bn.bn()　　//bn
}

正常情况，函数嵌套函数，里面函数的this指向window，那我们需要他指向嵌套他的函数时有两种方法；1：将this作为参数传递到被嵌套的函数里，2：将this赋值给一个变量，让被嵌套函数进行调用