- // 首先强调一点, 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 的指向正如上所述.
来源: http://www.bubuko.com/infodetail-2655151.html