Home Web Front-end JS Tutorial Discussion on the pointing issue of this in js

Discussion on the pointing issue of this in js

Mar 16, 2018 pm 05:09 PM
javascript this Discuss

This article mainly shares with you the discussion on the pointing issue of this in js. The this keyword represents the object of the method currently being executed. If there is no current method, it refers to the global variable. That is to say, this represents the reference of the object calling the method.

#1. This in the global scope or ordinary function points to the global object window.

//直接打印
    console.log(this) //window
//function声明函数
    function bar () {conso
le.log(this)}bar() //window
//function声明函数赋给变量
    var bar = function () {console.log(this)}bar() //window
//自执行函数
    (function () {console.log(this)})(); //window
Copy after login

##2. Who calls this and points to whom in the method call

//对象方法调用
    var person = {run: function () {console.log(this)}}person.run()// person
//事件绑定
    var btn = document.querySelector("button")btn.onclick = function () {console.log(this) // btn}
//事件监听
    var btn = document.querySelector("button")btn.addEventListener('click', function () {console.log(this) //btn})
//jquery的ajax
    $.ajax({ self: this,    type:"get",    url: url,    async:true,    success: function (res) {console.log(this)
 // this指向传入$.ajxa()中的对象
    console.log(self) // window  } }); 
//这里说明以下,将代码简写为$.ajax(obj) ,this指向obj,在obj中this指向window,因为在在success方法中,独享obj调用自己,所以this指向obj
Copy after login

3. In the constructor or constructor prototype object this points to the instance of the constructor

//不使用new指向window
    windowfunction Person (name) {console.log(this) // window    
    this.name = name;}Person('inwe')
//使用new
    function Person (name) {this.name = name   console.log(this) //people     
    self = this  }  var people = new Person('iwen')  console.log(self === people) //true
//这里new改变了this指向,将this由window指向Person的实例对象people
new改变this指向,将this指向window改为指向person的实例people
Copy after login

Change the pointer of this:

The function itself is a special type, Most people think that it is a variable. Who this points to cannot be determined when the function is defined. Only when the function is executed can it be determined who this points to. In fact, this points to the function that finally calls it.

Related recommendations:

Detailed explanation of the usage of $this and access qualifiers in PHP

Modify the this pointer in JavaScript Various methods

This rules and this object usage examples in JavaScript

The above is the detailed content of Discussion on the pointing issue of this in js. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Simple JavaScript Tutorial: How to Get HTTP Status Code Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

How to get HTTP status code in JavaScript the easy way How to get HTTP status code in JavaScript the easy way Jan 05, 2024 pm 01:37 PM

Introduction to the method of obtaining HTTP status code in JavaScript: In front-end development, we often need to deal with the interaction with the back-end interface, and HTTP status code is a very important part of it. Understanding and obtaining HTTP status codes helps us better handle the data returned by the interface. This article will introduce how to use JavaScript to obtain HTTP status codes and provide specific code examples. 1. What is HTTP status code? HTTP status code means that when the browser initiates a request to the server, the service

Deep dive: What is the Django framework? Deep dive: What is the Django framework? Jan 19, 2024 am 09:23 AM

The Django framework is a Python framework for web applications that provides a simple and powerful way to create web applications. In fact, Django has become one of the most popular Python web development frameworks and has become the first choice for many companies, including Instagram and Pinterest. This article will delve into what the Django framework is, including basic concepts and important components, as well as specific code examples. Django basic conceptsDjan

JavaScript and WebSocket: Building an efficient real-time search engine JavaScript and WebSocket: Building an efficient real-time search engine Dec 17, 2023 pm 10:13 PM

JavaScript and WebSocket: Building an efficient real-time search engine Introduction: With the development of the Internet, users have higher and higher requirements for real-time search engines. When searching with traditional search engines, users need to click the search button to get results. This method cannot meet users' needs for real-time search results. Therefore, using JavaScript and WebSocket technology to implement real-time search engines has become a hot topic. This article will introduce in detail the use of JavaScript

How to implement an online electronic signature system using WebSocket and JavaScript How to implement an online electronic signature system using WebSocket and JavaScript Dec 18, 2023 pm 03:09 PM

Overview of how to use WebSocket and JavaScript to implement an online electronic signature system: With the advent of the digital age, electronic signatures are widely used in various industries to replace traditional paper signatures. As a full-duplex communication protocol, WebSocket can perform real-time two-way data transmission with the server. Combined with JavaScript, an online electronic signature system can be implemented. This article will introduce how to use WebSocket and JavaScript to develop a simple online

Deep dive: Single-threaded features in Go language Deep dive: Single-threaded features in Go language Mar 15, 2024 pm 02:09 PM

As a modern programming language, Go language has been loved and favored by more and more developers in recent years due to its simplicity and efficiency. One of the unique features is its single-threaded nature. In traditional multi-threaded programming languages, developers usually need to manually manage synchronization and mutual exclusion between threads. In Go language, with its unique coroutine (Goroutine) and communication mechanism (channel), it can be convenient and efficient. implement concurrent programming. 1. Goroutine and single thread: Go language

A deep dive into common special characters in Linux A deep dive into common special characters in Linux Mar 14, 2024 pm 02:54 PM

As a commonly used open source operating system, Linux operating system has strong customizability and flexibility. When using Linux systems, we often encounter the processing of various special characters. These special characters have special meanings in the command line and can implement many advanced functions. This article will delve into the common special characters in Linux and introduce their usage in detail with specific code examples. Wildcards: Wildcards are special characters used to match file names. Common wildcards include *,?, [], etc. Here are several

How to implement a real-time online voting system using JavaScript and WebSocket How to implement a real-time online voting system using JavaScript and WebSocket Dec 18, 2023 pm 04:27 PM

How to use JavaScript and WebSocket to implement a real-time online voting system Introduction: With the rapid development of the Internet, real-time online voting systems have become a very common form in various activities and elections. Using JavaScript and WebSocket technology to implement a real-time online voting system has the advantages of flexibility and ease of use. This article will introduce in detail how to use JavaScript and WebSocket to implement a simple real-time online voting system and provide the corresponding code

See all articles