《javascript设计模式与开发实践》阅读笔记（三）_javascript设计模式与开发实践读书笔记-优快云博客

本文深入解析JavaScript中的this关键字，探讨其在不同上下文中的行为，包括作为对象方法、普通函数及构造函数调用时的表现，并介绍了如何利用call和apply来改变this的指向。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

this，call和apply

2.1 this

this指针的用法，相信在很多场合都看到过，这里也总结了几点：

作为对象的方法调用
作为普通函数调用
构造器调用
Function.prototype.call或Function.prototype.apply调用

2.1.1 作为对象的方法调用

var obj = {
    a: 1,
    getA: function() {
        console.log(this === obj);
        console.log(this.a);
    }
};
obj.getA();

结果：
这里写图片描述
上述代码很好理解，就是this就指向了obj
http://blog.youkuaiyun.com/sinat_25127047/article/details/50556209

2.1.1 作为普通函数调用

当函数不作为对象的时候，也就是我们说得普通函数方式，此时的this总是指向全局对象。在浏览器的Javascript中，这个全局对象是指window对象。

    window.name='globalName';
    var getName=function(){
        return this.name; //'globalName'
    };
    console.log(getName());

在有些情况下，比如下面的例子，在div节点的事件函数内部，有一个局部的callback方法，callback被作为普通函数调用时，callback内部的this指向了window，但我们其实想让它指向的时div节点：

<body>
    <div id="div1">我是一个div</div>
</body>
<script type="text/javascript">

window.id="window";
document.getElementById('div1').onclick=function () {
    alert(this.id); //'div1'
    var callback=function(){
        alert(this.id); //"window"
    }
    callback();
}

解决办法是保存div的this，即that还是指向的div1

<body>
    <div id="div1">我是一个div</div>
</body>
<script type="text/javascript">

window.id="window";
document.getElementById('div1').onclick=function () {
    alert(this.id); //'div1'
    var that=this;
    var callback=function(){
        alert(that.id); //'div1'
    }
    callback();
}

注：在ECMAScript5的strict模式下，这种情况下的this已经被规定为不会指向全局对象，而是undefined。

    window.name='globalName';
    var getName=function(){
        "use strict"
        alert(this)
        return this.name;
    };
    getName();//undefined

2.1.3 构造器调用

javascript中没有类，但是可以从构造器中创建对象，同时也提供了new运算符，使得构造器看起来更像是一个类。
除了宿主提供的一些内置函数，大部分Javascript函数可以当作构造器使用。构造器的外表跟普通函数一模一样，它们的区别在于被调用的方式。当用new运算符调用函数时，该函数总会返回一个对象，通常情况下，构造器里的this就指向返回的这个对象，如下代码：

var myClass = function() {
    this.name = 'ave';
}
var obj = new myClass();
//myClass 中的this指向obj
console.log(obj.name);

但用new调用构造器时，还要注意一个问题，如果构造器显式的返回了一个object对象，那么此次运算结果最终会返回这个对象，而不是我们期待的this了，如：

var myClass = function() {
    this.name = 'svem';
    return {
        name: 'jack'
    }
}
var obj = new myClass();
console.log(obj.name);//jack

感觉这个经常会用到在单例模式中。

如果构造器不显式地返回任何数据，或者是返回一个非对象类型的数据，就不会造成上述问题：

var myClass = function() {
    this.name = 'svem';
    return 'jack'  //返回string类型
}
var obj = new myClass();
console.log(obj.name);//svem，因为这里的jack没有显式的命名为name

2.1.4 Function.prototype.call或Function.prototype.apply调用

跟普通的函数调用相比，用Function.prototype.call或Function.prototype.apply可以动态地改变传入函数的this。

var obj1 = {
    name: 'sven',
    getName: function() {
        return this.name;
    }
}
var obj2 = {
    name: 'ane'
};
console.log(obj1.getName());//'sven'
console.log(obj1.getName.call(obj2)); //'ane'  将this指针指向obj2

2.1 丢失的this

这是一个经常会遇到的问题，比如下面的代码：

var obj = {
    myName: 'sven',
    getName: function() {
        return this.myName
    }
};
console.log(obj.getName());//'sven'
var getName2 = obj.getName;
console.log(getName2());//undefined

调用obj.getName，getName方法时作为obj对象的属性调用的，因此getName中的this指向obj对象。
而getName2 = obj.getName这种方式，是普通函数调用方式，此时的this是指向全局window的。
下面的一段代码很有意思，原本是这样的：

    var getId=function(id){
        return document.getElementById(id) //作为document的对象调用
    }
    console.log(getId("div1"));

就想把上面的getId直接通过
var getId=document.getElenmentById
但是却是实现不了的，如下面的代码：

<body>
    <div id="div1">我是一个div</div>
</body>
<script type="text/javascript">
    var getId=document.getElementById; //作为普通函数调用
    getId('div1')
</script>
</html>

抛出了一个错误：Uncaught TypeError: Illegal invocation(…)
原因在于：许多引擎的document.getElenmetById方法内部实现中需要用到this。这个this本来被期望指向document，当getElementById方法作为document对象的属性被调用时，方法内部的this确实是指向document的。
但当getId来引用document.getElementById之后，再调用getId，此时就成了普通函数调用，此时的this指向了window，而不是原来的document。

这种情况可以通过apply修改：

    document.getElementById=(function(func){
        return function(){
            return func.apply(document,arguments);
        }
    })(document.getElementById);
    var getId=document.getElementById;
    var div=getId('div1');
    console.log(div);