我这样理解js里的this

关于this，是很多前端面试必考的题目，有时候在网上看到这些题目，自己试了一下，额，还真的错了！在实际开发中，也会遇到 this 的问题（虽然一些类库会帮我们处理），例如在使用一些框架的时候，例如:knockout，有时候不明白为什么不直接使用this,而要把 this 作为参数传入。

接下来你谈谈我对它的理解，也作为一个笔记，方便以后参阅。有不对的地方，欢迎指出批评。

1. 不像C#，this一定是指向当前对象。js的this指向是不确定的，也就是说是可以动态改变的。call/apply 就是用于改变this指向的函数，这样设计可以让代码更加灵活，复用性更高。

2. this 一般情况下，都是指向函数的拥有者。这一点很重要！这一点很重要！这一点很重要！

这也是一道常见的面试题，如下代码：

<script type="text/javascript">

　　var number = 1;

　　var obj = {

   　　 number: 2,

    　　showNumber: function(){

        　　this.number = 3;

        　　(function(){

            　　console.log(this.number);

        　　})();

        　　console.log(this.number);

    　　}

　　};

　　obj.showNumber();

</script>

由于showNumber方法的拥有者是obj，所以this.number=3; this 指向的就是 obj 的属性 number。同理，第二个 console.log 打印的也是属性 number。

为什么第二点说一般情况下this都是指向函数的拥有者，因为有特殊情况。函数自执行就是特殊情况，在函数自执行里，this 指向的是：window。所以第一个 console.log 打印的是 window 的属性 number。

所以要加一点：

3. 在函数自执行里，this 指向的是 window 对象。

扩展，关于this，还有一个地方比较让人模糊的是在 dom 事件里，通常有如下3种情况：

如下：

1. 使用标签属性注册事件，此时this 指向的是 window 对象。

function test(){alert(this)}

2. 对于1，要让 this 指向 input，可以将 this 作为参数传递。

3. 使用 addEventListener 等注册。此时this 也是指向 input。

document.getElementById("test").addEventListener("click",test);

好久没写博客，完全生疏了~，以后争取多写一点，记录知识，分享知识。

秒客网

我这样理解js里的this

相关文章