The cause of
After inputting a lot of JavaScript system knowledge from good personal blog posts, classic books, and reputable lecturers, I got a little confused. Underscore () I can write Underscore () fluently. I also know what closures are, what iterators are, what generators are… . But the problem arises when I try to incorporate a core JavaScript concept like closures… Introducing yourself to your classmates, explaining yourself, and talking to interviewers. I thought I could blurt out the language, but to the lips seem hesitant. Can only use a fragment of words, or pieced together knowledge points to express to each other. It definitely made me feel like I’d spent a lot of time but never had JavaScript.
purpose
So the problem that this series is trying to solve is that WHEN someone asks or examines my core JavaScript concepts, I can express them as smoothly and clearly as possible.
expect
I hope the nuggets’ good front end technicians and seniors can supplement this article, review it and ask me questions in their busy schedule. I look forward to solving my current problems through this series.
What do you think of the prototype
Answer your understanding of the prototype
First of all, I would like to talk with the interviewer about my understanding of prototype. JavaScript is a prototype-based language, and prototype is similar to the class in classical object-oriented language. We can use JavaScript prototype to enable us to code with a style of object-oriented and inheritance technology. But unlike traditional object-oriented languages, when JavaScript inherits and instantiates through prototypes, it does not copy the behavior of a class to an instance or subclass, as traditional object-oriented languages do. Instead, it associates multiple objects.
Answer the prototype’s implementation in JavaScript
Secondly, I would like to talk to the interviewer about the implementation of prototype in JavaScript. All functions in JavaScript have a prototype attribute when initialized, which points to the prototype of the instance object created by calling the constructor. The advantage of using prototype object is that we can pre-define the attributes. Methods. These properties and methods are shared by instance objects.
Object Layout in JavaScript
Finally, I would like to talk with the interviewer about an Object Layout on gitHub. This diagram clearly shows the prototype design of the JavaScript language.
In this figure, we can conduct a comprehensive combing according to the two lines of explicit prototype and implicit prototype.
The explicit prototype route is: Both the basic type constructors (Number, String, BigInt, Boolean, Symbol) and the reference type constructors (Array, Date, Function, RegExp, except Object), as well as other custom constructors, obey:
Constructor. Prototype.__proto__Is equal to theObject.prototypeObject.prototype.__proto__Equals the top-level prototypenull。
// Basic type constructor
console.log(Number.prototype.__proto__ == Object.prototype);
console.log(String.prototype.__proto__ == Object.prototype);
console.log(BigInt.prototype.__proto__ == Object.prototype);
console.log(Boolean.prototype.__proto__ == Object.prototype);
console.log(Symbol.prototype.__proto__ == Object.prototype);
// Reference type constructor
console.log(Function.prototype.__proto__ == Object.prototype);
console.log(Array.prototype.__proto__ == Object.prototype);
console.log(Date.prototype.__proto__ == Object.prototype);
console.log(RegExp.prototype.__proto__ == Object.prototype);
// Custom constructor
console.log(Person.prototype.__proto__ == Object.prototype, "Custom");
// All true
// Top-level prototype null
console.log(Object.prototype.__proto__);
// null
Copy the codeThe implicit prototype route is: Whether it is the primitive type constructor (Number, String, BigInt, Boolean, Symbol), or the reference type constructor (Array, Date, Function, RegExp, including Object), or any other custom constructor, Comply with:
Constructor.__proto__ = function.prototype__proto__ = object.prototype
// Basic type constructor
console.dir(Number.__proto__.__proto__ === Object.prototype);
console.dir(String.__proto__.__proto__ === Object.prototype);
console.dir(BigInt.__proto__.__proto__ === Object.prototype);
console.dir(Boolean.__proto__.__proto__ === Object.prototype);
console.dir(Symbol.__proto__.__proto__ === Object.prototype);
// Reference type constructor
console.dir(Array.__proto__.__proto__ === Object.prototype);
console.dir(Date.__proto__.__proto__ === Object.prototype);
console.dir(RegExp.__proto__.__proto__ === Object.prototype);
console.dir(Function.__proto__.__proto__ === Object.prototype);
// Custom constructor
console.dir(Function.__proto__.__proto__ === ObjectThe prototype,"Custom");
// Basic type constructor
console.dir(Number.__proto__ === Function.prototype);
console.dir(String.__proto__ === Function.prototype);
console.dir(BigInt.__proto__ === Function.prototype);
console.dir(Boolean.__proto__ === Function.prototype);
console.dir(Symbol.__proto__ === Function.prototype);
// Reference type constructor
console.dir(Array.__proto__ === Function.prototype);
console.dir(Date.__proto__ === Function.prototype);
console.dir(RegExp.__proto__ === Function.prototype);
console.dir(Function.__proto__ === Function.prototype);
console.log(Object.__proto__.__proto__ === Object.prototype);
// Custom constructor
console.log(Person.__proto__ == Function.prototype, "Custom");
// 全部都是true
Copy the codePractice your skills
With the above foundation, do the following topic as simple as cutting vegetables!
Object.prototype.name = "object";
Function.prototype.name = "function";
function Person() {}
const p = new Person();
console.log(Person.name);
console.log(p.name);
console.log(p.__proto__.__proto__.constructor.constructor.constructor.constructor.constructor);
// function
// object
// Function constructor
Copy the codeHow do you understand the prototype chain
The link of the associated prototype objects is called a prototype chain, and when we read instance properties or methods, we do a [[prototype]] lookup — delegate lookup along the prototype chain until we reach the top level.
Other prototype knowledge – Rewriting prototype objects
- If we need to define many properties and methods on the prototype object, we can rewrite the prototype object.
- When rewriting, note that the constructor of the prototype object has been lost, and we need to redefine the constructor property with non-traversal characteristics.
const foo.prototype = {
name: 'CIc'.age: 18.eating() {},
drinking(){}}Object.defineProperty(foo.prototype, 'constructor', {
enumerable: false.value: foo,
writable: true.configurable: true;
})
Copy the codeOther prototype knowledge – methods for detecting prototypes
in
Determines whether the property is on an object or a stereotype of an object.
var obj = {
name: "why".age: 18};var info = Object.create(obj, {
address: {
value: "Beijing".enumerable: true,}});The in operator: returns true in both the current object and the prototype
console.log("address" in info);
console.log("name" in info);
Copy the codehasOwnProperty
Determine if an object has its own attributes (not on the prototype chain).
var obj = {
name: "why".age: 18};var info = Object.create(obj, {
address: {
value: "Beijing".enumerable: true,}});// hasOwnProperty method
console.log(info.hasOwnProperty("address")); // true
console.log(info.hasOwnProperty("name")); // false
Copy the codeinstanceof
The prototype object used to detect whether the constructor’s prototype object appears on the prototype chain of the instance object.
function Person() {}
function Student() {}
var stu = new Student();
inheritPrototype(Student, Person);
console.log(stu instanceof Student); // true
console.log(stu instanceof Person); // true
console.log(stu instanceof Object); // true
Copy the codeconstructor
Used to check whether the instance object belongs to a constructor.
function Person() {}
const p1 = new Person();
console.log(p1.constructor === Person); // true
Copy the codereference
- GitHub god map – Hursh Jain/mollypages.org
- JavaScript You Don’t Know
- JavaScript Ninja Secrets