js basic review 8-call method simple use and javascript inheritance

First recall the function of the call method, it can call a method, and the first parameter can specify the value of this inside the method:

Let's take a look at the result:

we found that when fn() was called alone for the first time, this printed out global, because we were running in the node environment, and running the code on the browser side, this points to window.

The second time we use the call method to call fn, since we passed an obj in the first parameter of the call method, the this inside the fn() method points to this obj, so the printed this is this obj

Let's take a look at the result of the same code in the browser: The

call method can also receive multiple parameters. Let's see an example:

result:

function fn(x, y) {
    
    
	console.log(this)
	console.log('x + y = ', x + y)
}

fn()

var obj = {
    
    
	name: "Dean",
	gender: "male"
}

fn.call(obj, 10, 20)

Let's talk about the simple usage of call first, now let's talk about inheritance in javascript

ES6 did not provide extends inheritance before. We 构造函数+原型对象implement inheritance through simulation, which is called. 组合继承
Among them, the constructor is used to inherit the properties of the parent class, and the prototype object is used to inherit the methods of the parent class.

1. The constructor is used to inherit the properties of the parent class:

Son of the subclass wants to borrow the attributes of the parent class Father, so it calls the Father.call()method and passes in this, which is equivalent to when Father executes, the internal this points to the instance object son of the subclass Son.

Results:

We interrupt in the browser Click to see:


Did you see it? Here this points to Son

We can also set individual properties for subclasses:

2. The prototype object is used to inherit the method of the parent class:

Let’s first look at a wrong approach:

if you directly point the prototype of the subclass Son to the prototype of the parent class Father, then indeed the subclass can get the method money on the parent class prototype:

but at this time the prototype object of the subclass and the prototype of the parent class The objects all point to the same memory address, so they will affect each other. If the subclass wants to add a separate method of the subclass, the instance object of the parent class can also get the method defined by the subclass , which is obviously not what we want. :

We use Son.prototype = Father.prototype in the above code, then the next operation of Son.prototype will affect the parent class, for example, we add an exam method to Son.prototype, and then look at the prototype object of the parent class Father.prototype:

Obviously we don’t want the exam method to appear on Father’s prototype object

So we can write


like this: The principle is as follows:

We point Son's prototype to an instance object of Father, and then the method that the subclass Son wants to add separately is written on Son.prototype, because at this time Son.prototype is an instance object of Father, and modifying it will not affect Father. prototype, and Son's instance object can access the method money on the parent prototype object through the __proto__ property of Son.prototype (this is an instance object of Father)

But there is still a problem! !

Let's print the following data

Here the prototype.constructor of the Son subclass points to Father, which is obviously wrong. As we said before, if the prototype object is modified in the form of an object, don’t forget to use the contructor attribute to point back to the original constructor,
so we have to add One step:

so it's changed back