函数的几种调用方式
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就指向该对象(大部分情况);
- 少数情况特殊:
- 如果this在定时器中, this就指向window;
- 如果this在事件源中, this就指向产生这个事件源的对象。