this指向的简单见解

Posted 2020-11-19 huanxijiuhao

// 首先强调一点，this的指向在函数创建的时候是决定不了的，

// 在调用的时候才能决定，谁调用的就指向谁，一定要搞清楚这个

var name = "222";

var a = {

name: "111",

say: function () {

console.log(this.name);                                        // 22

}

}

a.say(); //111

var fun = a.say;

//就相当于将函数(function(){console.log(this.name);})赋给fun，而this在不调用时，什么都不是

fun(); //222

// 此时fun再调用，就相当于仅仅是调用一个正常的函数var fun = function(){console.log(this.name)}而已

//而函数本身没有name属性，就去window里面找

window.a.say(); //111

// 这种和调用a.say();一样

// 所以证明，this指向调用他的父级

var b = {

name: "333",

say: function (fun) {

fun();

}

}

b.say(a.say); //参数传的a.say，就相当于把a.say --->function(){console.log(this.name);}作为一个参数直接传入，

// function (fun){ (function(){console.log(this.name);})(); // }而fun();本来就是函数执行，和外部谁包括他没有关系

//而函数里面的一个立即执行函数，内部并没有name，就直接去上级b.say函数找，

//上级还没有,就找到window中的name

 

b.say = a.say; //相当于将b.say 变成a.say --->function(){console.log(this.name);}

b.say();//333

//虽然内部函数被改变了，但是调用时依然是b来调用的，而this在没有调用之前谁都不指，所以b调用他，依然指向b

 

         111                                                                     this.html:22            
         222                                                                    this.html:22             
         111                                                                     this.html:22             
        222                                                                     this.html:22             
         333                                                                     this.html:22      

    上面是在控制台显示的情况，我们可以清晰的看到，虽然函数不断的被调用，但一直都是调用的22行的内容，而this的指向正如上所述。