Javascript design pattern-inheritance (I)

The topic of this chapter is inheritance, which is divided into the upper and lower sections. It mainly introduces the call and apply methods, and introduces several inheritance implementation methods.

When introducing inheritance, call and apply are a topic that you can't go around and need to understand deeply. Next let's take a look at the definition of call (The apply and call are basically the same, but the parameters are different. We will not introduce them here ):

For the call method, see apply to: function object requires Version 5.5 to call one method of an object and replace the current object with another object. The call ([thisobj [, arg1 [, arg2 [, [,. argn]) parameter is optional. Will be used as the object of the current object. Arg1, arg2, and argn are optional. The method parameter sequence will be passed. The call method can be used to call a method instead of another object. The call method can change the object context of a function from the initial context to the new object specified by thisobj. If the thisobj parameter is not provided, the global object is used as thisobj.

The definition is always hard to understand, or directly in the example above.

Example 1:

function Person(name) {　　this.name = name;　　this.getName = function () {　　　　return this.name;　　}}function Man(name, age) {　　Person.call(this, arguments[0]);　　this.age = age;　　this.setAge = function (age) {　　　　this.age = age;　　}}var man = new Man('jason', 'man');alert(man.getName()); //jason 

Take person. Call (this, argument [0]) as an example:

Caller of the call method:The method of an object (in JS, the method/function is also an object). The caller is person.
Parameters of the call method:A new object (man) is used to intercept the object person and run the getname method originally belongs to the person. argument [0] is used to pass parameters to the method.
Result of the call method:Person. Call (man, argument [0]) is similar to: Man = new person (argument [0])
Functions of the call method:The person method is reused and shared. It has new special effects and is inherited.

So what exactly can call inherit from? I will introduce it through the example below.

In the preceding example, call is called in the constructor. Can the code be inherited during code execution outside the constructor?

Example 2:

function Person(name) {　　this.name = name;　　this.getName = function () {　　　　return this.name;　　}}function Man(name, age) {　　this.age = age;　　this.setAge = function (age) {　　　　this.age = age;　　}}var man = new Man('jason', '25');Person.call(man, 'jason');
alert(man.getName());//jason

Through testing, man inherits the getname function of person. The call method is called using person for the first two times. This time we change to person to see how it works.

Example 3:

function Person(name) {　　this.name = name;　　this.getName = function () {　　　　return this.name;　　}}function Man(name, age) {　　this.age = age;　　this.setAge = function (age) {　　　　this.age = age;　　}}var person = new Person('person');var man = new Man('jason', '25');person.call(man, 'jason');alert(man.getName()); //person.call is not a function

The error is reported because the call caller can only be a function object, the person is a function instance, and the person is a function object.

So this time we use person. getname to call the call and see what the result will be.

Example 4:

function Person(name) {　　this.name = name;　　this.getName = function () {　　　　return this.name;　　}}function Man(name, age) {　　this.age = age;　　this.setAge = function (age) {　　　　this.age = age;　　}}var person = new Person('person');var man = new Man('jason', '25');person.getName.call(man, 'jason');alert(man.getName()); //man.getName is not a function

There will certainly be some questions here. Isn't it possible to call a call as a method, then man should inherit the getname. The first half is correct, but the last half is not necessarily true. What exactly does call inherit from?

Example 5:

Function person (name) {This. name = Name; this. getname = function () {This. address = 'address'; // The code is slightly changed. A variable is added to the getname method.
Return this. name ;}} function man (name, age) {This. age = age; this. setage = function (AGE) {This. age = age ;}} var person = new person ('person '); var man = new man ('jason', '25'); person. getname. call (man, 'jason '); // here we traverse man to see which objects he contains
For (pro in Man) {alert (Pro + ":" + MAN [pro]);}
// Input result:
// Age: 25
// Setage: function (AGE ){
// This. Age = age;
//}
// Address: Address

The result is very special. There is an extra address. The result is obvious. The caller who calls the call will inherit the instance object inside the caller, rather than the caller.

Next we are doing the last test to check whether the call can inherit the objects in the prototype of the object.

Example 6:

function Person(name) {　　this.name = name;}Person.prototype.getName = function () {　　return this.name;}function Man(name, age) {　　this.age = age;　　this.setAge = function (age) {　　　　this.age = age;　　}}var man = new Man('jason', '25');Person.call(man, 'jason');alert(man.getName()); //man.getName is not a function

Obviously, the call method cannot inherit the caller's prototype object, but can only inherit the caller's internal instance object.

　　

Today's content is here, and I hope to help you.