前言

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>

答案

• 第一题：zhangsan wangwu zhangsan
• 第二题：zhangsan zhangsan
• 第三题：我叫zhangsan 我叫zhangsan
• 第四题：zhangsan zhangsan zhangsan lisi wangwu

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

this

• 指向调用函数的对象
• 无对象调用函数/匿名函数自调用（this指向window）
• 通过new产生的对象
• apply/call调用

一、指向调用函数的对象

<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>

• 全局函数(demo)属于window对象的方法，window调用demo所以this就指向了window
• obj调用say方法，this就指向了obj
• fun()是全局函数，而声明的fun接收的是obj里面单纯的一个函数，并没有调用（obj.say()才是调用了函数），此时的fun就是一个函数（function(){alert(this.str);}），那么当fun()调用函数的时候，this指向的就是window
• 是谁调用的函数，那么this就指向谁

二、无对象调用函数/匿名函数自调用->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>

• 因为匿名函数没有名字，所以就挂给window了
• test()，谁调用test那么就指向谁。当然实验过，它不是window调用的，也不是demo调用的，没有人管它，那么它就指向window。它就相当于一个没有主人调用它，无主函数。

三、通过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>

• 当我们的函数Person里面运用了this去写属性和方法这种格式，那么就要通过new来让属性和方法变得有价值，通过new去运用函数里面的属性和方法

四、apply/call调用

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

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

function.call([thisObj[,arg1[, arg2[, [,.argN]]]]])
function.apply([thisObj[,argArray]])

注意：

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>

• 如果直接调用demo里面写的不管是obj1还是obj2，那么demo还是属于window调用的。
• 不管你用call还是apply最终调用的都是demo函数，但它们会强制的this指向了obj1/obj2，强制的指向了它们的第一个参数对象。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。

# javascript  # this指向  # this  # this的指向问题  # javascript的this关键字详解  # JavaScript调用模式与this关键字绑定的关系  # JS作用域闭包、预解释和this关键字综合实例解析  # javascript中this关键字详解  # 精通JavaScript的this关键字  # 关于js里的this关键字的理解  # JavaScript this关键字指向常用情况解析  # 我叫  # 都是  # 第一个  # 无主  # 它就  # 面向对象  # 的是  # 一个函数  # 来了  # 看了  # 相关内容  # 让我们  # 才是  # 可以通过  # 第二个  # 很重要  # 详细介绍  # 当我们  # 这篇文章  # 谢谢大家 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 详解Android图表 MPAndroidChart折线图  EditPlus中的正则表达式 实战(4)  如何制作一个表白网站视频,关于勇敢表白的小标题？  Laravel模型事件有哪些_Laravel Model Event生命周期详解  Laravel怎么实现验证码(Captcha)功能  瓜子二手车官方网站在线入口 瓜子二手车网页版官网通道入口  音响网站制作视频教程,隆霸音响官方网站？  Laravel如何创建自定义Facades？（详细步骤）  购物网站制作费用多少,开办网上购物网站，需要办理哪些手续？  奇安信“盘古石”团队突破 iOS 26.1 提权  如何用PHP快速搭建高效网站？分步指南  Laravel Seeder填充数据教程_Laravel模型工厂Factory使用  利用python获取某年中每个月的第一天和最后一天  HTML5空格和margin有啥区别_空格与外边距的使用场景【说明】  邀请函制作网站有哪些,有没有做年会邀请函的网站啊？在线制作，模板很多的那种？  如何在VPS电脑上快速搭建网站？  Laravel怎么写单元测试_PHPUnit在Laravel项目中的基础测试入门  Laravel如何处理异常和错误？（Handler示例）  JavaScript Ajax实现异步通信  Laravel如何使用API Resources格式化JSON响应_Laravel数据资源封装与格式化输出  WEB开发之注册页面验证码倒计时代码的实现  Laravel Facade的原理是什么_深入理解Laravel门面及其工作机制  如何在沈阳梯子盘古建站优化SEO排名与功能模块？  Laravel数据库迁移怎么用_Laravel Migration管理数据库结构的正确姿势  SQL查询语句优化的实用方法总结  中山网站推广排名,中山信息港登录入口？  中国移动官方网站首页入口 中国移动官网网页登录  微信小程序 闭包写法详细介绍  长沙企业网站制作哪家好,长沙水业集团官方网站？  C++时间戳转换成日期时间的步骤和示例代码  手机网站制作平台,手机靓号代理商怎么制作属于自己的手机靓号网站？  微博html5版本怎么弄发语音微博_语音录制入口及时长限制操作【教程】  如何快速生成高效建站系统源代码？  Laravel如何发送系统通知_Laravel Notifications实现多渠道消息通知  微信小程序 配置文件详细介绍  宙斯浏览器文件分类查看教程 快速筛选视频文档与图片方法  如何快速建站并高效导出源代码？  JavaScript实现Fly Bird小游戏  JS中对数组元素进行增删改移的方法总结  阿里云网站搭建费用解析：服务器价格与建站成本优化指南  如何在万网ECS上快速搭建专属网站？  Laravel如何记录自定义日志？（Log频道配置）  Laravel如何获取当前登录用户信息_Laravel Auth门面使用与Session用户读取【技巧】  再谈Python中的字符串与字符编码（推荐）  Claude怎样写约束型提示词_Claude约束提示词写法【教程】  如何用已有域名快速搭建网站？  如何快速搭建虚拟主机网站？新手必看指南  网站制作软件免费下载安装,有哪些免费下载的软件网站？  java ZXing生成二维码及条码实例分享  Gemini怎么用新功能实时问答_Gemini实时问答使用【步骤】