JavaScript-Image Understanding object-oriented, prototype, and inheritance

JavaScript-Image Understanding object-oriented, prototype, and inheritance

This is the second overall review of JavaScript's object-oriented and prototype knowledge. This part of knowledge is abstract but very important. It encapsulates the Later class libraries and implements the overall architecture. In this section, I will give a comprehensive explanation of each method.

Highlights of this section

// JS object-oriented and prototype // 1. Create class: a. Create with new Object. B. create with a literal (directly instantiate an object without the new operator) c. create using constructors // 2. the difference between instantiated attributes and prototype attributes. relationship between instance objects and classes // 3. understanding of prototype chain, difference between prototype and _ proto _ // 4. inheritance mode:. factory mode. b. prototype chain mode. c. combination Mode. d. prototype. e. prototype combination mode. f. construct parasitic

1. JavaScript creates classes using object () to create

// 1. use Objectvar obj = new Object (); obj. a = "A"; obj. B = "B"; obj. func = function () {console. log (this. a + this. b); // this} can be used here; // cosole. log (this. a); // here this is the // obj in the window. func ();

Factory Mode

// Instantiate objects in a centralized manner. The factory mode var createObj = function (a, B) {var obj = new Object (); obj. a = a; obj. B = B; obj. func = function () {return this. a + this. B ;}; return obj ;}var obj1 = createObj ("a1", "b1"); var obj2 = createObj ("a2", "b2"); console. log (obj1.func (); console. log (obj2.func (); console. log (obj1 instanceof Object); // The Object type cannot be determined.

Use constructors

// 2. constructor // constructor can be used for centralized instantiation, but there is no new Object (), but it automatically performs new Object () internally (); // this directly indicates this object // The object does not need to be returned. The day after tomorrow the // delete method will be returned directly to delete instance attributes and methods and prototype attributes and Methods // hasOwnProperty () determines whether a method or attribute is in the constructor. In indicates whether the prototype is an object instance or a function prototype in both the prototype and instance. // When using the constructor, the first letter must be uppercase // the new operator must be used/* function Obj (a, B) {this. a = a; this. B = B; this. func = function () {return this. a + this. B ;}}* // var obj = new Obj ("a1", "b1"); // console. log (obj. func (); // console. log (obj instanceof Obj); // you can determine the specific class // var o = new Object (); // understanding of the call method: it is equivalent to placing the Obj method in object o. // that is, changing the context object of Obj to o // Obj. call (o, "a2", "b2"); // console. log (o); // understand the relationship between the internal functions of the constructor // var objTest = new Obj ("a1", "b1"); // console. log (ob J. func () = objTest. func (); // the calculated value is equal // console. log (obj. func = objTest. func); // The reference address of the function is different and is two different instantiated objects // use the prototype. Prototype is a built-in attribute of a function. It can be seen as the object created by the constructor during instantiation. // Benefits of prototype: Shared variables and Methods // function Aaa () {}// var aaa = new Aaa (); // Aaa. prototype. B = "B"; // It Must Be var aaa = new Aaa () before access to B // aaa. _ proto __. B = "b1"; // share attributes // console. log (aaa. b); // b1 // Aaa. B = "b1"; // equivalent to Static Property, which must pass Aaa. B can access, aaa. B is inaccessible // console. log (Aaa. b); // Aaa. prototype. func = function () {// the address of the prototype method is the same. Each time the instance method is instantiated, a new space is required. // console. log (this); // this indicates the prototype of the constructor instantiation. //} // _ proto _ and prototype. // _ proto _ indicates the prototype. And prototype is an attribute of the function // var aaa = new Aaa (); // console. log (aaa. _ proto _ = Aaa. prototype); // true. // Constuctor is an attribute of the prototype. You can obtain the constructor // console. log (Aaa. prototype. constructor = aaa. _ proto _. constructor); // true

2. Differences between creating a prototype and creating a prototype using a prototype Constructor

// 1. create a constructor: function Person () {}; Person. prototype. name = "Wu"; Person. prototype. age = 12; console. log (Person. prototype. constructor); // Person () // 2. literally CREATE function Person () {}; Person. prototype = {// constructor: Person, // point the constructor pointer to Person name: "wu", age: 12}; console. log (Person. prototype. constructor); // Object ()

Disadvantages of Prototype

