How to understand JavaScript object-oriented basics and this pointing issue-JS Tutorial-php.cn

# 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 }

Copy after login

② Instantiate (new) an object through the class.

var obj = new 类名(属性1的具体值);
obj.属性;    调用属性
obj.方法();     调用方法

Copy after login

③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

3. This pointing problem in JavaScript

在上一部分中，我们创建了一个类，并通过这个类new出了一个对象。但是，这里面出现了大量的this。很多同学就要懵逼了，this不是“这个”的意思吗？为什么我在函数里面写的this定义的属性，最后到了函数new出的对象呢？？

3.1谁最终调用函数，this就指向谁！

① this指向谁，不应该考虑函数在哪声明，而应该考虑函数在哪调用！！
② this指向的，永远只可能是对象，不可能是函数！！
③ this指向的对象，叫做函数的上下文context，也叫函数的调用者。

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

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

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

Copy after login

② 通过对象.方法调用的，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对象。

Copy after login

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

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

Copy after login

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

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

Copy after login

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

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

Copy after login

3.3关于this问题的面试题

var fullname = &#39;John Doe&#39;;var obj = {
　　fullname: &#39;Colin Ihrig&#39;,
　　prop: {
　　　　fullname: &#39;Aurelio De Rosa&#39;,
　　　　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!

Related labels：

javascript js object

source：php.cn

Previous article：How to solve the problem of multiple ajax page requests and page loading blocking Next article：What are the internal directives in Vue 2.0

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