One, foreword
2020 is a special year for people working from home because of the pandemic. With a dream, I came to Beijing from Tianjin and started my first job-hopping in my life.
In the interview process, was frequently the prototype related knowledge to be asked, each answer is faltered. Later, there was a company that was very interested in the company. In the second interview, as expected, I asked about the prototype again!
I made up my mind to use two days to delve into the next prototype, find out after the world is bright, so simple ~
Some understanding is still relatively shallow, with the passage of time and in-depth understanding, will be added in the future. If you find any problems with my understanding, please comment in the comments. Without further ado, cut to the chase.
Constructor
We can’t talk about prototypes without constructors, so let’s look at constructors first.
2.1 Constructors are divided into instance members and static members
Let’s see what they look like first.
Instance member: An instance member is the member added by this inside the constructor. Instance members are accessible only through the instantiated object.
Static member: A member added to the constructor itself that can only be accessed through the constructor
functionStar(name,age) {this.name = name; this.age = age; } // Static member star.sex ='woman';
let stars = new Star('little red', 18); console.log(stars); // Star {name:"Little red", age: 18} console.log(stars.sex); Console. log(star.name); //Star cannot directly access the instance member console.log(star.sex) through the constructor; // Female can access static members directly through the constructorCopy the code2.2 Creating objects using constructors
This process is also known as instantiation
2.2.1 How to create an object using a constructor?
function Father(name) {
this.name = name;
}
let son = new Father('Lisa');
console.log(son); //Father {name: "Lisa"}
Copy the codeIn this case, son is a new object.
2.2.2 What happens during the process of creating a new object?
(1) create an empty object son {} (2) prepare a prototype link for son.__proto__ = father.prototype (3) rebind this, Call (this) (4) assign the new object property son.name (5) return this return this, and the new object has the constructor methods and properties
2.2.3 Are methods shared for each instance?
Depending on how we define the method, there are two cases.
Method 1: Define methods directly on constructors (not shared)
function Star() {
this.sing = function () {
console.log('I love to sing'); }}let stu1 = new Star();
letstu2 = new Star(); stu1.sing(); // I love to sing stu2.sing(); Console. log(stu1.sing === stu2.sing); //false
Copy the codeObviously stu1 and stu2 don’t point to the same place. So we create an instance by adding this method to the constructor. Each time we create an instance, we create a new memory space for the method. This leads to a huge waste of memory, which affects performance.
Method 2: Adding methods through prototypes (sharing)
The function that the constructor allocates through the prototype is shared by all objects.
function Star(name) {
this.name = name;
}
Star.prototype.sing = function () {
console.log('I love to sing', this.name);
};
let stu1 = new Star('little red');
let stu2 = new Star('little blue'); stu1.sing(); // I love singing little red stu2.sing(); Log (stu1.sing === stu2.sing); //true
Copy the code2.2.4 If the instance properties are of basic type, are they shared?
Properties are stored if they are stored as basic types, there is no sharing problem, whether they are the same depends on the value content.
let stu1 = new Star('little red');
let stu2 = new Star('little red'); console.log(stu1.name === stu2.name); //true
let stu1 = new Star('little red');
let stu2 = new Star('little blue'); console.log(stu1.name === stu2.name); //false
Copy the code2.2.5 Rules for defining constructors
Public properties are defined in constructors, and public methods are put on prototype objects.
Third, the prototype
We mentioned stereotypes earlier when we instantiated and when we shared the instance method. So what is this mysterious archetype?
3.1 What is a prototype?
Father.prototype is a prototype. It’s an object, and we call it a prototype.
3.2 What is the role of prototypes?
The purpose of archetypes is to share methods. We use father.prototype. method to share methods without creating space for storing methods.
3.3 What does this point to in the prototype?
The reference to this in the prototype is the instance.
Iv. Prototype chain
4.1 What is a prototype chain?
The process of linking prototypes to each other is called a prototype chain.
4.2 Prototype chain application
An object can use the properties and methods of its prototype constructor because every object has a __proto__ prototype
function Star(name,age) {
this.name = name;
this.age = age;
}
Star.prototype.dance = function(){
console.log('I'm dancing',this.name);
};
let obj = new Star('cacy', 18); console.log(obj.__proto__ === Star.prototype); //true
Copy the code4.3 Prototype chain diagram
4.4 Prototype search method
For example, find the dance method of obj
functionStar(name) { this.name = name; (1) First see if object obj has a dance method. If so, then execute the object's method this.dance =function () {
console.log(this.name + '1'); }} (2) If there is no "dance" method, look for the "dance" method on the "prototype" constructor. Star.prototype.dance =function () {
console.log(this.name + '2'); }; (3) If there is no such thing as a "dance" method, look for the "dance" method on the "prototype" Object. Object.prototype.dance =function () {
console.log(this.name + '3'); }; (4) If there is no more, an error will be reported.let obj = new Star('little red');
obj.dance();
Copy the code(1) First see if object obj has a dance method, if so, then execute the method on the object.
(2) If dance is not available, look for the method on the prototype constructor.
(3) If there is no such thing as a “dance” method, look for the “dance” method on the “prototype” Object.
(4) If there is no more, an error will be reported.
4.5 The constructor for the prototype
The constructor of the prototype points to the constructor.
function Star(name) {
this.name = name;
}
let obj = new Star('little red'); console.log(Star.prototype.constructor === Star); //true
console.log(obj.__proto__.constructor === Star); //true
Copy the code4.5.1 How to add methods to a prototype
This method adds a method directly to a prototype object that has a constructor that points to the constructor itself
function Star(name) {
this.name = name;
}
Star.prototype.dance = function () {
console.log(this.name);
};
let obj = new Star('little red'); console.log(obj.__proto__); //{dance: logon, constructor: logon} console.log(object.__proto__. Constructor); // StarCopy the codeMethod 2: Star.prototype = {} If the constructor is missing, we need to manually define the constructor, referring back to the constructor itself
function Star(name) {
this.name = name;
}
Star.prototype = {
dance: function() { console.log(this.name); }};let obj = new Star('little red'); console.log(obj.__proto__); / / {dance: ƒ} the console log (obj) __proto__) constructor); / / ƒObject() { [native code] }
Star.prototype.constructor = Star;
Copy the code4.5.2 Direct changes to the prototype are generally not allowedprototypePoint to the
If you change the stereotype pointing, the native methods will disappear, so built-in methods like Array and String are not allowed to change the stereotype pointing. If it changes, it will report an error.
Array.prototype.getSum = function (arr) {
let sum = 0;
for (let i = 0; i < this.length; ++i) {
sum += this[i];
}
return sum;
};
letarr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; console.log(arr.getSum()); / / 45Copy the codeIf prototype is changed, an error will be reported.
Array.prototype = {
getSum: function (arr) {
let sum = 0;
for (let i = 0; i < this.length; ++i) {
sum += this[i];
}
returnsum; }};letarr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; console.log(arr.getSum()); / / 45Copy the code
Inheritance-es5 methods
ES6 didn’t previously give us extends inheritance, and we can implement it through constructor + prototype object emulation.
Inheritance property, using call to change this point. However, this method can only inherit properties; instances cannot use methods of the parent class.
function Father(name) {
this.name = name;
}
Father.prototype.dance = function () {
console.log('I am dancing');
};
function Son(name, age) {
Father.call(this, name);
this.age = age;
}
let son = new Son('little red', 100); son.dance(); / / an errorCopy the codeHow do I inherit methods from my parent class?
Prototype = Father. Prototype = Father. Prototype = Father.
function Father(name) {
this.name = name;
}
Father.prototype.dance = function () {
console.log('I am dancing');
};
functionSon(name, age) { Father.call(this, name); this.age = age; } Son.prototype = Father.prototype; // Add method son.prototype. sing = to subclassfunction () {
console.log('I am singing');
};
let son = new Son('little red', 100); Console. log(father.prototype) //{dance: ƒ, sing: ƒ, constructor: ƒ}Copy the codeSolution 2: The prototype of a child class points to an instance of the parent class, so that the methods of the parent class can be shared along the chain of prototypes. And adding a prototype method to a subclass does not affect the superclass.
function Father(name) {
this.name = name;
}
Father.prototype.dance = function () {
console.log('I am dancing');
};
function Son(name, age) {
Father.call(this, name);
this.age = age;
}
Son.prototype = new Father();
Son.prototype.sing = function () {
console.log('I am singing');
};
let son = new Son('little red', 100); Log (father.prototype) //{dance: ƒ, constructor: ƒ}Copy the code
Seven, classes,
What is a class?
The essence of a class is still a function. A class is just another way of writing a constructor.
function Star(){}
console.log(typeof Star); //function
class Star {}
console.log(typeof Star); //function
Copy the codeThere is no variable promotion for classes in ES6
An instance is created by the constructor, which is variable promoted. Classes in ES6 must have classes before they can be instantiated.
All methods of a class are defined on the prototype property of the class
Let’s put it to the test.
class Father{
constructor(name){
this.name = name;
}
sing() {returnthis.name; }}let red = new Father('little red');
let green = new Father('the little green');
console.log(red.sing === green.sing); //true
Copy the codeAdd methods to the class
Append methods to the prototype using object.assign.
class Father{
constructor(name){
this.name = name;
}
sing() {returnthis.name; }} // Append the method object.assign (father.prototype,{dance() {return 'I love to dance'; }});let red = new Father('little red');
let green = new Father('the little green'); console.log(red.dance()); Console. log(red.dance === green.dance); //true
Copy the codeThe constructor method
The constructor method is the default method of the class and is automatically called when an object instance is generated with the new command. A class must have a constructor method. If it is not explicitly defined, an empty constructor method will be added by default.
Inheritance-es6 methods
class Father {
constructor(name){
this.name = name;
}
dance() {return 'I'm dancing';
}
}
class Son extends Father{
constructor(name,score){
super(name);
this.score = score;
}
sing() {return this.name +', '+this.dance(); }}let obj = new Son('little red', 100);Copy the codeThe difference between classes and constructors
(1) The class must be called with new, otherwise an error will be reported. This is a major difference from normal constructors, which can be executed without new.
(2) All instances of a class share a prototype object.
(3) Inside the class, the default is strict mode, so there is no need to use use strict to specify the running mode.
Ten,
Constructor features:
1. The constructor has a prototype.
The constructor object in prototype refers to the constructor itself.
3. Constructors can add methods from prototype objects.
4. The constructor creates an instance object with a __proto__ prototype that points to the constructor’s prototype object.
Class:
1. Class or function
2. All methods of the class are defined on the prototype property of the class
Class creates an instance that also has __proto__ pointing to the class’s prototype object
4. The new class writing method just makes the object prototype writing more clear, more like the syntax of object-oriented programming.
5. The ES6 category is grammar sugar.
What is Grammar sugar
What is grammatical sugar? The function of the code after adding sugar is the same as that before adding sugar, and the sugar achieves runtime equivalence without changing the syntactic structure of its location.
Syntax sugar doesn’t change language functionality, but it increases readability for programmers.
12. Share interview questions
The interview questions 1
Object.prototype.__proto__ //null
Function.prototype.__proto__ //Object.prototype
Object.__proto__ //Function.prototype
Copy the codeHere is the prototype of the Function, attached a picture, which is sent to me by an interviewer, I do not know where the original author is ~
The interview questions 2
I would like to share with you the interview question that I was stuck on. I hope you can review it after you have learned the knowledge.
Implement the Person and Student objects as follows: a)Student inherits from Person and b)Person contains an instance variable named that contains a methodprintName c)Student contains an instance variable score that contains an instance methodprintScore d) All Person and Student objects share a methodCopy the codeEs6 class writing
class Person {
constructor(name) {
this.name = name;
}
printName() {
console.log('This is printName');
}
commonMethods(){
console.log('I am the sharing method');
}
}
class Student extends Person {
constructor(name, score) {
super(name);
this.score = score;
}
printScore() {
console.log('This is printScore'); }}let stu = new Student('little red');
let person = new Person('the little purple'); console.log(stu.commonMethods===person.commonMethods); //true
Copy the codeNative writing
function Person (name){
this.name = name;
this.printName=function() {
console.log('This is printName');
};
}
Person.prototype.commonMethods=function(){
console.log('I am the sharing method');
};
function Student(name, score) {
Person.call(this,name);
this.score = score;
this.printScore=function() {
console.log('This is printScore');
}
}
Student.prototype = new Person();
let person = new Person('the little purple', 80);let stu = new Student('little red', 100); console.log(stu.printName===person.printName); //falseconsole.log(stu.commonMethods===person.commonMethods); //true
Copy the code