this指向的简单见解

// 首先强调一点,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的指向正如上所述。

猜你喜欢

转载自www.cnblogs.com/huanxijiuhao/p/9215556.html