“Prototype Chains and Inheritance, Use of Basic Packaging Types” in JavaScrip Starter Guide (Note 4)

1. Inheritance ⅱ

• Hybrid inheritance
• Original type inheritance
• Prototype chain inheritance
• Inherit from the constructor
• Combination of inheritance

1.1- Implementation of prototype chain inheritance

Implementation principle: the prototype object of the subclass points to the instance object of the parent class.

Prototype = new prototype ()

function Person(name,age) { this.name = name; this.age = age; } Person.prototype.getInfo = function () { console.log("name:",this.name,"age:",this.age); } function Student(score) { this.score = score; } student. prototype = new Person(" prototype ",10); / / father constructor and set the value of the name and age Student. The prototype. GetScore = function () {the console. The log (" points: "+ this. Score). } var p1 = new Student(100); Var p2 = new Student(12); var p2 = new Student(12); console.log(p1); console.log(p2);Copy the code

Problem: There is a data sharing problem, unable to pass arguments to the superclass constructor

1.2- Implementation of constructor inheritance

1.2.1- Basic use of the call and apply methods

Definition: a method that lends a method to an object. Call and apply have the same function, but they are written differently.

Use the syntax of the call method:

Loaned object. method. call(loaned object)Copy the code

Use the syntax of the apply method:

Loaned object. method. apply(loaned object)Copy the code

Feature: You can set the reference to this in a method — this in a method points to a borrowed object

var obj1 = { name:"Neld", age:10, showInfo:function () { console.log("name:"+this.name,"age:"+this.age); } } var obj2 = { name:"Lily", age:12 } obj1.showInfo(); //name:Neld age:10 obj2.showInfo(); //obj2.showInfo is not a function obj1.showInfo.call(obj2); //name:Lily age:12 // obj1.showInfo.apply(obj2); //name:Lily age:12Copy the code

The difference between call and apply is:

// The call parameter is passed, followed by the loaned object, separated by a comma. Call (borrow object, parameter 1, parameter 2...) // Use a comma to separate the loaned objects. // Use a comma to separate the loaned objects. Apply (borrow object,[parameter 1, parameter 2...]) )Copy the code

Requirement: To add the add method to obj1, you need to pass in two parameters to complete the addition operation. You then lend that method to obj2, pass obj2 as an argument, and do the addition

var obj1 = { name:"Neld", age:10, add : function (a, b) { return a + b; }} var obj2 = {name:"Lily", age:12} // Use the CAL method obj1.add.call(obj2, 100, 200); // use the apply method //console.log(obj1.add.apply(obj2, 1, 2)); //CreateListFromArrayLike called on non-object obj1.add.apply(obj2, [100, 200]);Copy the code

1.2.2 Borrowing constructor inheritance description

Implementation principle: in the child constructor to call the parent constructor, to inherit and pass parameters to the parent constructor.

Implementation method:

0. Sets the parent object’s constructor to a member of the child object
1. Calling this method is similar to copying code from the parent constructor into the child constructor for execution
2. Delete it when you’re done

