JavaScript object-oriented basics and specific analysis of this pointing problem

The following editor will bring you a commonplace article about JavaScript object-oriented basics and this pointing problem. The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor and take a look.

Preface

Our programming language has experienced from “machine-oriented” to “machine-oriented”. A process from "process-oriented" 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 questions of OOP

1.1 What 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 the 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.2 Three major characteristics of object-oriented

Inheritance, encapsulation, polymorphism

##1.3 The relationship between classes and objects

① Class: A collection of classes with the same characteristics (properties) and behaviors (methods).

For example: Human beings -->Attributes: height, weight, gender Methods: eating, talking, walking

②Object: From the class, take out an individual with certain attribute values ​​and methods .

For example: Zhang San --> Attributes: Height 180, Weight 180 Method: Talk --> My name is Zhang San, height 180

③ Relationship between class and object

Class is abstract, object is concrete (class is the abstraction of object, object is the concretization of class)

Explain:

Class is an abstract concept, only We can say that a class has attributes and methods, but we cannot assign specific values ​​to the attributes. 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.1 Steps to create classes and objects

①Create a class (constructor): The class name must use the camel case rule, that is, the first letter of each word must be capitalized.

function 类名(属性1){
  this.属性1 = 属性1;
  this.方法 = function(){
   //方法中要调用自身属性，必须要使用this.属性
  }
}

② Instantiate (new) an object through the class.

var obj = new class name (specific value of attribute 1);

obj.attribute; call attribute

obj.method(); call method

③Notes

>>>The process of new creating an object through the class name is called "instantiation of the class"

>>>In the class this 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.2 Two important attributes constructor and instanceof

①constructor: Returns 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 passed through the Person class new Out

>>>lisi instanceof Object √ All objects are instances of Object

>>>Person instanceof Object √ The function itself is also an object

3. This pointing problem in JavaScript

In the previous part, we created a class and new an object through this class. However, there is a lot of this in it. Many students are confused. Doesn’t this mean “this”? Why does the attribute defined by this that I wrote in the function end up in the object produced by function new? ?

3.1 Whoever calls the function finally, this will point to!

① Who this points to should not consider where the function is declared, but where the function is called! !

② What this points to can always only be an object, not a function! !

③ this指向的对象，叫做函数的上下文context，也叫函数的调用者。

3.2this指向的规律(与函数的调用方式息息相关！)

① 通过函数名()调用的，this永远指向window

func(); // this--->window
//【解释】 我们直接用一个函数名()调用，函数里面的this，永远指向window。

② 通过对象.方法调用的，this指向这个对象

// 狭义对象
 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对象。

③ 函数作为数组的一个元素，用数组下标调用，this指向这个数组

var arr = [func,1,2,3];
arr[0](); // this--->arr
//【解释】这个，我们把函数名，当做数组中的一个元素。使用数组下标调用，则函数中的this将指向这个数组arr。

④ 函数作为window内置函数的回调函数使用，this指向window。比如setTimeout、setInterval等

setTimeout(func,1000);// this--->window
//setInterval(func,1000);
//【解释】使用setTimeout、setInterval等window内置函数调用函数，则函数中的this指向window。

⑤ 函数作为构造函数，使用new关键字调用，this指向新new出的对象

var obj = new func(); //this--->new出的新obj
//【解释】这个就是第二部分我们使用构造函数new对象的语句，将函数用new关键字调用，则函数中的this指向新new出的对象。

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]());
// 函数最终调用者数组

好了，这篇博客，我们了解了什么是面向对象、类和对象的关系、JS中声明类与对象的步骤，以及重点讲解的this指向问题！ 希望能够帮助大家真正的理解了this的认知，下面我会继续给大家分享关于面向对象方面的问题。多谢大家的支持！！！

The above is the detailed content of JavaScript object-oriented basics and specific analysis of this pointing problem. For more information, please follow other related articles on the PHP Chinese website!