函数调用的方式和this的丢失

函数的几种调用方式

    01 普通函数调用 内部的this指向全局对象window
    02 构造函数调用 内部的this指向新创建的对象
    03 对象的方法调用 内部的this指向调用的对象本身
    04 通过call 或者是apply方式调用(函数上下文),this指向的是当前的上下文对象

this丢失demo演示

<script>

    var obj = {
        name:"张三",
        getName:function () {
            console.log(this.name);
        }
    };

    //以对象的方法来进行调用
    obj.getName();  //张三

    var getName = obj.getName;
    getName();  //以普通函数的方式调用,此时内部的this指向的是window对象  打印的是window.name 为空值

</script>

代码示例02

<script>
    //01 获取页面中id值为demo的标签
    //var div = document.getElementById('demo');
//    var getId = document.getElementById;
//    var div = getId('demo');        //会报错?
//    console.log(div);

    //借用apply来修正this
    document.getElementById = (function (func) {
        return function () {
           return func.apply(document,arguments);
        }
    })(document.getElementById);


    var getId = document.getElementById;
    var div = getId('demo');        //会报错?
    console.log(div);
</script>

代码说明：

01 因为document.getElementById方法的内部实现中需要使用到this,这个this本来期望指向的是document对象

02 当我们以document.getElementById来调用的时候,内部的this指向document对象

03 但是当我们以getId的方式调用的时候,内部的this指向的是window对象(因为我们以普通的方式进行调用)

• this: this所在的函数在哪个对象中, this就指向该对象(大部分情况)；
• 少数情况特殊：
  1. 如果this在定时器中, this就指向window；
  2. 如果this在事件源中, this就指向产生这个事件源的对象。