function Person(name,age) { this.name = name; this.age = age; } Person.prototype.getInfo = function () { console.log("name:",this.name,"age:",this.age); } function Student(name,age,score) { this.newMethod = Person; //1. Set the constructor of the parent object to a member of the child object this.newMethod(name, age); //2. Call this method, similar to copying code from the parent constructor into the child constructor to execute this.score = score; delete this.newMethod; Available / / 3. Delete} after Student. The prototype. GetScore = function () {the console. The log (" points: "+ this. Score). } var p1 = new Student("Neld", 10 ,100); var p2 = new Student("Lily", 12 ,80); console.log(p1); console.log(p2);Copy the code

Advanced implementation methods: Whenever you want to borrow a method, first think of using call or apply

function Student(name,age,score) {
    //Person.call(this,name,age);
    Person.apply(this,[name,age]);
    this.score = score;
}
Copy the code

Both methods of inheritance have the following two problems:

0. If the parent and child constructors have the same members, then the child constructor overrides the members in the parent constructor
1. Members of the prototype chain cannot be inherited

1.3- The basic structure of composite inheritance

Implementation principle: base prototype chain inheritance + borrowing constructor inheritance

function Student(name,age,score) { //Person.call(this,name,age); Person.apply(this,[name,age]); // This. Score = score; } Student.prototype = new Person(); / / inheritance on the prototype chain members of the Student. The prototype. The constructor = StudentCopy the code

Conclusion: ECMAScript implements inheritance in more than one way. This is because inheritance mechanisms in JavaScript are not explicitly defined, but are implemented by imitation. This means that all inheritance details are not entirely handled by the interpreter. As the developer, you have the right to decide which inheritance is most appropriate.

2. Draw a complete prototype chain structure diagram

This section focuses on the prototype chain structure of function objects. The complete structure diagram is as follows:

Conclusion:

• All Function objects are of type Function and are created by the Function constructor
• The prototype object for Function is an anonymous, empty Function that binds the generic method in the Function
• An empty function Object is of type Object
• The Function object is created by its own constructor

Third, the use of basic packaging types

3.1- Creation of basic wrapper types

ECMAScript provides three special reference types — the basic wrapper types (String, number, Boolean).

Creation method:

Var str1 = new String("string1"); var num1 = new Number(123); var bool1 = new Boolean(true); console.log(str1); console.log(num1); console.log(bool1); Var str2 = new Object("string2"); var num2 = new Object(456); var bool2 = new Object(false); console.log(str2); console.log(num2); console.log(bool2);Copy the code

Comparison of basic types and basic packaging types

var str1 = "test"; var str2 = new String("test"); var str3 = "test2"; var str4 = new String("test"); console.log(str1 == str2); / / (1) the console. The log (str1 = = str3); / / (2) the console. The log (str2 = = str4); / / (3) the console. The log (str1 = = = str2); / / (4) the console. The log (str1 = = = str3); / / (5) the console. The log (str2 = = = str4); / / 6.Copy the code

By default, the toString method of the wrapper type is called to compare the results of the conversion

Str1 == str2.toString(), so the results are equal and return true

2: comparison of two basic types with different values; return false

③ : The two packet forwarding types are compared with the address. If the address is different, return false

(4) : === compares the type and value, in this case, the type is different, returns false

⑤ : if the values are different, return false

⑥ : Return false if the type is the same but the address is different

The other two types are discussed in the same way as string types, but I won’t list them here.

3.2- Points to note when using basic packaging types

Look at the following code to see what the problem is:

var str = "test"; console.log(str.length); //4 console.log(str.substr(0, 2)); //teCopy the code

The above code looks simple, but there is a very basic problem:

STR is a basic type, there is no such thing as properties and methods, but the following two lines of code are accessing properties and methods, and the code still executes correctly. How is this possible?

In fact, in order for us to achieve this intuitive operation, the background has automatically completed the following operations:

• Create an instance of type String;
• Calls the specified method on the instance;
• Destroy this instance;

var str = "test"; var obj = new String(str); console.log(obj.length); console.log(obj.substr(0, 2)); obj = null; // Destroy obj after useCopy the code

After this processing, the basic string value becomes like an object. Furthermore, the three steps above also apply to Boolean and numeric values corresponding to types Boolean and Number, respectively

3.3-number Type extension note

There are a few other points to note when using the Number wrapper type.

Number.prototype.add = function (num) { return this + num; } var num = 100; var ret = num.add(100); / / (1) the console. The log (ret); / / 200Copy the code

During program execution, num refers directly to a Number object, so the add method in Number can be accessed directly. Can we use the Number corresponding to num to access the add method? So 100.add(100);

This is not acceptable in JS syntax for such code. But it can be modified a little, we just use () to enclose the numbers:

console.log((100).add(100)); / / 200Copy the code