Prototype relationship between constructor and instance (1)

Constructors （Constructor） Pattern

When we want to define a common function to assign attributes , It can be done in the form of encapsulation , This is the form of the definition method we often use , But the methods are separate , There's no connection ; and Constructors What we're talking about is generating instances from prototype objects , Establish the connection between prototypes ;

The use of constructors ： Analogous to ordinary functions , But for internal use this Variable ; Use new Operator , Build instance , also this Is bound to the object of the instance

//  Write a Student Example 
function Student(name, age){
    
　　　　this.name = name;
　　　　this.age = age;
}
//  Use new Keyword to generate an instance of the object 
const student1 = new Student('wendy', 20);
const student2 = new Student('kim', 22);
alert(student1.name); // wendy
alert(student1.age); // 20

And the instance object here student1 And student2 There is one. constructor attribute , This attribute points to Constructors ; The connection with the prototype object

console.log(student1.constructor == Student); // true
console.log(student2.constructor == Student); // true

Disadvantages of the constructor pattern ： There is a waste of memory

function Student(name, age) {
    
　　　　this.name = name;
　　　　this.age = age;
　　　　this.behavior = 'learn';
}

there behavior( Behavior ) All are learn, When we new When generating multiple instances ：behavior It will be generated repeatedly , Occupy more memory once ;

const student1 = new Student('wendy', 20);
const student2 = new Student('kim', 22);
console.log(student1.behavior); // learn
console.log(student2.behavior); // learn

The solution is ：prototype The pattern of ;

Each constructor must have one prototype Properties of , Point to another single object address , All properties and methods of this object will be inherited by the instance of this constructor ！ This means that we can write those invariant properties and methods in prototype On the object of ;
notes ：student1 And student2 Example of behavior Is the agreed address , Point to prototype object , Reduce the memory usage

Student.prototype.behavior = 'lear';
console.log(student1.behavior); // lear
console.log(student2.behavior); // lear

Detection of relationships between attributes ：

1.isPrototypeOf

effect ： Detect whether an object is a prototype of another object . Or whether one object is contained in another object's prototype chain ; The return is a Boolean value (Boolean)

var myObject = {
     x: 1 }; //  Define a prototype object 
var newMyObject = Object.create(myObject); //  Use this prototype to create an object 
myObject.isPrototypeOf(newMyObject); // => true：newMyObject Inherit myObject
Object.prototype.isPrototypeOf(myObject); // => true myObject Inherited from Object.prototype

As above Student Construction instance of ：

console.log(Student.prototype.isPrototypeOf(student1)); //true
console.log(Student.prototype.isPrototypeOf(student2)); //true

2. instanceof

instanceof： If the object on the left (function Student(name, age){} Constructors ) Is an instance of the right class (new Student()), The expression returns true, Otherwise return to false.

var d = new Date();
d instanceof Date;//=>true d yes Date Example 
d instanceof Object;//=>true  All objects are Object Example 

instanceof The judgment will also include the detection of the parent class , In fact, the inheritance relationship of the object is detected .
notes ： All objects are Object Example

var list = [1, 2, 3];
list instanceof Array; // => true list yes Array Example 
list instanceof Object; // => true  All objects are Object Example 

3. hasOwnProperty

Instance objects have hasOwnProperty() Method , It is used to judge whether the property is a local property and return true, If it is an inherited property, it returns false;

console.log(student1.hasOwnProperty("name")); // true
console.log(student1.hasOwnProperty("behavior")); // false

4.in Operator

in Operator is used to determine ： Whether the instance contains a property , Whether it is a local attribute or an inherited attribute .

console.log("name" in student1); // true
console.log("behavior" in student1); // true

The best way to determine the type of object ：tostring()

console.log(Object.prototype.toString.call(obj) === "[object Object]");

Click to view references ： The classic way to detect data types

Define a method for detecting data types ：

const isType = (target,type) => {
    
	if(typeof target !== 'object') return false
	const typeString = Object.prototype.toString.call(target)
	return `[object ${
      type}]` === typeString
}
 console.log(isType([], 'Array'));	// true