扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > VUE >JavaScript中this怎么用
  • 729

0
分享到

JavaScript中this怎么用

2024-04-02 19:04:59 729人浏览 安东尼
摘要

这篇文章主要介绍javascript中this怎么用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！this是面向对象语言中一个重要的关键字，理解并掌握该关键字的使用对于我们代码的健壮

这篇文章主要介绍javascript中this怎么用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

this是面向对象语言中一个重要的关键字，理解并掌握该关键字的使用对于我们代码的健壮性及优美性至关重要。而javascript的this又有区别于Java、C#等纯面向对象的语言，这使得this更加扑朔迷离，让人迷惑。

this使用到的情况：

1. 纯函数

2. 对象方法调用

3. 使用new调用构造函数

4. 内部函数

5. 使用call / apply

6.事件绑定

1. 纯函数

var name = 'this is window'; //定义window的name属性 
function getName(){ 
 console.log(this); //控制台输出: Window //this指向的是全局对象--window对象 
 console.log(this.name); //控制台输出: this is window / 
} 
getName();

运行结果分析：纯函数中的this均指向了全局对象，即window。

2. 对象方法调用

var name = 'this is window'; //定义window的name属性,看this.name是否会调用到 
var testObj = { 
 name:'this is testObj', 
 getName:function(){ 
 console.log(this); //控制台输出:testObj //this指向的是testObj对象 
 console.log(this.name); //控制台输出: this is testObj 
 } 
} 
testObj.getName();

运行结果分析：被调用方法中this均指向了调用该方法的对象。

3.  使用new调用构造函数

function getObj(){ 
 console.log(this); //控制台输出: getObj{} //this指向的新创建的getObj对象 
} 
new getObj();

运行结果分析：new 构造函数中的this指向新生成的对象。

4. 内部函数

var name = "this is window"; //定义window的name属性,看this.name是否会调用到 
var testObj = { 
 name : "this is testObj", 
 getName:function(){ 
 //var self = this; //临时保存this对象 
 var handle = function(){ 
 console.log(this); //控制台输出: Window //this指向的是全局对象--window对象 
 console.log(this.name); //控制台输出: this is window 
 //console.log(self); //这样可以获取到的this即指向testObj对象 
 } 
 handle(); 
 } 
} 
testObj.getName();

运行结果分析：内部函数中的this仍然指向的是全局对象，即window。这里普遍被认为是JavaScript语言的设计错误，因为没有人想让内部函数中的this指向全局对象。一般的处理方式是将this作为变量保存下来，一般约定为that或者self，如上述代码所示。

5. 使用call / apply

var name = 'this is window'; //定义window的name属性,看this.name是否会调用到 
var testObj1 = { 
 name : 'this is testObj1', 
 getName:function(){ 
 console.log(this); //控制台输出: testObj2 //this指向的是testObj2对象 
 console.log(this.name); //控制台输出: this is testObj2 
 } 
}
var testObj2 = { 
 name: 'this is testObj2' 
}
testObj1.getName.apply(testObj2); 
testObj1.getName.call(testObj2);

Note：apply和call类似，只是两者的第2个参数不同：

[1] call( thisArg [，arg1，arg2，… ] );  // 第2个参数使用参数列表：arg1，arg2，...

[2] apply(thisArg [，argArray] );     //第2个参数使用 参数数组：argArray

运行结果分析：使用call / apply  的函数里面的this指向绑定的对象。

6. 事件绑定

事件方法中的this应该是最容易让人产生疑惑的地方，大部分的出错都源于此。

//页面Element上进行绑定 
 <script type="text/javascript"> 
 function btClick(){ 
 console.log(this); //控制台输出: Window //this指向的是全局对象--window对象 
 } 
 </script> 
 <body> 
 <button id="btn" onclick="btClick();" >点击</button> 
 </body> 
//js中绑定方式（1） 
 <body> 
 <button id="btn">点击</button> 
 </body> 
 <script type="text/javascript"> 
 function btClick(){ 
 console.log(this); //控制台输出:<button id="btn">点击</button> //this指向的是Element按钮对象 
 }
 document.getElementById("btn").onclick = btClick; 
 document.getElementById("btn").onclick(); //默认点击
 </script>
//js中绑定方式（2） 
<body> 
 <button id="btn">点击</button> 
 </body> 
 <script type="text/javascript"> 
 document.getElementById("btn").onclick = function(){ 
 console.log(this); //控制台输出:<button id="btn">点击</button> //this指向的是Element按钮对象 
 } 
 document.getElementById("btn").onclick(); 
 </script>
