关于this指向的问题，如下代码

Question

<a id="test"><span>测试一下</span></a>
<script type="text/javascript">
document.getElementById("test").onclick=function(){
    console.log(this);
    function fun(){
        console.log(this);
    }
    fun();
}
document.getElementById("test").click();
</script>

如上，为什么打印的第一个是对象，第二个是window，求解释...

Answer 1

哪位点的-1？完全不理解什么心态...

在理解代码之前，我们先运行一段代码：

<a id="test"><span>测试一下</span></a>
<script type="text/javascript">
document.getElementById("test").onclick=function(){
    console.log(this);
    function fun(){
        console.log(this);
    }
    fun();
    (function(that){
        console.log(that);
    })(this);
}
document.getElementById("test").click();
</script>

可以很容易的发现，打印的内容为object window object

为什么会这样呢？这是因为this需要传递过来。

第一次打印，通过点.传递过来，所以打印的是object对象。

第二次打印，因为没有把this传过去，所以找不到对象，这时候this指向window(还记得在函数作用域下因为没有对象所以this指向window吗？这个也是一样的道理，因为找不到对象，所以this指向window)(这种情况下使用严格模式则打印undefined)。

第三次打印，通过自执行函数把this传入，所以打印的也是object对象。

Answer 2

1. 事件回调函数的this指向触发事件的DOM节点；
2. 普通函数的this与调用方式有关，一共有四种；
3. fun()属于普通函数调用，this指向window。

Answer 3

https://segmentfault.com/a/11...

看函数的四种调用模式。

函数的四种调用模式
函数模式
特征:就是一个简单的函数调用，函数名前面没有任何的引导内容

this在函数模式中的含义： this在函数中表示全局对象，在浏览器中是window对象

方法模式
特征: 方法一定是依附于一个对象, 将函数赋值给对象的一个属性, 那么就成为了方法.

this在方法模式调用中的含义:表示函数所依附的这个对象

构造器调用模式
特征:使用 new 关键字, 来引导构造函数.

由于构造函数只是给 this 添加成员. 没有做其他事情. 而方法也可以完成这个操作, 就 this 而言, 构造函数与方法没有本质区别.

构造函数中发this与方法中一样, 表示对象, 但是构造函数中的对象是刚刚创建出来的对象

ps：补充关于构造函数中return关键字的补充说明

构造函数中不需要return, 就会默认的return this
如果手动的添加return, 就相当于 return this
如果手动的添加return 基本类型; 无效, 还是保留原来 返回this
如果手动添加return null; 或return undefiend, 无效
如果手动添加return 对象类型; 那么原来创建的this就会被丢掉, 返回的是 return后面的对象
上下文调用模式
特征:上下文(Context)，就是函数调用所处的环境。上下文调用，也就是自定义设置this的含义。

常见的就是通过call 、apply和bind调用