In-depth understanding of JavaScript Prototype

First, why prototype?

Each method to solve the constructor must create it again when the object is instantiated problem
Code to solve the problem in a blog post on the following

<script type="text/javascript">
	function Person(name){
		this.name=name;
		this.sayName=fun	
		}
	}
	function fun(){//将方法单独抽离出来
		alert(this.name);	
	}
</script>

While seemingly every function created only once, but the problem still exists, inIn JS class constructor is called, creating out by the constructor is called an instance of the class object.

The object-oriented language that we learned, from the class consisting of properties and methods, are now out of the method to separate violation of the concept of object-oriented class.

There is a fun function is defined in the global scope, it will pollute the namespace global scope, and is not safe in the global scope.

So it introduced a prototype.

Second, what is the prototype?

When you create a function, the parser will add a property to the function prototype, this property corresponds to an object that is the prototype

Look at the following code

<script type="text/javascript">
	function Person(){
		
	}
</script>

See illustration:

When to create a prototype object?

When we create a Person function, the browser will automatically create a prototype object corresponding

The method of adding attribute prototype object,

<script type="text/javascript">
	function Person(){
		
	}
	
	Person.prototype.name="张三";
	Person.prototype.fun=function(){
		alert(this.name)
	}
</script>

Icon:

Instantiate an object

<script type="text/javascript">
	function Person(){
		
	}
	
	Person.prototype.name="张三";
	Person.prototype.fun=function(){
		alert(this.name)
	}
	
	//实例化对象
	var mc=new Person();
	mc.fun();
</script>

Explanation:

When we went to instantiate an object by instantiating the object that will exist a default invisible attributes _proto_, to point to the prototype object constructor
Icon:

Note the following points

• 1. Only function objects have the prototype property, ordinary function call prototype does not work, the constructor will have
• 2. When an object is created by the constructor, and the constructor this object has no relationship,mc attribute points to the prototype object _proto_
• 3. Manually prototype object to add properties and methods, then the instantiation ofObject mc, mc2, mc3 and methods are shared properties of the prototype objectSee the following illustration

• 4. If we visit mc object name attribute, if not will go to the prototype object of _proto_ mc mc attributes point to find the name attribute of the property, if returned, then look no (prototype chain), until the object if not, the object returns undefined.
• 5. If the attribute name is added to a target mc = "John Doe", for the object mc impossible, to prototype object name = "John Doe" attribute, and the prototype can not be modified attribute name = "John Doe"

Third, defects modify the constructor to create objects and prototypes

1. Constructor defect

As indicated at the beginning, and a method of adding properties in the constructor,Each object exclusive own copy of this property is suitable for the method is not suitable, Which means that each constructor to create an object, it will create a function, causing memory waste

2. prototype model defects

Prototype all properties are shared. When to visit the property used to create the same object constructor, access to the same prototype object, but with a property value of the property is only a prototype object, such as the above name = "Joe Smith", which causes all objects the name is Joe Smith.

butSharing feature is ideal for prototyping method. All objects sharing method is best.

3. The combination of both address the deficiencies

Constructor properties for packaging, package prototypes for the combination of the two, there is the following

<script type="text/javascript">
	//构造函数封装属性
	function Person(name,age){
		this.name=name;
		this.age=age;
	}
	
	//原型封装方法
	Person.prototype.eat=function(food){
		alert(this.name+"爱吃"+food);
	}
	
	//实例化对象
	var mc=new Person("张三",20);
	var mc1= new Person("李四",19);
	
	//调用方法
	mc.eat("苹果");//输出张三爱吃苹果
	mc1.eat("香蕉");//输出李四爱吃香蕉
</script>

4. Dynamic prototype model to create objects

In the method of construction and in the combination mode prototype write separately, i.e. separately write properties and methods, it is not a class, so there is a dynamic model of the prototype
It properties and methods are on the construction method, the prototype was initialized only when needed

<script type="text/javascript">
	//构造函数封装属性
	function Person(name,age){
		this.name=name;
		this.age=age;
		/*
			表示eat()方法是不是function，不是证明第一次创建对象，
			则把这个function添加到原型中
			如果是function，代表原型已有，不再添加
		*/
		if(typeof this.eat!=="function"){
			Person.prototype.eat=function(food){
				alert(this.name+"爱吃"+food);
			}
		}
	}
	var mc=new Person("张三",20);
	mc.eat("苹果");//输出张三爱吃苹果
</script>

Reference links

https://blog.csdn.net/u012468376/article/details/53121081
https://www.jb51.net/article/86723.htm