JavaScript object-oriented and this pointing (with code)

This time I bring you JavaScript object-oriented and this pointing (with code), Using JavaScriptObject-oriented and this pointing What are the precautions, the following is a practical case, Let’s take a look.

Our programming 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.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 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 similar characteristics (properties) and behaviors (methods).

For example: human being-->Attributes: height, weight, gender Method: 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

③ The relationship between classes and objects

Classes are abstract, objects are concrete (classes are the abstraction of objects, objects are the concretization of classes)

explain:

Class is an abstract concept. It can only be said that a class has attributes and methods , but it cannot assign specific values ​​to the attributes. For example, humans have names, but we cannot say what their names are. . .

An 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 big 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 a class.

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

obj.property; call property

obj.Method(); Call method

③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 camel case rule, and pay attention to the difference from ordinary functions.

2.2 Two important attributes constructor and instanceof

①constructor：返回当前对象的构造函数

>>>zhangsan.constructor = Person; √

②instanceof：检测一个对象，是不是一个类的实例；

>>>lisi instanceof Person √ lisi是通过Person类new出的

>>>lisi instanceof Object √ 所有对象都是Object的实例

>>>Person instanceof Object √ 函数本身也是对象

3、 JavaScript中的this指向问题

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

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

① this指向谁，不应该考虑函数在哪声明，而应该考虑函数在哪调用！！

② this指向的，永远只可能是对象，不可能是函数！！

③ 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的认知，下面我会继续给大家分享关于面向对象方面的问题。多谢大家的支持！！！

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Vue中computed属性的使用方法

ajax与跨域jsonp

The above is the detailed content of JavaScript object-oriented and this pointing (with code). For more information, please follow other related articles on the PHP Chinese website!