this指向的一个疑问

问题描述

《JavaScript设计模式与开发实践》P215第5行代码为什么要改变__self的this指向?它原先的this指向是什么?

相关代码

Function.prototype.before = function( beforefn ) {
    var __self = this;
    return function() {
        beforefn.apply( this, arguments );
        return __self.apply( this, arguments ); // __self原先的this指向不是document吗?为什么这里要改变this指向?
    }
}
document.getElementById = document.getElementById.before(function(){
    alert (1);
});
var button = document.getElementById( 'button' );
阅读 199
评论
    3 个回答

    兄弟,你这段代码涉及两个问题:JS的面向对象this的指向

    Function.prototype是什么?Function.prototypeFunction这个类的原型,这上面挂载的方法都是Function这个类的实例方法。JS里面所有函数都是Function的一个实例,所以当你运行document.getElementById.before
    的时候getElementById是一个函数,所以他是Function的实例,他来调用实例方法before,这时候before里面的this指向的是getElementById这个函数。before里面返回了一个匿名函数,这个匿名函数先调用了before传入的回调,然后调用了_self函数,也就是上面的this,也就是getElementById函数。这个匿名函数取代了原生的getElementById
    那这个匿名函数里面的this指向谁呢?this指向有一个一般原则:

    1. 作为实例方法调用的,this指向这个实例,比如getElementById是Function的一个实例
    2. 有明确调用者的,this指向明确调用者
    3. 没有明确调用者的,this指向全局对象,浏览器是window,node里面是global

    所以这个匿名函数是被谁调用的呢?答案是你使用的时候是document.getElementById(),调用者是document,所以匿名函数里面的this指向document。见下图:

    image.png

    JS的面向对象this的指向是JS里面比较基础但又很重要的两个问题,这么几句话说得也不完整,推荐你看看这两篇文章:
    JS面向对象的:https://segmentfault.com/a/11...
    this指向的: https://segmentfault.com/a/11...

      相似问题
      推荐文章