Collection of JavaScript, Object-Oriented Programming (2)!

Today I went on to write the last one. Yesterday I was so tired this week that I rushed to work overtime every day. At 12 o'clock yesterday, my neck began to ache. Okay, no nonsense. It's time to start

inherit

Inheritance: Subclasses inherit attributes and methods in parent classes, which do not require implementation in subclasses

Types of inheritance:

Single Inheritance: A child class has only one parent class

Multiple Inheritance: A subclass can have multiple parent classes

Prototype chain

This really appeals to js learners to read the red treasure book.

function SuperType(){

this.property = true;

}

SuperType.prototype.getSuperValue = function(){

};

function SubType(){

this.subproperty = false;

}

//SuperType

SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function (){

return this.subproperty;

};

var instance = new SubType();

alert(instance.getSuperValue()); //true

The Problem of Prototype Chain

function SuperType(){

this.colors = ["red", "blue", "green"];

alert(instance1.colors); //"red,blue,green,black"

}

function SubType(){}

//SuperType

SubType.prototype = new SuperType();

var instance1 = new SubType();

instance1.colors.push("black");

var instance2 = new SubType(); alert(instance2.colors); //"red,blue,green,black"

Prototype inheritance

var person = {

name: "Nicholas",

friends: ["Shelby", "Court", "Van"]

};

var anotherPerson = object(person);

anotherPerson.name = "Greg";

anotherPerson.friends.push("Rob");

var yetAnotherPerson = object(person);

yetAnotherPerson.name = "Linda";

yetAnotherPerson.friends.push("Barbie");

alert(person.friends); //"Shelby,Court,Van,Rob,Barbie"

var person = {

name: "Nicholas",

friends: ["Shelby", "Court", "Van"]

};

var anotherPerson = Object.create(person);

anotherPerson.name = "Greg";

anotherPerson.friends.push("Rob");

var yetAnotherPerson = Object.create(person);

yetAnotherPerson.name = "Linda";

yetAnotherPerson.friends.push("Barbie");

alert(person.friends); //"Shelby,Court,Van,Rob,Barbie"

Inheritance method

Inheritance 1. By changing the execution environment of the constructor (parent class) - - add a special attribute to the subclass, which points to the parent class.

function Father(){

this.money = 999999;

this.eat = function(){

console.log("eat meat");

}

this.drink = function(){

console.log("drink");

}

}

function Son(){

this.parent = Father; //Adding a unique attribute to a subclass to change the execution environment of the parent class is similar: this.parent = function (){...}

this.parent();//Changing the execution environment

}

var son = new Son();

Inheritance Mode 2. Implementation by call Method

call Methods:

Parent class.call(Subclass[,Subclasses inherit attributes of parent classes]);

function Father(firstname){

this.firstname = firstname;

this.money = 200000000;

this.drink = function(){

console.log("drink");

}

this.dance = function(){

console.log("dance");

}

}

function Son(firstname){

Father.call(this,firstname );

}

Inheritance Mode 3. Inheritance through apply

apply Usage method:

Parent class.apply(Subclass objects,array) The properties stored in the array are inherited from the parent class

function xiaomi5(price,size,memsize){

this.price = price;

this.size = size;

this.memsize = memsize;

this.phoneCall = function(){

console.log("Phone");

}

this.sendMessage = function(){

console.log("Send message");

}

}

function xiaomi5Plus(price,size,memsize,color){

this.color = color;//Specific attributes

//xiaomi5.apply(this,[price,size,memsize]);

xiaomi5.apply(this,arguments);//Receive through arguments

this.playMusic = function(){

return "Play music";

}

this.photo = function(){

console.log("Photograph");

}

}

var xm = new xiaomi5Plus(789,7,64,"white");

console.log(xm);

Combinatorial inheritance

Here I'm going to pick it out and talk about it.

adopt apply or call Inheriting instance attributes

Inheritance of prototyping methods through prototyping

function Father(money,firstname){

this.money = money;

this.firstname = firstname;

}

Father.prototype.dance = function(){

console.log("dance");

}

Father.prototype.sleep= function(){

console.log("Sleep?");

}

function Son(money,firstname){

Father.call(this,money,firstname);

}

//Prototype inheritance

Son.prototype = new Father();

var son = new Son("200000","king");

son.dance();

function SuperType(name){

this.name = name;

this.colors = ["red", "blue", "green"];

}

SuperType.prototype.sayName = function(){

alert(this.name);

JavaScript instanceof isPrototypeOf()

function object(o){

function F(){}

object() object()13

};

function SubType(name, age){

//SuperType.call(this, name);

this.age = age;

}

//

SubType.prototype = new SuperType(); SubType.prototype.constructor = SubType; SubType.prototype.sayAge = function(){

alert(this.age);

};

var instance1 = new SubType("Nicholas", 29);

instance1.colors.push("black");

alert(instance1.colors);

instance1.sayName();

instance1.sayAge();

//"red,blue,green,black"

//"Nicholas";

//29

var instance2 = new SubType("Greg", 27);

alert(instance2.colors);//"red,blue,green"

instance2.sayName();//"Greg";

instance2.sayAge();//27

Parasitic combinatorial inheritance

This way of inheritance, if you don't read the Red Treasure Book, you rarely know it. I used to fake a haha in this way in an interview.

function SuperType(name){

this.name = name;

this.colors = ["red", "blue", "green"];

}

SuperType.prototype.sayName = function(){

alert(this.name);

};

function SubType(name, age){

SuperType.call(this, name);

this.age = age;

}

SubType.prototype = new SuperType();

SubType.prototype.constructor = SubType;

SubType.prototype.sayAge = function(){

alert(this.age);

};

function inheritPrototype(subType, superType){

var prototype = object(superType.prototype);

prototype.constructor = subType;

subType.prototype = prototype;

}

function SuperType(name){

this.name = name;

this.colors = ["red", "blue", "green"];

}

SuperType.prototype.sayName = function(){

alert(this.name);

};

function SubType(name, age){

SuperType.call(this, name);

this.age = age;

}

inheritPrototype(SubType, SuperType);

SubType.prototype.sayAge = function(){

alert(this.age);

}

summary

Welcome your continuous attention. There are many topics, small programs (continuous updates), Javascript (continuous updates), Vue and other learning notes. Feel that there are gains to collect attention, welcome harassment, study together, progress together

Finally, promote your own little program, if you also like to exercise, find your little partner here.

Self-discipline is more free, a programmed ape who likes to exercise, hey hey.

As you can see, it's too much without a little attention.

Keywords: Attribute Javascript Vue

Added by unstable_geek on Thu, 16 May 2019 20:12:06 +0300