“Prototype, Prototype Chain” in JavaScrip Starter Guide (Note 3)

6. Learning archetypal-related attributes

6.1 in the keyword

Definition: to check the presence of a specified property in an object (regardless of instance properties and stereotype properties),

Syntax: “property name” in instance object

Usage: return true whether the member is a member of the current instance object or its prototype object, or false if neither exists.

6.2 hasOwnProperty properties

Definition: prototype members of Object, methods that are accessible to all instance objects,

Syntax: instance object. hasOwnProperty(” property name “)

Use: only determine whether the current instance object has an instance property. If so, return true; otherwise, return false.

function Person(name, age) { this.name = name; this.age = age; } Person.prototype = { constructor:Person, study:function () { console.log(this.name,this.age); }, say:function () { console.log(this.name," say hello"); } } var p = new Person("zs",10); console.log("name" in p); //true console.log("study" in p); //true console.log("name222" in p); //false console.log(p.hasOwnProperty("name")); //true console.log(p.hasOwnProperty("study")); //false console.log(p.hasOwnProperty("name222")); //falseCopy the code

With the above instructions, it should be easy to complete the following two requirements.

Requirement 1: Check whether a specified property exists in the object (this property exists only on the instance object)

hasOwnProperty

Requirement 2: Check whether a specified property exists in the object (this property only exists on the stereotype object)

key in obj && ! obj.hasOwnProperty(key)

6.3 isPrototypeOf properties

Definition: a stereotype member of Object that determines whether an Object is a stereotype of a specified Object

Syntax: prototype object. isPrototypeOf

Usage: Anderson sPrototypeOf (B) judgment is whether the object exists in B the prototype chain of object

6.4 instanceof keywords

Definition: specifies whether the current object is of the specified type. Specifies whether the type is on the prototype chain of the current instance object. Return true if yes, false if no.

Syntax: the instance object instanceof constructor

A) instanceof B) prototype

function Person(name,age) { this.name=name; this.age=age; } Person.prototype.say=function () { console.log(this.name," say hello"); } var p=new Person('lily',13) console.log(p instanceof Person); //true console.log(p instanceof Object); //true console.log(Object.prototype.isPrototypeOf(p)); //trueCopy the code

Seven, object-oriented three features

7.1 packaging

Definition: Use objects to encapsulate variables and functions

Functions: Reuse and information hiding

Best solution: Encapsulation is the encapsulation of objective objects into abstract classes, and classes can only manipulate their data and methods by trusted classes or objects, while hiding information from untrusted classes or objects.

7.2 – inheritance

Definition: a way for a class to obtain attributes and methods from another class. Function: Code reuse. Inheritance is the ability to take all the functionality of an already created class and extend it without having to rewrite the original class.

• A new class created through inheritance is called a “subclass” or “derived class.”
• A class that is inherited is called a “base class,” “parent class,” or “superclass.”
• The process of inheritance is the process from the general to the special.

7.3 polymorphism

Definition: the same operation that acts on different objects can have different behavior: extensible: Polymorphism is based on inheritance. Polymorphism refers to that different subclasses overwrite the methods of the parent class after inheriting the parent class, that is, the same method of the parent class shows different forms in the subclasses. Js is inherently polymorphic (a weakly typed language)

Inheriting ⅰ

JS itself does not have inheritance syntax, only through the method simulation inheritance syntax, so there are a variety of ways to achieve inheritance effect. Purpose of inheritance: copies members from the parent class into the subclass object through the corresponding code

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

8.1- Implementation of blended inheritance

Implementation principle: copy the member of the parent class into the child object (shallow copy).

For… The in… [key]= parent class [key]

Disadvantages: shared data security issues, changing the subclass, will affect the parent class, reference data type shallow copy, will change the reference address

Var obj1 = {name:"zs",age:10}; var obj1 = {name:"zs",age:10}; var obj2 = {}; For (var key in obj1) {obj2[key] = obj1[key]; } console.log(obj1); console.log(obj2);Copy the code

