javascript基础（原型（prototype））（十七）-优快云博客

本文链接：https://blog.youkuaiyun.com/u010853130/article/details/54925130

本文深入探讨了JavaScript中原型的概念及其实现方式。首先解释了为什么需要原型，接着详细阐述了原型是什么，最后介绍了如何在实际编程中利用原型来提高代码效率。

1为什么要有原型：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			//创建一个人类的构造函数
			function Person(name , age){
				//通过this，向新对象中添加属性
				this.name = name;
				this.age = age;
				
				//向新的对象中添加一个sayName()方法
				this.sayName = fun;
			}
			/*
			 * 在构造函数中我们为每一个对象都添加了一个sayName()方法，
			 * 	而这个方法是在构造函数中创建的，构造函数每执行一次就要创建一个新的sayName()方法
			 * 	每个对象中的sayName()方法都是不同，有几个对象就有几个sayName()
			 * 	但是这些函数的功能又是一摸一样的，所以我们没有必要创造出这么多一摸一样的函数
			 */
			
			/*
			 * 将函数定义到全局作用域中 ，的确可以解决问题，但是将它定义到全局作用域将会导致全局作用域的命名空间被污染。
			 * 	同样也导致我们程序运行不安全
			 */
			//将函数定义到构造函数的外部
			function fun(){
				console.log(this.name);
			};
			
		
			
			//创建一个Person
			var per = new Person("孙悟空",18);
			var per2 = new Person("唐僧",16);
			var per3 = new Person("玉兔精",16);
			
			//console.log(per.sayName == per2.sayName);
			per3.sayName();
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

2.什么是原型：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		
			/*
			 * 原型（prototype）
			 * 	- 我们每次创建一个函数浏览器都会为函数添加一个属性
			 * 		叫做prototype，这个属性对应的是一个对象
			 * 		这个对象就是我们说的原型对象。
			 * 	- 如果以仅仅以函数的形式去调用函数，则原型对象没有任何作用
			 * 	- 当以构造函数的形式调用函数时，它所创建的对象中都会有一个隐含的属性
			 * 		执行该函数的原型对象，我们可以通过__proto__来访问这个对象
			 * 
			 * 	- 所有的同一类型的对象他们都共享同一个原型对象，这个原型对象就相当于一个公共的区域
			 * 	- 当我们去调用一个对象的属性或方法时，它会先去对象自身中寻找,
			 * 		如果找到了则直接使用，如果没找到则去原型对象中寻找，如果原型中有则返回原型中的值
			 * 		如果原型中没有，则去原型的原型中寻找，找到了则直接使用依次类推。。。
			 * 		注意：Object的原型的原型为null，所以会一直找Object的原型，
			 * 			如果他里面依然没有，则返回undefined
			 * 	- 我们可以将对象中共有的属性或方法统一添加到原型中，
			 * 		这样我们不用添加多个重复的属性或方法，也不会污染全局作用域
			 */
			
			function MyClass(){
				
			}
			
			//向函数的原型对象中添加一个属性
			MyClass.prototype.hello = "你好";
			
			MyClass.prototype.fun = function(){
				alert("我是原型中的fun");
			};
			
			//创建MyClass的实例
			var mc = new MyClass();
			var mc2 = new MyClass();
			var mc3 = new MyClass();
			
			mc.hello = "mc的你好";
			
			//console.log(mc3.__proto__ == MyClass.prototype)
			
			//console.log(mc2.hello);
			
			//mc2.fun();
			
			//创建一个人类的构造函数
			function Person(name , age){
				//通过this，向新对象中添加属性
				this.name = name;
				this.age = age;
			}
			
			//向Person的原型中添加sayName()
			Person.prototype.sayName = function(){
				console.log(this.name);
			};
			
			var per = new Person("孙悟空",18);
			var per2 = new Person("唐僧",16);
			var per3 = new Person("玉兔精",16);
			
			per3.sayName();
			
			
		</script>
	</head>
	<body>
	</body>
</html>

3.怎么使用原型：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			//创建一个人类的构造函数
			function Person(name , age){
				//通过this，向新对象中添加属性
				this.name = name;
				this.age = age;
			}
			
			//向Person的原型中添加sayName()
			Person.prototype.sayName = function(){
				console.log(this.name);
			};
			
			//创建一个Person的实例
			var per = new Person("孙悟空",18);
			
			//当我们打印一个对象时，控制台往往会输出 [object Object]
			//此时实际上输出的内容是对象的toString()方法的返回值
			var str = per.toString();
			//console.log(str);
			
			//检查per中是否有toString
			//如果属性在对象的原型中，使用in也会返回true
			//console.log("toString" in per);
			
			//console.log(per.hasOwnProperty("toString")) ;
			
			//console.log(per.__proto__.__proto__.hasOwnProperty("toString"));
			
			//console.log(Object.prototype.__proto__);
			
			//修改per的toString()
			/*per.toString = function(){
				//return "我是一个可爱的Person" ;
				return "Person[name = "+this.name+" ，age = "+this.age+"]";
			};*/
			
			//修改Person原型的toString
			Person.prototype.toString = function(){
				//return "我是一个可爱的Person" ;
				return "Person[name = "+this.name+" ，age = "+this.age+"]";
			};
			
			var per2 = new Person("白骨精",16);
			
			console.log(per);
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>