Basic Review of Javascript (3) js object-oriented

This article is the third part of the Javascript series that you must know. Let's mainly look at how Javascript is object-oriented programming, if you need it, you can refer to the last article in the expression series from simple to deep. However, recently, the team has been busy and never been busy! However, if you like expressions, please rest assured that some basic principles of Javascript are common in your work, so I decided to spend some time organizing the basic knowledge and sharing it with you. A training PPT will be attached later. I was planning to write an article at the beginning, but later I wrote it and found more and more articles. So I decided to write a series. All content in this series involves Javascript basics, and there are no trendy things, but I believe these basic things will help you understand those interesting things.

This article is the third part of the Javascript series that you must know. We will mainly look at how Javascript is object-oriented programming. It mainly involves the following:

Objects in Javascript

What is an object?

Traverse attributes

Create object

Factory Model

Constructor Mode

Details about this

In the function

In the object Method

In the constructor

In call and apply

In bind

In the dom element event processing function

Prototype

What is prototype?

What is prototype chain?

Use prototype chain to implement inheritance

Problems in prototype chain

Objects in Javascript

What is an object?

We can understand objects in Javascript as a group of unordered key-value pairs, just like Dictionary in C #. Same. Key is the attribute name, and value can be of the following three types:

Basic Value (string, number, boolean, null, undefined)

Object

Function

Var o = new Object (); o ["name"] = "jesse "; // The basic value is used as the object property o ["location"] = {// The object is used as the object property "city": "Shanghai", "district": "minhang "}; // function as the object property o ["sayHello"] = function () {alert ("Hello, I am" + this. name + "from" + this. location. city);} o. sayHello ();

Traverse attributes

In C #, we can use foreach If the object is a set of key-value pairs in Javascript, how can we traverse it?

for (var p in o) {  alert('name:'+ p +     ' type:' + typeof o[p]    );}// name:name type:string// name:location type:object// name:sayHello type:function

The Traversal method above includes attributes in the prototype. We will discuss what prototype is and how to differentiate attributes in the prototype and instance.

Create object
In fact, we have created an object and used the following two methods to create an object.

Use new to create an Object instance.

Literal

The above o is created in the first way, while the location attribute in o is created in the literal way. The first method is called the constructor mode, because the Object is actually a constructor and generates an Object instance for us. If you still have any questions about the constructor, check out my first basic Object and object type.

In addition to the above two methods, let's take a look at some ways to create objects:

Factory Model

function createPerson(name, age, job){  var o = new Object();  o.name = name;  o.age = age;  o.job = job;  o.sayName = function(){    alert(this.name);  };  return o;}var person1 = createPerson('Jesse', 29, 'Software Engineer');var person2 = createPerson('Carol', 27, 'Designer');

There is a problem with the Object created in this mode, that is, it creates an Object instance for me within the function. This instance has nothing to do with our constructor createPerson.

Because I used new Object () internally to create this Object, it is an Object instance. So if we want to know which function is an instance, it is impossible.

Constructor Mode

The factory mode does not solve the problem of Object recognition, but we can think that Object () is actually a function, but when I add a new one before it, it becomes an instance where the constructor generates an Object for us. Then I can add new in front of other functions to generate the function instance. This is the so-called constructor mode.

function Person(name, age, job){  this.name = name;  this.age = age;  this.job = job;  this.sayName = function(){    alert(this.name);  };} var p1 = new Person('Jesse', 18, 'coder');alert(p1 instanceof Person); // true

Details about this
This can also be regarded as a magical object in Javascript. It is true that this is an object. In the previous article, we talked about the variable object in the scope and scope chain. The variable object determines which attributes and functions can be accessed in the current execution environment, to some extent, we can regard this as the variable object. We mentioned earlier that the largest execution environment is the global execution environment, and the window is the variable object in the global execution environment. In the global environment, this = window will return true.

In addition to the global execution environment, we also mentioned another execution environment, that is, the function. Each function has a this object, but sometimes the values they represent are different, mainly determined by the caller of this function. Let's take a look at the following scenarios:

Function

function f1(){ return this;} f1() === window; // global object

Because the current function runs in the global function, the this object in the function points to the global variable object, that is, window. In this mode, undefined is returned in strict mode.

Object Method

var o = { prop: 37, f: function() {  return this.prop; }}; console.log(o.f()); // logs 37

In the object method, this object points to the current instance object. Note: No matter where or how the function is defined, as long as it is a method of an object instance, its "this" points to this object instance.

var o = { prop: 37 };var prop = 15; function independent() {  return this.prop;} o.f = independent;console.log(independent()); // logs 15console.log(o.f()); // logs 37

Difference: if the above function is directly executed by independent, this is to point to the global execution environment, then this. prop is to point to our global variable prop. However, if you set independent as an attribute of object o, this in independent points to this instance. Similarly, this. prop becomes the prop attribute of object o.

Constructor

We mentioned above that using constructors to create objects actually utilizes this feature. In constructor, this object points to the object instantiated by this constructor.

function Person(name, age, job) {  this.name = name;  this.age = age;  this.job = job;  this.sayName = function () {    alert(this.name);  };} var p1 = new Person('Jesse', 18, 'coder');var p2 = new Person('Carol',16,'designer');

When we instantiate Person to get p1, this points to p1. When we instantiate Person to get p2, this points to p2.

Use call and apply

When we use call and apply to call a function, the this object in this function will be bound to the object we specified. The main difference between call and apply is that apply requires an array to be input as the parameter list.

Function add (c, d) {return this. a + this. B + c + d;} var o = {a: 1, B: 3}; // The first parameter is bound to the this object add of function add. call (o, 5, 7); // 1 + 3 + 5 + 7 = 16 // The second parameter is the array as the arguments Input Method addadd. apply (o, [10, 20]); // 1 + 3 + 10 + 20 = 34

In the bind method

The bind method is the function. prototype. bind in the Function prototype. That is to say, all functions have this method. But when we call the bind of a method, we will generate a new method that is the same as the original method, but this is the first parameter that points to the bind we passed.

function f() {  return this.a;} var g = f.bind({ a: "azerty" });console.log(g()); // azerty var o = { a: 37, f: f, g: g };console.log(o.f(), o.g()); // 37, azerty

In the dom element event Processor

In the event processing function, this points to the dom element that triggers the event.

HTML code