前言

Javascript是一门基于对象的动态语言，也就是说，所有东西都是对象，一个很典型的例子就是函数也被视为普通的对象。Javascript可以通过一定的设计模式来实现面向对象的编程，其中this “指针”就是实现面向对象的一个很重要的特性。本文将给大家详细介绍关于Javascript中this关键字指向的相关内容，让我们先做一个小测试，如果全部答对了，恭喜你不用往下看了。

测试题目

第一题

<script>
 var str = 'zhangsan';

 function demo() {
 var str = 'lisi';
 alert(this.str);
 }
 window.demo(); // ??

 var obj = {
 str: "wangwu",
 say: function() {
 alert(this.str);
 }
 }
 obj.say(); // ??

 var fun = obj.say;
 window.fun(); // ??
</script>

第二题

<script>
 var username = 'zhangsan';

 (function() {
 var username = 'lisi';
 alert(this.username); // ??
 })()

 function demo() {
 var username = 'wangwu';

 function test() {
 alert(this.username);
 }

 test(); // ??
 }
 demo();
</script>

第三题

<script>
 function Person() {
 this.username = 'zhangsan';
 this.say = function() {
 alert('我叫' + this.username);
 }
 }

 var p = new Person();
 p.say(); // ??

 var p1 = new Person();
 p1.say(); // ??
</script>

第四题

<script>
 var username = 'zhangsan';

 function demo() {
 alert(this.username)
 }

 var obj1 = {
 username: "lisi"
 };
 var obj2 = {
 username: "wangwu"
 };

 demo(); // ??
 demo(obj1); // ??
 demo(obj2); // ??
 demo.call(obj1); // ?? 
 demo.apply(obj2); // ??
</script>

答案

（往下看，下面有详细解析哦）

this

一、指向调用函数的对象

<script>
 // this:指向调用函数的对象
 var str = 'zhangsan';

 function demo() {
 var str = 'lisi';

 //this->window
 console.log(this);
 alert(this.str);
 }
 window.demo(); // zhangsan

 var obj = {
 str: "wangwu",
 say: function() {
 // this->obj
 alert(this.str);
 }
 }
 obj.say(); // wangwu

 var fun = obj.say;
 window.fun(); // zhangsan
</script>

二、无对象调用函数/匿名函数自调用->this指向window

<script>
 // 2.匿名函数自执行|匿名函数|无主函数 this->window
 var username = 'zhangsan';

 // 匿名函数自执行 this->window
 (function() {
 var username = 'lisi';
 console.log(this); // window
 alert(this.username); // zhangsan
 })()

 function demo() {
 var username = 'wangwu';

 // 无主函数 this->window
 function test() {
 // this->window
 alert(this.username);
 }

 test(); // zhangsan
 }
 demo();
</script>

三、通过new产生的对象

<script>
 // 3.通过new的对象：this指向产生的对象
 // 函数
 function Person() {
 // 属性
 this.username = 'zhangsan';
 // 方法
 this.say = function() {
 // this->p
 console.log(this); // Person对象
 alert('我叫' + this.username);
 }
 }

 // 实例化出一个对象:p就具有了username属性和say方法
 var p = new Person();
 console.log(p); // Person对象
 console.log(p.username); // zhangsan
 p.say(); // 我叫zhangsan

 // this->p1
 var p1 = new Person();
 p1.say(); // Person对象 我叫zhangsan
</script>

四、apply/call调用

首先我们来了解下apply()/call()是个什么东西呢？

apply()/call():最终是调用function，只不过内部的this指向了thisObj

注意：

1. 调用function函数，但是函数内的this指向thisObj（更改对象内部指针）

2. 如果thisObj没有传参，则默认为全局对象

3. call()/apply()联系与区别

联系：功能一样，第一个参数都是thisObj

区别：传递的参数如果比较多

call()的实参就是一一列出

apply()的实参是全部放置在第二个数组参数中

一个理解apply()/call()的实例：

<script>
 // apply()/call()
 function demo() {
 console.log(123);
 }

 // 调用函数的时候，demo.call()/demo.apply()最终调用的还是demo()
 demo(); // 123
 demo.call(); //123
 demo.apply(); // 123
</script>

<script>
 // call()/apply()的区别：
 // call()参数单独再call中罗列
 // apply()的参数通过数组表示
 function demo(m, n, a, b) {
 alert(m + n + a + b);
 }
 demo(1, 5, 3, 4); // 13
 demo.call(null, 1, 5, 3, 4); // 13
 demo.apply(null, [1, 5, 3, 4]); // 13
</script>

this的第四个用法实例

<script>
 // this的第四个用法：call(obj)/apply(obj)：强制性的将this指向了obj
 var username = 'zhangsan';

 function demo() {
 alert(this.username)
 }

 var obj1 = {
 username: "lisi"
 };
 var obj2 = {
 username: "wangwu"
 };

 // call()/apply()：打劫式的改变了this的指向
 demo(); // zhangsan
 demo(obj1); //zhangsan
 demo(obj2); //zhangsan
 demo.call(obj1); // lisi 
 demo.apply(obj2); // wangwu
</script>