Prototyping and inheriting learning notes 1

　　　　Talking about the object

Object-oriented prototype chain inheritance this piece, it should be the most difficult to understand JavaScript, the younger brother is more difficult to turn, but also watched a long video, blog, slowly have their own understanding, now record the content and summary of learning. first section should say the object of this thing, JS in the object and other languages are different, now cut into the topic, began to talk about objects.

　　　　What is an object

Definition (ECMA-262): A collection of unordered properties whose properties can contain basic values, objects, or functions.

As you can see by definition, objects are collections of properties that can be a basic value, a function, or a new object . Remember, the function is also an object, and the prototype chain will understand it well.

　　　　Object structure

Probably explain this figure,var obj = {}; obj.x = 1; obj.y = 2; This code first defines an obj empty object, then defines two properties X and Y, each of which is an object of a key-value pair. There are writable,enumberable,configurable,value four attributes and a pair of get/set methods. An object also has three default property __proto__,__class__,__extensible__, where the __proto__ property is a prototype object that points to the function (method) that created the object, such as the __proto__ of the second obj The prototype object points to the constructor of the FN property. OK, a bit around, the follow-up will be around ...

　　　　Creating objects

1.new

First of all, it is necessary to note that the object is actually created through the function , such as Var obj=new fn (), and again such as: Var obj={},arr=[], in fact, the two methods of creating objects are the essence of Var Obj=new object (), arr = new Array (), so it is not surprising that objects are created through functions.

Last module we know that the function will have prototype this property by default, as follows:

The property value of this prototype is an object, which is a collection of properties that, in general, has only one constructor property, pointing to the function itself.

We can also add some attributes to the prototype of the custom function to see the code:

1 function Fn () {23}; 4 fn.prototype.x=1; 5 var New Fn ();

At this point, the instantiated F1 object can access the value of the prototype attribute X of the FN (). That is, the F1 object is from the FN function new, so that the F1 object can invoke the properties in Fn.prototype. This is because each object has a __proto__ property (Chrome exposes this property, which you can look at in Chrome), which references the prototype property of the function that created the object , the f1.__proto__===fn.prototype.__proto__ will be explained in detail in the next section, which is the key to the inheritance of the prototype chain (an invisible chain is connected to all the families that are related to each other). This section also continues the prototype property of the pull function.

Then the prototype can be broadly used to indicate:

In a nutshell: The __proto__ property of an instantiated object joins the prototype property of an instance function , so that the instantiated object can access the prototype property through the invisible chain. So here's the question: How to tell if an object's property value is a property on a prototype or a property of its own, JS provides us with a method: the hasOwnProperty () and the In operator, as above, use the in operator to determine whether a property exists (including attributes on the prototype chain), The hasOwnProperty () method also determines whether a property exists (does not contain a prototype property).

2.object.create ()

Follow the code comparison to understand:

1 functionPerson (name) {2      This. name=name3 };4Person.prototype.sayname=function(){5Console.log ( This. Name)6 };7 functionTeacher (name) {8      This. name=name9 };TenTeacher.prototype =Person.prototype; One varTeacher =NewTeacher ("James"); ATeacher.sayname ();//James -  -Teacher.prototype.teach =function(course) { theConsole.log ("I teach" +course) - } -Teacher.teach ("中文版");//I teach 中文版 -  + varperson =NewPerson ("Lebro"); -Person.teach ("Chinese");//I teach Chinese

As the 10th line of code, the prototype of the person is directly assigned to the teacher archetype seems to be no problem, the object teacher will inherit the person () Sayname () method, but to teacher expand the method will have a sharing problem, Teacher.prototype and Person.prototype point to a reference, so expanding Teacher's prototype method is equivalent to adding a method to the person's prototype, obviously not what we want;

So the Object.create () method is introduced to exempt the problem, in essence, the assignment of the prototype attribute:

1 functionPerson (name) {2      This. name=name3 };4Person.prototype.sayname=function(){5Console.log ( This. Name)6 };7 functionTeacher (name) {8      This. name=name9 };TenTeacher.prototype =object.create (person.prototype); One varTeacher =NewTeacher ("James"); ATeacher.sayname ();//James -  -Teacher.prototype.teach =function(course) { theConsole.log ("I teach" +course) - } -Teacher.teach ("中文版");//I teach 中文版 -  + varperson =NewPerson ("Lebro"); -Person.teach ("Chinese");//uncaught TypeError:person.teach is not a function

As the code above, replacing the direct assignment with the Object.create () method avoids this problem, so the method actually creates an empty object first, The value of the parameter Person.prototype has this empty object to pass to Teacher.prototype, so there is no problem of the prototype sharing, the use of the Object.create () method when considering this will not be wrong (no research source, Just for the moment I understand that, please correct me).

　　　　The first section first said so much, did not follow the usual thinking to write, because the author is only a summary of my study, is in accordance with I do not understand the whole idea of a process to write slowly, may not meet all the learning model, and the most basic knowledge of some objects are not mentioned, Because I can see the prototype inherit this piece I think the most basic foundation should be have, so, please feel free to vomit the trough ~ ~ ~ The following section is about the properties of the object operation, including read-write, delete, enumeration, detection. See you in the next section.

Prototyping and inheriting learning notes 1