Function Family () {}; Family. prototype = {size: 3, member: ["mother", "father"], show: function () {return this. size ;}}; // first check the prototype Data Sharing Problem var family1 = new Family (); console. log (family1); family1.size = 4; // although the Family. prototype has the size attribute. However, a size attribute is actually created in the family1 object. Console. log (family1.show (); // here, because family1 has the instance attribute size, according to the proximity principle, the output is 4 // family1.member = ["mother", "father ", "me"]; // an instance attribute family1.member is actually created here. push ("me"); // This is to modify the value of the reference property, that is, the prototype property, and the prototype property has the shared function var family2 = new Family (); console. log (family2.show (); // here, family2 does not have the size instance attribute, and only the prototype property console. log (family2.member); // The array is modified

Use the constructor + prototype chain mode

// Using the constructor + prototype combination mode can solve the problem of passing parameters of constructor and data privatization, but the encapsulation of function Family (member) {this. member = member;}; Family. prototype = {constructor: Family, size: 3, show: function () {return this. size ;}}; // use the dynamic prototype mode function Family (member) {this. member = member; if (typeof this. show! = "Function") {// avoid repeated instantiation. The method here cannot contain parentheses, or the console may fail. log ("***"); // Family. prototype = {// The literal type cannot be used. // constructor: Family, // size: 3, // show: function () {// return this. size; //}; Family. prototype. show = function () {return this. member ;}}; var family1 = new Family (["father", "mother"]); console. log (family1); console. log (family1.show (); var family2 = new Family (["father", "mother", "me"]); console. log (family2.show ());

Use parasitic Constructor

// Use a parasitic constructor. That is, the constructor + factory mode // each time the constructor is instantiated, a new Obj is created, and the Object property is privatized. function Family (member) {var obj = new Object (); obj. member = member; obj. show = function () {return this. member;}; return obj;} var family1 = new Family (["father", "mother"]); family1.member. push ("sister"); var family2 = new Family (["father", "mother", "me"]); console. log (family1.show (); console. log (family2.show ());

3. Basic inheritance

// Basically inherit function Man () {}; // subtype function Person () {// super type this. age = 2 ;}; Man. prototype = new Person (); // use the prototype chain to inherit var man = new Man (); console. log (man. age );

Object impersonating inheritance

// Use an object to impersonate and inherit the function Person (age) {// in general, the data to be shared is put in the prototype, and the data to be private is put in the constructor. this. age = age ;}; Person. prototype. func = function () {return this. age; // This method cannot be accessed by impersonating an object}; var person = new Person (3); function Man (age) {Person. call (this, age); // use the call function. The call function uses the Person method as an instance method of Person. That is, the context object of the Person is changed to Man}; // However, only instance attributes and methods can be inherited by impersonating objects, the property and method var man = new Man (3) in the prototype cannot be inherited; console. log (man. age );

Object impersonating + prototype chain

// The object impersonate + prototype chain method is used to solve the problem that the object impersonate cannot inherit the prototype data and methods. // The object impersonate can inherit the instance methods and attributes, the prototype chain can inherit the prototype method and attribute function Person (age) {this. age = age ;}; Person. prototype. func = function () {return this. age ;}; function Man (age) {Person. call (this, age) ;}; Man. prototype = new Person (); // added the prototype chain var person = new Person (3); var man = new Man (3); console. log (man. func (); // use the prototype to inherit function obj (o) {function F () {}; F. prototype = o; return new F () ;}; var person = {age: 2, member: ["father"]}; var man = obj (person); man. member. push ("mother"); // here the value of the reference type is changed, that is, the member in person is changed, and data sharing var woman = obj (person) can be realized ); console. log (woman. member );

Prototype Combination Mode

// This occurs when prototype chain and composite mode are used: Person is required for object impersonating. call (this); then Man. prototype = new Person (); // The supertype is called twice. To solve this problem, you can use a transit function to copy the prototype attributes of the super-type to the subtype. The instance attributes and Methods inherit function obj (o) through object impersonating) {// intermediate function F () {}; F. prototype = o; return new F () ;}; function create (father, son) {// factory mode var f = obj (father. prototype); f. constructor = son; // constructor is an attribute of the prototype. After copying the prototype and subtype, you should modify its constructor to point to son. prototype = f ;}; function Person (age) {// super type this. age = age ;}; Person. prototype. show = function () {return this. age ;}; function Man (age) {// subtype Person. call (this, age) ;}; create (Person, Man); var man = new Man (4); console. log (man. show ());