深入理解JavaScript原型

一、为什么用原型？

解决构造函数中每个方法在实例化对象时都要创建一遍的问题
在上一篇博客中解决上述问题的代码如下

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

虽然貌似函数每次只创建一次，然而依然存在问题，在JS中构造函数被称为类，通过构造函数创建出来的实例被称为一类对象。

而我们学过的面向对象的语言，类由属性与方法组成，现在把方法单独抽出来违反面向对象类的概念。

还有就是fun函数定义在了全局作用域中，这样会污染了全局作用域的命名空间，并且在全局作用域中很不安全。

于是就引入了原型。

二、什么是原型？

创建一个函数时，解析器都会向函数中添加一个属性prototype，这个属性对应着一个对象，这个对象就是原型

看下面的代码

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

看图示：

何时创建的原型对象？

当我们创建一个Person函数时，浏览器就会自动创建一个原型对象与之对应

为原型对象添加属性方法

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

图示：

实例化对象

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

解释：

在我们通过实例化对象去实例化对象时，这个对象就会存在一个默认的不可见的属性_proto_，来指向构造函数的原型对象
图示：

注意下面几点

• 1.只有函数对象才有prototype属性,普通函数调用prototype没有作用，构造函数才会有
• 2.当通过构造函数创建出对象后，这个对象已经和构造函数没有关系了，mc属性_proto_指向的是原型对象
• 3.手动给原型对象添加属性和方法，那么实例化出的对象mc、mc2、mc3都会共享原型对象中的属性和方法，看下列图示

• 4.如果我们访问mc对象的name属性，如果在mc中没有就会去mc的_proto_属性指向的原型对象中属性去找name属性，如果有返回，没有接着找(原型链),直到object对象没有的话返回undefined。
• 5.如果为mc对象添加一个属性name=“李四”，对mc对象来说就无法到原型对象中name=“张三”的属性，并且不可修改原型的属性name=“张三”

三、修改构造函数及原型创建对象的缺陷

1.构造函数缺陷

正如开头所示，在构造函数中添加的属性和方法，每个对象独享自己的一份，这个对属性适合，对方法不太适合，也就是说构造函数每创建一个对象，就会创建一个函数，造成内存浪费

2.原型模型缺陷

原型中所有属性都是共享的。用同一个构造函数创建出的对象去访问属性时，访问的是同一个原型对象，然而同一个原型对象的属性的属性值就是只有一个，比如上面的name=“张三”，这样导致所有对象的名字都是张三。

但是原型对共享特性对方法很适合。所有对象共享方法是最佳状态。

3.将两者组合解决缺陷

构造函数适合封装属性，原型适合封装，将两者结合，就有了下面

<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.动态原型模型创建对象

在组合模式中将构造方法和原型分开写，即属性和方法分开写，就不像一个类了，于是就有了动态原型模型
它将属性和方法都放在了构造方法里，在仅仅需要的时候才初始化原型

<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>

参考链接

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