//js中绑定方式（3） 
<body> 
 <button id="btn">点击</button> 
 </body> 
 <script type="text/javascript"> 
 function btClick(){ 
 console.log(this); 
 }
 document.getElementById("btn").addEventListener('click',btClick); //控制台输出:<button id="btn">点击</button> //this指向的是Element按钮对象把函数(方法)用在事件处理的时候。 
 document.getElementById("btn").attachEvent('onclick',btClick); //IE使用,控制台输出: Window //this指向的是全局对象--window对象 
 </script>

运行结果分析：以上2种常用事件绑定方法，在页面Element上的进行事件绑定（onclick="btClick();"），this指向的是全局对象；而在js中进行绑定，除了attachEvent绑定的事件方法（this指向的是全局对象）外，this指向的是绑定事件的Elment元素。

以上是“JavaScript中this怎么用”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网VUE频道！

--结束END--

本文标题: JavaScript中this怎么用

本文链接: https://lsjlt.com/news/69312.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript中this怎么用
    这篇文章主要介绍JavaScript中this怎么用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！this是面向对象语言中一个重要的关键字，理解并掌握该关键字的使用对于我们代码的健壮...
    99+
    2024-04-02
  • 怎么使用JavaScript中的this
    本篇内容介绍了“怎么使用JavaScript中的this”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！隐式...
    99+
    2024-04-02
  • JavaScript中this指向怎么用
    这篇文章主要介绍JavaScript中this指向怎么用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！JavaScript中this也是一件很神奇 事情，在面向对象（比如java）中表示一个当前的对象引用，但是在Ja...
    99+
    2023-06-25
  • javascript中this指向怎么调用
    本篇内容介绍了“javascript中this指向怎么调用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！JavaScript由于其在运行期进...
    99+
    2023-07-04
  • this方法怎么在javascript中使用
    本篇文章为大家展示了this方法怎么在javascript中使用，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。javascript的this使用方法：1) 函数有所属对象时：指向所属对象函数有所属对...
    99+
    2023-06-14
  • JavaScript解析函数中怎么使用this
    这篇“JavaScript解析函数中怎么使用this”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看...
    99+
    2024-04-02
  • JavaScript this关键词怎么用
    这篇“JavaScript this关键词怎么用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这...
    99+
    2024-04-02
  • JavaScript中this的用法
    本篇内容介绍了“JavaScript中this的用法”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！Java...
    99+
    2024-04-02
  • javascript中什么是this
    这篇文章主要介绍“javascript中什么是this”，在日常操作中，相信很多人在javascript中什么是this问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”java...
    99+
    2024-04-02
  • Javascript中的this有什么作用
    这篇文章主要介绍“Javascript中的this有什么作用”，在日常操作中，相信很多人在Javascript中的this有什么作用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解...
    99+
    2024-04-02
  • JavaScript中this指向有什么用
    这篇文章给大家分享的是有关JavaScript中this指向有什么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。JavaScript 中的 this 指向问题有很多文章在解释，...
    99+
    2024-04-02
  • JavaScript中如何使用this
    这篇文章主要介绍JavaScript中如何使用this，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！本文我们介绍下js中this的用法。由上图可得，默认this指向window，而在...
    99+
    2024-04-02
  • JavaScript执行上下文中的this怎么使用
    这篇文章主要讲解了“JavaScript执行上下文中的this怎么使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript执行上下文中的this怎么使用”吧！前言在对象内部的方...
    99+
    2023-07-05
  • JavaScript中的this关键字是什么及怎么用
    今天小编给大家分享一下JavaScript中的this关键字是什么及怎么用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。例子...
    99+
    2023-06-26
  • JavaScript中this关键字有什么用
    本篇内容主要讲解“JavaScript中this关键字有什么用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JavaScript中this关键字有什么用”吧!与...
    99+
    2024-04-02
  • JavaScript的this关键字怎么引用
    这篇“JavaScript的this关键字怎么引用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看...
    99+
    2024-04-02
  • Javascript的this有什么用
    小编给大家分享一下Javascript的this有什么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！在理解javascript...
    99+
    2024-04-02
  • javascript中有哪些this用法
    本篇内容介绍了“javascript中有哪些this用法”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！javascript中this用法：1...
    99+
    2023-06-14
  • 怎么理解并掌握JavaScript中的this
    这篇文章主要介绍“怎么理解并掌握JavaScript中的this”，在日常操作中，相信很多人在怎么理解并掌握JavaScript中的this问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望...
    99+
    2024-04-02
  • JavaScript中this指向问题怎么理解
    这篇文章主要介绍“JavaScript中this指向问题怎么理解”，在日常操作中，相信很多人在JavaScript中this指向问题怎么理解问题上存在疑惑，小编查阅了各式资料，...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作