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.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.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

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

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

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

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

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

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

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