Mind mapping

1. The development history of JS

1.1 The birth of javaScript

JavaScript was born because of the Internet, immediately following the advent of the browser.

In 1994, Netscape released version 0.9 of its Navigator browser. It was the first full-fledged web browser in history, and it was a hit. However, this version of the browser can only be used for browsing and does not have the ability to interact with visitors. For example, if a web page asks for a “user name,” the browser can’t tell if the visitor actually filled it in, leaving it to the server. If not, the server returns an error and asks the user to fill it out again, which is a waste of time and server resources. So Netscape desperately needed a web scripting language that would allow the browser to interact with the web.

What is a Web scripting language? Netscape had two options: one was to take existing languages like Perl, Python, Tcl, Scheme, and so on, and allow them to be embedded directly into web pages; The other is inventing a whole new language. Both options have their pros and cons. The first option is easier to promote by taking advantage of existing code and programmer resources. The second option, which favors a fully applicable language, is easier to implement.

In 1995, influenced by the Java object-oriented language, Netscape and Sun formed an alliance to develop a language that could run on the web and named it “Java+ Script “.

1.2JS design idea

In May 1995, Brendan Eich designed the first version of the language in just 10 days. It’s a hodgepodge of syntax from multiple sources:

  • Basic syntax: C language and Java language.
  • Data structure: Borrowed from the Java language, including the separation of values into primitive values and objects.
  • Use of functions: Draw on Scheme and Awk to treat functions as first class citizens and introduce closures.
  • Prototype inheritance model: Borrow from Self (a variant of Smalltalk).
  • Regular expressions: Borrow from Perl.
  • String and array handling: Borrow from Python.

2. Js inherited thought design

The data types in JavaScript are all objects, and there must be a mechanism to link them all together, hence the design of inheritance. Before ES6, there was no concept of classes (designers felt that js was a full object-oriented programming language, too formal and difficult to get started with the introduction of class classes).

Generate an instance in Java

Person p = new Person()

Copy the code

JS uses the new command to generate instance objects. However, JS does not have the concept of a class. Analogous to c++ and Java, it calls the constructor of a class

JavaScript generation instance

Function Person(name){this.name = name this.type=" Person "} var p1 = new Person(" Person ") var p2 = new Person(" Person ") //Copy the code

Disadvantages of the new operator

Unable to share properties and methods; Each instance object has its own copy of properties and methods. This not only fails to share data, but is also a huge waste of resources.

For example, if P1 changes the type attribute, P2 will not be affected

p1.type ="Animal" console.log(p2)//{name:" li si ",type:" li "}
Copy the code

3. Why design the prototype object

To solve the sharing problem, Brendan Eich sets a Prototype property for the constructor. This property refers to an object (the stereotype object) in which all the properties and methods shared by the instance are stored. Properties and methods that do not need to be shared (private properties, methods) are placed in constructors. The instance object, once created, automatically references the properties and methods of the Prototype object. That is, the properties and methods of an instance object are divided into two types, one is local and the other is referenced.

Animal.prototype.type="Animal"
Animal.prototype.say = function(content){
  console.log(`The ${this.name}.${content}`)}var dog = new Animal('dog')
dog.say(Woof woof woof)  // Dog, woof woof
var cat = new Animal('cat')
cat.say(Meow, meow, meow.) // Cat, meow meow meow
Copy the code

4. What is a prototype object

Concept: Every JavaScript object (except null) is created with an object associated with it. This object is a prototype object from which each instance object inherits properties.

The relationship between the constructor and the instance stereotype

Each instance object has an implicit prototype __proto__ attribute that points to its instance prototype

function Animal() {}var animal = new Animal();
console.log(animal .__proto__ === Animal.prototype); // true
Copy the code

5. The relationship between instance objects, prototype objects, and constructors

Constructor: Each stereotype has a constructor property that points to its associated constructor

function Animal() {}console.log(Animal.prototype.constructor === Animal) // true
Copy the code

Do you really understand? Look at this picture

In js, all function functions are inherited from function, so function is the ancestor of all functions. Function is derived from itself, with its __proto__ pointing to its prototype object

conclusion

  • The __proto__ attribute of all instance objects points to the prototype object of their constructor
  • All functions (constructors) are instances of new Function(), so __proto__ points to the Function constructor’s prototype object function.prototype
  • All prototype objects are instances of new Object(), so __proto__ points to object. prototype from the Objec constructor, and Object.prototype points to null
  • The Function constructor is itself an instance of Function, so _proto_ refers to the prototype object of Function.

6. What is a prototype chain

As the name implies, a prototype chain is a chain, and since each object has a _proto_ attribute pointing to the prototype object, the prototype object also has a prototype object pointing to the prototype object until null in the pointer, which does not reach the top of the prototype chain.

7. Expand your knowledge

Gets the prototype object of the object

function Animal() {}var animal = new Animal()
console.log(animal) 

console.log(Object.getPrototypeOf(animal)) / / recommend
console.log(animal.__proto__) / / do not recommend
console.log(animal.constructor.prototype) Each instance object inherits a constructor attribute from the stereotype

Copy the code

Gets object properties and stereotype properties

  • Object.keys(): Returns all enumerable properties on this Object, excluding the prototype chain
  • GetOwnProperyNames (): Returns properties of the object itself (enumerable, non-enumerable), excluding properties on the stereotype chain
  • Obj.hasownproperty (‘xx’): Determines if the object contains attributes (excluding those on the prototype chain)
  • for … In returns all enumerable attributes containing the stereotype chain

8. Practice consolidation

Subject to a

function Person() { } var p = new Person() console.log(Person.prototype); // Object {} console.log(p.prototype); // undefined has no prototype property console.log(p.constructor); // function Person(){} inherits the constructor property from the constructor's prototype object, pointing to the constructor itself console.log(person.constructor); Function console.log({}.constructor); // function console.log({}.constructor); // function console.log({}.constructor); // function console.log({}.constructor); // funciton Object() {} Each Object is console.log(object.constructor) constructed from new Object(); // function Function(){} console.log([].constructor); // function Array(){}Copy the code

Topic 2

Function Person(){} var person1=new Person(); person1.__proto__== // Person.prototype person1.constructor== //Person Person.__proto__== //Function.prototype Person. The prototype. The constructor = = / / Person person1. The prototype. The constructor = = / / an error person1. Prototype = = is undefined Person.prototype== // person1.__proto__Copy the code

The title three

function Fun(){ var getName = function(){ console.log(1); } return this; } Fun.getName = function(){ console.log(2); } Fun.prototype.getName = function(){ console.log(3); } var getName = function(){ console.log(4); } function getName(){ console.log(5); } Fun().getName(); //4 Fun return this, this refers to the Window, the function expression is promoted, then the function declaration is reassigned getName(); New Fun().getName(); Var f = new Fun(); F.getname () // Call the property method on the prototype object new New Fun().getName(); / / 3Copy the code

reference

  • Book opening: application of 3W method
  • The birth of JavaScript: www.w3cschool.cn/javascript_…
  • JavaScript were born: www.ruanyifeng.com/blog/2011/0…
  • JavaScript inheritance mechanism design www.ruanyifeng.com/blog/2011/0…
  • JavaScript in-depth understanding from prototype to prototype chain: github.com/mqyqingfeng…
  • What is a prototype and prototype chain: juejin.cn/post/684490…
  • Advanced required: a deep understanding of JavaScript prototype zhuanlan.zhihu.com/p/87667349
  • MDN object prototype: developer.mozilla.org/zh-CN/docs/…
  • Get object properties and stereotype properties: blog.csdn.net/weixin_4191…