js inheritance-constructor inheritance, call apply change this to prototype chain inheritance, mixed inheritance

Keywords: Web Development

1. Constructor Inheritance

function Person(name,age){
		this.name = name;
			this.age = age;
			this.run = function(){
				console.log('run....');
			}
		}
		function YPerson(name,age,color){
			this.method = Person;//this.method points to the constructor Person pointed to by Person
			this.method(name,age); //Executing this.method method, that is, executing the function YPerson points to, inherits all the properties and methods of Person.
			
			this.color = color;
		}
		var res = new YPerson('Xiao Wang',18,'yellow');
		res.run();  //Run...

The essence is to call the parent constructor in the subclass, so that the subclass has the attributes and methods of the parent class.

2. call/apply method

all and apply exist to change the context of a function when it runs, in other words, to change the direction of this inside the function.
The two functions are exactly the same, but the way of accepting parameters is not the same.

The call method is a method in the Function class that accepts two parameters
The value of the first parameter of the call method is assigned to this appearing in the class (that is, the method).
The second parameter of the call method begins to be assigned in turn to the parameter accepted by the class (that is, the method).

apply method accepts two parameters.
The first parameter is the same as the first parameter of the call method, which is assigned to this in the class (that is, the method).
The second parameter is the array type, in which each element is assigned in turn to the parameters accepted by the class (that is, the method).

function Person(name,age){
		this.name = name;
			this.age = age;
			this.run = function(){
				console.log('run....');
			}
		}
		function YPerson(name,age,color){
//			Person.call(this,name,age);  //call
			Person.apply(this,[name,age]);	//apply
			this.color = color;
		}
		var res = new YPerson('Xiao Wang',18,'yellow');
		res.run();  //Run...
		console.log(res);

3. Inheritance of Prototype Chain
The attributes and methods of an object may be defined either in itself or in its prototype object. Because prototype itself is an object and has its own prototype, a prototype chain has been formed.

function Box() { //Box constructor
		this.name = 'Xiao Wang';
		}
		function Desk() { //Desk constructor
			this.age = 18;
		}
		Desk.prototype = new Box(); //Desc inherits Box and forms a chain through prototype.
		var desk = new Desk();
		console.log(desk.name);//Xiao Wang's Inheritance

The prototype chain inherits a principle:
Inheritance is achieved by pointing the prototype of one constructor to an instance object of another constructor.

4. Mixed Inheritance

function Box(age) {
		this.name = 'Xiao Wang';
			this.age = age;
		}
		Box.prototype.run = function() {
			return this.name + this.age;
		};
		function Desk(age) {
			this.method = Box;//this.method points to the object function that Person points to.
			this.method(age);//Executing this.method method method, that is, executing the function YPerson points to, inherits all the properties of Person and the method constructor inherits the age properties.
		}
		Desk.prototype = new Box(); //Prototype chain inheritance run method
		var desk = new Desk(18);
		console.log(desk.run());//Xiao Wang 18

Posted by Sealr0x on Sun, 27 Jan 2019 19:39:14 -0800