js 面向对象编程陷阱2

最新推荐文章于 2022-08-09 15:00:06 发布

tiangej

最新推荐文章于 2022-08-09 15:00:06 发布

阅读量275

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/tiangej/article/details/77916782

版权

JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

观察如下代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>	
	<body>

		<script>
		
		    function A()
		    {
		        A.prototype.get = function ()
		        {
		            return 1 ;
		        }		
		    }
		
			//步骤一：  先生成一个A的实例，检验其原型函数
	        var a1 = new A();
	        console.log(a1.get());      // 1
	        
	        
	        //步骤二：修改Ａ的原型函数，并验证其已经生效
	        A.prototype.get = function ()
	        {
	            return 2 ;
	        }
	        console.log(a1.get());     // 2
	        
	        
	        //步骤三：再生成一个A的实例，由于A的构造器中包含原型函数的定义体
	        //所以，生成实例的同时，步骤二的结果被恢复
	        var a2 = new A();
		
	        console.log(a1.get());    // 1
	        console.log(a2.get());    // 1
		
		</script>
	</body>
</html>

>>陷阱

如果在A的构造器内部声明原型函数，则每生成A的实例的时候，原型函数都会被重新声明一次。

这是没有意义的动作，或多或少影响js的执行性能。

应将原型函数的定义体从构造器中移出，如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>	
	<body>

		<script>
		
		    function A(){}		    
	    	A.prototype.get = function ()
	        {
	            return 1 ;
	        }		

			//步骤一：  先生成一个A的实例，检验其原型函数
	        var a1 = new A();
	        console.log(a1.get());      // 1
	        
	        
	        //步骤二：修改Ａ的原型函数，并验证其已经生效
	        A.prototype.get = function ()
	        {
	            return 2 ;
	        }
	        console.log(a1.get());     // 2
	        
	        
	        //步骤三：再生成一个A的实例，由于A的构造器中包含原型函数的定义体
	        //所以，生成实例的同时，步骤二的结果被恢复
	        var a2 = new A();
		
	        console.log(a1.get());    // 2
	        console.log(a2.get());    // 2
		
		</script>
	</body>
</html>