preface

To do a good job, he must sharpen his tools.

Hello everyone, I am dragon ha ha. A Java, JavaScript amphibian. In this article, the second in the FuckingJavaScript series, we review the prototype.

What is prototyping

Why does JavaScript have archetypes when other object-oriented languages don’t? With that in mind, let’s go to the history of JavaScript

History of JavaScript was born

My dad was the king of the first browser dynasty, Netscape.

That’s right, the Netscape of window.navigator.appname.

Netscape recruited Scheme expert Brendan Eich to embed Scheme in the browser

This explains why functions are the first citizens in JavaScript.

Netscape browsers supported Java programs before Javascript was born, so the goal was to create a language similar to But simpler than Java.

This is where the name Java+Script came from, and it has some roots in Java

Design time

From start to finish, it only took ten days.

Design ideas

  • referenceCBasic syntax of
  • referenceJavaData types and memory management
  • referenceScheme, and promote the function toFirst-class citizenThe status of
  • referenceSelf, using based onPrototypeInheritance mechanism of

JavaScript is a hybrid of many language styles, including both functional and object-oriented programming, and has been controversial since its birth

Netscape and Brendan Eich probably never imagined that JavaScript would become the world’s most popular programming language. This is the beginning of an amazing journey for JavaScript Coder.

What is prototyping

Prototype programming is a style and way of object oriented programming.

In prototyping, behavioral reuse (often referred to as inheritance in class-based languages) is achieved through the process of copying already existing prototype objects. This model is generally considered classless, prototype-oriented, or instance-based programming.

Simply put, this style creates an object without defining a class.

Self is the granddaddy of prototype programming, and JavaScipt uses this programming approach in its design.

Three mountains of JavaScipt prototype

  • prototype
  • __ proto __
  • constructor

First of all, be clear

  1. prototypeisFunctionunique
  2. __ proto __.constructorisObjectunique

Classic ancestor worship

A face of meng forced in, a face of meng forced out

Okay, so let’s look at a little bit of code

function Hero(name) {
    this.name = name;
}
/ / the Hero's prototype
Hero.prototyoe.country = 'demacia';
// Create an instance
var garen = new Hero('garen');
var jarvanIV = new Hero('jarvanIV');
// Instances can inherit properties of function prototype objects
console.log(garen.country); // demacia
console.log(jarvanIV.country); // demacia
// The prototype object of the function
console.log(Hero.prototype);
// The object's prototype
console.log(garen.__proto__);
console.log(jarvanIV.__proto__);
Copy the code

prototype

The prototype object of the Function, unique to Function, points to an object that is the prototype __proto__ of the instance created by calling the Function

Prototype is itself an Object, so prototype has __proto__ and constructor

There may be some confusion here, so let’s continue to look at it with questions

__ proto __

The prototype of an Object, unique to Object, refers to an Object that is the prototype of the function that created it,

// The object prototype and the function prototype object, pointing to the same address, are the same object
console.log(garen.__proto__ === Hero.prototype);
Copy the code

Prototype is an object, so __proto__ is an object

// hero.prototype is an object
// The prototype of the Object refers to the prototype Object of the function that creates the TA
console.log(Hero.prototype.__proto__ === Object.prototype); // true
// The terminal is null
console.log(Object.prototype.__proto__ === null); // true
Copy the code

Objects are connected by __proto__, which is called a prototype chain. Attribute methods that do not exist on the current object can be searched through __proto__ layers up to null

The methods we use for different data types are all inherited from __proto__

constructor

The constructor, which is unique to Object, refers, as its name suggests, to the function itself

// The prototype object constructor of the function, pointing to the function itself
console.log(Hero.prototype.constructor === Hero); // true
Copy the code

The function itself is also an object, so it also has __proto__, so it extends to __proto__

// The named Function's prototype points to the Function's prototype object
console.log(Hero.__proto__ === Function.prototype); // true
// Function The prototype of the prototype Object pointing to the prototype Object
console.log(Function.prototype.__proto__ === Object.prototype); // true
// The terminal is null
console.log(Object.prototype.__proto__ === null); // true
Copy the code

conclusion

  1. JavaScriptreferenceSelf, using based onPrototypeInheritance mechanism of
  2. Objectunique__proto__ 和 constructor.Functionuniqueprototype
  3. prototypeIs also aObject, there are__proto__andconstructor
  4. Objectthe__proto__Point to theThe function that creates the object 的 prototype
  5. Pass between objects__proto__Connects to objects that do not exist on the current objectAttribute methodCan be achieved by__proto__Work your way up until you reach the terminusnullThrough the__proto__A link that connects different objects isPrototype chain
  6. constructorConstructors that point to objects, all functions (also called objects)The final constructorAll point toFunction

The last

Three people, there must be my teacher yan nuggets, code more than mutual learning, common progress

If there are any errors in this article, please correct them in the comments section. If this article has helped you, feel free to like, comment and follow.

series

  • [Magic JavaScript] Data types, do you really master them?
  • [Magic JavaScript] Prototype programming, do you really understand?
  • [Magic JavaScript] function programming, you really skilled?
  • [Magic JavaScript] Asynchronous programming, have you really learned?
  • [Magic JavaScript] Event loop, do you really understand?
  • [Magic JavaScript] Garbage collection, are you really clear?