Opinions prototype and prototype chain

-proto- attribute instance object attribute value default value prototype constructor

1, all references to types (array, function, object) can be freely extended attributes (other than null).

2, all have a reference type '_ _ proto_ _' attributes (also called implicit prototype, it is a general object).

3, all functions have a 'prototype' property (which is also called explicit prototype, it is also a general object), which points to its corresponding prototype object (target object is empty by default).

4, all reference types, its '_ _ proto_ _' attribute points 'prototype' attribute of its constructor.

5, when trying to get properties of an object, this property if the object itself does not exist, then it will go to the '_ _ proto_ _' property (ie 'prototype' property of its constructor) to look for.

Then the points had finished, we understand these points to prototype and prototype chain.
prototype

An example of a prototype of our first look.

	//这是一个构造函数
	function Foo(name,age){
		this.name=name;
		this.age=age;
	}
	/*根据要点3,所有的函数都有一个prototype属性,这个属性是一个对象
	再根据要点1,所有的对象可以自由扩展属性
	于是就有了以下写法*/
	Foo.prototype={
		// prototype对象里面又有其他的属性
		showName:function(){
			console.log("I'm "+this.name);//this是什么要看执行的时候谁调用了这个函数
		},
		showAge:function(){
			console.log("And I'm "+this.age);//this是什么要看执行的时候谁调用了这个函数
		}
	}
	var fn=new Foo('小明',19)
	/*当试图得到一个对象的属性时,如果这个对象本身不存在这个属性,那么就会去它
	构造函数的'prototype'属性中去找*/
	fn.showName(); //I'm 小明
	fn.showAge(); //And I'm 19

This is the prototype, it is well understood. So why use a prototype of it?

Imagine if we want to create a lot of objects by Foo (), if we write it like this:

function Foo(name,age){
		this.name=name;
		this.age=age;
		this.showName=function(){
			console.log("I'm "+this.name);
		}
		this.showAge=function(){
			console.log("And I'm "+this.age);
		}
	}

So we created out of each object, which has showName and showAge method, which would take up a lot of resources.
The prototype is achieved by then only need to give the property assignment in the constructor function, and the method of writing in Foo.prototype property (this property is unique) inside. So that each object can use the prototype property inside showName, showAge method, and saving a lot of resources.
Prototype chain

Understanding the prototype, so the prototype chain to better understand.

##### following words can help understand the prototype chain
according to point 5, when trying to obtain properties of an object, the object itself if this attribute is not present, then it will go to the constructor 'prototype' property to Search. And because it 'prototype' attribute is an object, so it also has a '_ _ proto_ _' property.

Then we look at an example:

	// 构造函数
	function Foo(name,age){
	 	this.name=name;
	 	this.age=age;
	}
	Object.prototype.toString=function(){
		//this是什么要看执行的时候谁调用了这个函数。
		console.log("I'm "+this.name+" And I'm "+this.age);
	}
	var fn=new Foo('小明',19);
	fn.toString(); //I'm 小明 And I'm 19
	console.log(fn.toString===Foo.prototype.__proto__.toString); //true
	
	console.log(fn.__proto__ ===Foo.prototype)//true
	console.log(Foo.prototype.__proto__===Object.prototype)//true
	console.log(Object.prototype.__proto__===null)//true

Is not that strange? Let's analyze.
Picture description write here
first, fn constructor is Foo (). Therefore:
fn._ proto _ _ === Foo.prototype
and because Foo.prototype is an ordinary object, its constructor is Object, so:
Foo.prototype.
_ _ _ === proto Object.prototype
by the above code, we know this toString () method is Object.prototype inside, this method is called when the object itself does not exist, it will go up layer by layer, until the date null.

So when fn call toString (), JS fn did not find this approach, so in it went Foo.prototype find, or not find this method, then went to look for Object.prototype, locate, and then calling Object .prototype in toString () method.

This is the prototype chain, fn precisely because of the presence of the prototype chain of mechanisms to call the methods of Object.prototype.

Guess you like

Origin blog.csdn.net/weixin_42322521/article/details/92392988