The difference and relation between __proto__ and prototype in JavaScript

Recently in the study of the prototype JavaScript, found __proto__ and prototype, learning is very large, so studied.

First, explain what a prototype is.

A prototype is an object that other objects can use to implement property inheritance.

What is the object?

In JavaScript, an object is a collection of any unordered key-value pairs, and if it is not a primary data type (undefined,null,boolean,number,array,string), it is an object.

So how do you look at the prototype of an object? And how to set a prototype for an object.

Standard object prototype accessor Object.getprototype (object), so far only Firefox and Chrome implement this accessor. In addition to IE, other browsers support non-standard accessor __proto__, while prototype is a property that only functions.

That is, if the object is not a function, then it has no prototype this property.

The following code confirms the above conclusion.

<script>
			var a={name: ' Derek '};
			var b=function (name) {
				name=this.name;
				};
			document.write (a.prototype+ "<br>");//undefined object A is obviously not a function, so there is no prototype this property.
			document.write (Object.getprototypeof (a) + "<br>");//[object Object]
			document.write ( Object.getprototypeof (b) + "<br>")//function Empty () {}
			document.write (object.getprototypeof (b) ==b.__ proto__);//true  These two are equivalent, except that the browser is compatible with different types.
		</script>

Again, the JavaScript constructor

1, constructors and ordinary functions, but with the following two special properties.

2. Usually the first letter of the constructor is capitalized (making it easier to recognize the constructor). Constructors are usually combined with the new operator to construct the object.

The following example is very powerful ~

Based on the knowledge you know, imagine creating a new object and making the new object behave like an array. One way is to use the following code.

1 2 3 4 5 6

Create a new empty object var o = {}; Inherits from the same prototype, an array object o.__proto__ = Array.prototype; Now we can call any method of the array ... o.push (3);

While this code is interesting and works, the problem is that not every JavaScript environment supports writable __proto__ object attributes. Fortunately, JavaScript does have a standard mechanism for creating objects, requiring only one operator to create new objects and set __proto__ references to new objects-that is, the "new" operator.

1 2	var o = new Array (); O.push (3);

The new operator in JavaScript has three basic tasks. First, it creates a new empty object. Next, it sets the __proto__ property of the new object to match the prototype property of the called function. Finally, the operator invokes the function, passing the new object as a "this" reference. If you want to extend the last two lines of code, it becomes the following:

1 2 3 4

var o = {}; o.__proto__ = Array.prototype; Array.call (o); O.push (3);

The call method of a function allows you to specify the object referenced by "This" within the function, when calling the function. Of course, the author of a function needs to implement such a function in this case. Once the author has created such a function, it can be called a constructor.

Let's test it out.

var person=function (name,age) {
				this.name=name;
				This.age=age;
				document.write ("Hello,i ' M" +name+ "and" +age+ "years old" + "<br>");
			}
			var p1=new person (' Derek ');
			document.write (Object.getprototypeof (p1) ==person.prototype);//true
			document.write (p1.__proto__== Person.prototype);//true two ways to access object prototypes will have the same results, provided they are not IE6, 7, 8 browsers.

Can the above theory be correct ~

Let's do the experiment and see how the inheritance is done.

var person=function (name,age) {
				this.name=name;
				This.age=age;
				document.write ("Hello,i ' M" +name+ "and" +age+ "years old" + "<br>");
			}
			Person.prototype.smile=function () {
				document.write ("O (∩_∩) o~" + "<br>");
			}
			var p1=new person (' Derek ');
			P1.smile ();

Output: Hello,i ' m Derek and years old
O (∩_∩) o~

First of all, P1 this object does not smile this function, so go to __proto__ attribute to look up, because p1.__proto__== Person.prototype, and this function is on the person.prototype, so the results of the above operation will appear. This is the simplest prototype chain, if there is no smile () Person.prototype on the function, then go to person.__proto__ to continue to find, and so on.