Web Front-end
JS Tutorial
How to understand JavaScript object-oriented basics and this pointing issue
How to understand JavaScript object-oriented basics and this pointing issue
# Preface
我们 Our Program Language has gone through a process from "machine-oriented" to "process-oriented" and then to "object-oriented". JavaScript is an object-based language, which is between process-oriented and object-oriented. In the process of learning JavaScript, OOP is a very important part. Let’s discuss the object-oriented approach in JS! ! !
| 1. Basic issues of OOP |
1.1What are process-oriented and object-oriented?
Process-oriented: Focus on the process steps of how to solve a problem. The characteristic of programming is that each step of the process is implemented by functions one by one, without the concepts of classes and objects.
Object-oriented: Focus on which object solves this problem. The characteristic of programming is that classes appear one after another, and the object is obtained from the class, and the object is used to solve specific problems.
For the caller, process orientation requires the caller to implement various functions by himself. Object-oriented, on the other hand, only needs to tell the caller the functions of specific methods in the object, without requiring the caller to understand the implementation details of the method.
1.2Three major characteristics of object-oriented
Inheritance , encapsulation, polymorphism
1.3The relationship between classes and objects
① Class: A collection of classes with the same characteristics (properties) and behaviors (methods).
For example: human being-->Attributes: height, weight, gender Method: eating, talking, walking
② Object : From the class, take out the individual with certain attribute values and methods.
For example: Zhang San-->Attributes: Height 180, Weight 180 Method: Speak-->My name is Zhang San, height 180
③ The relationship between classes and objects
Classes are abstract, objects are concrete (classes are the abstraction of objects, and objects are the concretization of classes) )
Explain:
A class is an abstract concept. It can only be said that a class has attributes and methods, but it cannot be assigned specific attributes. value. For example, humans have names, but we cannot say what their names are. . .
The object is a specific instance, an individual that assigns specific values to the attributes in the class. For example, if Zhang San is an individual human being, we can say that Zhang San’s name is Zhang San. That is to say, Zhang San has made a specific assignment to each attribute of human beings, so Zhang San is an object generated by humans.
| 2. Object-oriented in JavaScript |
2.1Steps to create classes and objects
①Create a class (constructor) : Class names must use the camel case rule, that is, the first letter of each word must be capitalized.
1 function 类名(属性1){
2 this.属性1 = 属性1;
3 this.方法 = function(){
4 //方法中要调用自身属性，必须要使用this.属性
5 }
6 }② Instantiate (new) an object through the class.
var obj = new 类名(属性1的具体值); obj.属性; 调用属性 obj.方法(); 调用方法
③Notes
>>>The process of new creating an object through the class name is called "instantiation of the class"
>>>This in the class will point to the newly created object when instantiated. Therefore, this.property and this.method actually bind properties and methods to the object that is about to be new.
>>>In a class, to call its own properties, you must use this.property name. If you use the variable name directly, you cannot access the corresponding property.
>>>Class names must use the big camel case rule, pay attention to the difference from ordinary functions.
2.2Two important attributes constructor and instanceof
##①constructor：Return the constructor of the current object
##>>>zhangsan.constructor = Person; √②
instanceof: Detect whether an object is an instance of a class; ##>>>lisi instanceof Person √ lisi is created through the Person class new
>>>lisi instanceof Object √ All objects are instances of Object
##>>>Person instanceof Object √ The function itself is also an object
在上一部分中，我们创建了一个类，并通过这个类new出了一个对象。 但是，这里面出现了大量的this。 很多同学就要懵逼了，this不是“这个”的意思吗？为什么我在函数里面写的this定义的属性，最后到了函数new出的对象呢？？ 3.1谁最终调用函数，this就指向谁！① this指向谁，不应该考虑函数在哪声明，而应该考虑函数在哪调用！！ 3.2this指向的规律(与函数的调用方式息息相关！)① 通过函数名()调用的，this永远指向window func(); // this--->window//【解释】 我们直接用一个函数名()调用，函数里面的this，永远指向window。 Copy after login
// 狭义对象
var obj = {
name:"obj",
func1 :func
};
obj.func1(); // this--->obj//【解释】我们将func函数名，当做了obj这个对象的一个方法，然后使用对象名.方法名， 这时候函数里面的this指向这个obj对象。
// 广义对象
document.getElementById("p").onclick = function(){
this.style.backgroundColor = "red";
}; // this--->p//【解释】对象打点调用还有一个情况，我们使用getElementById取到一个p控件，也是一种广义的对象，用它打点调用函数，则函数中的this指向这个p对象。Copy after login
var arr = [func,1,2,3]; arr[0](); // this--->arr//【解释】这个，我们把函数名，当做数组中的一个元素。使用数组下标调用，则函数中的this将指向这个数组arr。 Copy after login
setTimeout(func,1000);// this--->window//setInterval(func,1000);//【解释】使用setTimeout、setInterval等window内置函数调用函数，则函数中的this指向window。 Copy after login
var obj = new func(); //this--->new出的新obj//【解释】这个就是第二部分我们使用构造函数new对象的语句，将函数用new关键字调用，则函数中的this指向新new出的对象。 Copy after login 3.3关于this问题的面试题var fullname = 'John Doe';var obj = {
fullname: 'Colin Ihrig',
prop: {
fullname: 'Aurelio De Rosa',
getFullname: function() {
return this.fullname;
}
}
};
console.log(obj.prop.getFullname());
// 函数的最终调用者 obj.prop
var test = obj.prop.getFullname;
console.log(test());
// 函数的最终调用者 test() this-> window obj.func = obj.prop.getFullname;
console.log(obj.func());
// 函数最终调用者是obj
var arr = [obj.prop.getFullname,1,2];
arr.fullname = "JiangHao";
console.log(arr[0]());// 函数最终调用者数组Copy after login The above is the detailed content of How to understand JavaScript object-oriented basics and this pointing issue. 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 UndressAI-powered app for creating realistic nude photos 
AI Clothes RemoverOnline AI tool for removing clothes from photos. 
Undress AI ToolUndress images for free 
Clothoff.ioAI clothes remover 
Video Face SwapSwap faces in any video effortlessly with our completely free AI face swap tool! 
Hot Article
Assassin's Creed Shadows: Seashell Riddle Solution
4 weeks ago
By DDD
What's New in Windows 11 KB5054979 & How to Fix Update Issues
3 weeks ago
By DDD
Where to find the Crane Control Keycard in Atomfall
4 weeks ago
By DDD
Roblox: Dead Rails - How To Complete Every Challenge
1 months ago
By DDD
How to fix KB5055523 fails to install in Windows 11?
2 weeks ago
By DDD
Hot Tools
Notepad++7.3.1Easy-to-use and free code editor 
SublimeText3 Chinese versionChinese version, very easy to use 
Zend Studio 13.0.1Powerful PHP integrated development environment 
Dreamweaver CS6Visual web development tools 
SublimeText3 Mac versionGod-level code editing software (SublimeText3)
Hot Topics
Recommended: Excellent JS open source face detection and recognition project
Apr 03, 2024 am 11:55 AM
Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side 
PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts
Dec 18, 2023 pm 03:39 PM
With the rapid development of Internet finance, stock investment has become the choice of more and more people. In stock trading, candle charts are a commonly used technical analysis method. It can show the changing trend of stock prices and help investors make more accurate decisions. This article will introduce the development skills of PHP and JS, lead readers to understand how to draw stock candle charts, and provide specific code examples. 1. Understanding Stock Candle Charts Before introducing how to draw stock candle charts, we first need to understand what a candle chart is. Candlestick charts were developed by the Japanese 
How to convert MySQL query result array to object?
Apr 29, 2024 pm 01:09 PM
Here's how to convert a MySQL query result array into an object: Create an empty object array. Loop through the resulting array and create a new object for each row. Use a foreach loop to assign the key-value pairs of each row to the corresponding properties of the new object. Adds a new object to the object array. Close the database connection. 
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 
The relationship between js and vue
Mar 11, 2024 pm 05:21 PM
The relationship between js and vue: 1. JS as the cornerstone of Web development; 2. The rise of Vue.js as a front-end framework; 3. The complementary relationship between JS and Vue; 4. The practical application of JS and Vue. 
How do PHP functions return objects?
Apr 10, 2024 pm 03:18 PM
PHP functions can encapsulate data into a custom structure by returning an object using a return statement followed by an object instance. Syntax: functionget_object():object{}. This allows creating objects with custom properties and methods and processing data in the form of objects. 
What is the difference between arrays and objects in PHP?
Apr 29, 2024 pm 02:39 PM
In PHP, an array is an ordered sequence, and elements are accessed by index; an object is an entity with properties and methods, created through the new keyword. Array access is via index, object access is via properties/methods. Array values are passed and object references are passed. 
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 
|
