第149天:javascript中this的指向详解

简介: js中的this指向十分重要,了解js中this指向是每一个学习js的人必学的知识点,今天没事,正好总结了js中this的常见用法,喜欢的可以看看:1、全局作用域或者普通函数中this指向全局对象window。

js中的this指向十分重要,了解js中this指向是每一个学习js的人必学的知识点,今天没事,正好总结了js中this的常见用法,喜欢的可以看看:

1、全局作用域或者普通函数中this指向全局对象window

 1 //直接打印
 2 console.log(this) //window
 3 
 4 //function声明函数
 5 function bar () {console.log(this)}
 6 bar() //window
 7 
 8 //function声明函数赋给变量
 9 var bar = function () {console.log(this)}
10 bar() //window
11 
12 //自执行函数
13 (function () {console.log(this)})(); //window

2、方法调用中谁调用this指向谁

 1 {console.log(this)}
 2 }
 3 person.run() // person
 4 
 5 //事件绑定
 6 var btn = document.querySelector("button")
 7 btn.onclick = function () {
 8     console.log(this) // btn
 9 }
10 //事件监听
11 var btn = document.querySelector("button")
12 btn.addEventListener('click', function () {
13    console.log(this) //btn
14 })
15 
16 //jquery的ajax
17  $.ajax({
18     self: this,
19     type:"get",
20     url: url,
21     async:true,
22     success: function (res) {
23         console.log(this) // this指向传入$.ajxa()中的对象
24         console.log(self) // window
25     }
26    });
27  //这里说明以下,将代码简写为$.ajax(obj) ,this指向obj,在obj中this指向window,因为在在success方法中,独享obj调用自己,所以this指向obj

3、在构造函数或者构造函数原型对象中this指向构造函数的实例

 1 //不使用new指向window
 2 function Person (name) {
 3     console.log(this) // window
 4     this.name = name;
 5 }
 6 Person('inwe')
 7 //使用new
 8 function Person (name) {
 9       this.name = name
10       console.log(this) //people
11       self = this
12   }
13   var people = new Person('iwen')
14   console.log(self === people) //true
15 //这里new改变了this指向,将this由window指向Person的实例对象people

 

相关文章
|
8天前
|
JavaScript 前端开发
javascript中的this
javascript中的this
|
8天前
|
JavaScript 前端开发
错综复杂的this:理清你的JavaScript代码中的指向问题
错综复杂的this:理清你的JavaScript代码中的指向问题
|
8天前
|
JavaScript
JS中改变this指向的六种方法
JS中改变this指向的六种方法
|
6天前
|
前端开发 JavaScript
JavaScript:this-关键字,2024中级前端开发面试解答
JavaScript:this-关键字,2024中级前端开发面试解答
|
8天前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【5月更文挑战第9天】JavaScript中的`this`关键字行为取决于函数调用方式。在非严格模式下,直接调用函数时`this`指全局对象,严格模式下为`undefined`。作为对象方法调用时,`this`指向该对象。用`new`调用构造函数时,`this`指向新实例。通过`call`、`apply`、`bind`可手动设置`this`值。在回调和事件处理中,`this`可能不直观,箭头函数和绑定方法可帮助管理`this`的行为。
17 1
|
8天前
|
JavaScript 前端开发
深入探索JavaScript:如何改变this的指向
深入探索JavaScript:如何改变this的指向
|
8天前
|
JavaScript 前端开发
【专栏】`Function.prototype.apply` 在JavaScript中用于动态设定函数上下文(`this`)和参数列表
【4月更文挑战第29天】`Function.prototype.apply` 在JavaScript中用于动态设定函数上下文(`this`)和参数列表。它接受两个参数:上下文对象和参数数组。理解`apply`有助于深入JS运行机制。文章分三部分探讨其原理:基本概念和用法、工作原理详解、实际应用与注意事项。在应用中要注意性能、参数类型和兼容性问题。`apply`可用于动态改变上下文、传递参数数组,甚至模拟其他语言的调用方式。通过深入理解`apply`,能提升代码质量和效率。
|
8天前
|
JavaScript 前端开发 数据安全/隐私保护
|
8天前
|
自然语言处理 JavaScript 前端开发
js_关键字this指向哪里?
js_关键字this指向哪里?
7 0
|
8天前
|
JavaScript 前端开发
js开发:请解释this关键字在JavaScript中的用法。
【4月更文挑战第23天】JavaScript的this关键字根据执行环境指向不同对象:全局中指向全局对象(如window),普通函数中默认指向全局对象,作为方法调用时指向调用对象;构造函数中指向新实例,箭头函数继承所在上下文的this。可通过call、apply、bind方法显式改变this指向。
10 1