Shared data security issues:

var obj1 = {name:"zs",age:10,car:{name:"mini"}}; var obj2 = {}; For (var key in obj1) {obj2[key] = obj1[key]; } // Modify the car property of obj1 obj1.car-name = "bus"; console.log(obj1); //{name:"zs",age:10,car:{name:"bus"}} console.log(obj2); //{name:"zs",age:10,car:{name:"bus"}}Copy the code

When we need to change the reference type attribute in one of these objects, we will cause the other related objects to be changed, because everyone is referring to the same memory area.

8.2- Implementation of proto-type inheritance

How it works: Add a stereotype member from a parent class to the stereotype chain of a child class.

Prototype = superclass prototype

Disadvantages: data sharing security, can only inherit the parent class prototype object members, can not stepfather class instance object members

function Animal() { } Animal.prototype.name="animal"; Function Person() {} person. prototype= Animal. Prototype; Person.prototype.useTool = function () { console.log("use fire"); } var p = new Person(); console.log(p); var ani = new Animal(); console.log(ani);Copy the code

1. Originally, the Animal and Person objects had no relationship, so each could only access its own members

2. Now, if the Person object wants to inherit from the Animal object, all it needs to do is change the Person stereotype to the Animal stereotype
3. This method of inheritance is called the original type inheritance, implementation is more convenient, but as with the mixed inheritance, there is a problem of data sharing security.

Extend built-in objects

9.1- Prototype through built-in objects

Built-in objects are pre-defined objects in JS, in which a bunch of methods and properties have been encapsulated and can be used directly.

However, in actual development, these properties or methods may not meet our needs, so we need to make functional extensions to these built-in objects.

Requirement: Add a method to the array object to get the number of elements

var arr1 = [1, 2, 3];
var arr2 = ["A", "B", "C","D"];
arr1.getLength = function () {
    return this.length;
}
console.log(arr1.getLength());
Copy the code

Cons: You can only add a method to a single array. If requirements are upgraded and there are 100 arrays that need the method, this approach will not work

So this is not a good way to do it, because if you want to do this for 100 arrays, it’s going to be a little bit more complicated.

Based on the previous knowledge, we can extend the prototype members of the built-in objects to solve this problem.

var arr1 = [1, 2, 3]; var arr2 = ["A", "B", "C","D"]; Array.prototype.getLength = function () { return this.length; } console.log(arr1.getLength()); // 3 console.log(arr2.getLength()); / / 4Copy the code

We added the getLength() method directly to the Array prototype. All Array objects created later have this method, which solves the bulk addition problem. However, there are some problems with this approach:

This approach can solve our problem, but there is a problem:

0. In a multi-player environment, extending built-in objects in this way can have an impact on other developers
1. If too many members are added to the prototype object, the search efficiency of object members will be reduced.

9.2- Secure extension of built-in objects

The problem with the above method of extending the built-in object is that we are directly extending the prototype of the built-in object, thus affecting other developers who use the object.

So, the idea is to create a custom object that inherits from the built-in objects that need to be extended, and then extend the custom object.

Function MyArray() {} MyArray(); myarray.prototype = new Array(); MyArray.prototype.getLength=function () { return this.length; } var arr1 = new MyArray(); arr1.push("A","B","C","D","E"); // The built-in object's initial method console.log(arR1.getLength ()); // The extended methodCopy the code

Next, if we want to extend an Array, we only need to operate on MyArray. We do not need to operate on the Array directly, so there is no impact on other developers who use arrays. How to understand the picture?

Tenth, the prototype chain structure diagram supplement

Each instance object is created by the constructor

Each constructor has a default associated stereotype object

A prototype object is itself an object, so it has its own constructor

The constructor of a stereotype object also has a default associated stereotype object

This makes up a chain access structure called a prototype chain

Below is drawn the prototype chain of the Person and Array objects: