构造函数和原型的异同

发表于 |

有两种写法：
1、

1
2
3
4
5
6
7
8
9
10
11
12
13
function a(age){
	this.name = "sam";
	this.age = age;
	var that = this;
	this.getAge = function(){
		return that.age;
	}
}
// a.prototype.getAge = function() {
// 	return this.age;
// };	
var B = new a(200);//200
var C = new a(300);//300

2、

1
2
3
4
5
6
7
8
9
10
11
12
13
function a(age){
	this.name = "sam";
	this.age = age;
	var that = this;
	// this.getAge = function(){
	// 	return that.age;
	// }
}
a.prototype.getAge = function() {
	return this.age;
};	
var B = new a(200);//200
var C = new a(300);/300

以上两种写法虽然执行结果相同，但是原理却不同，第一种是通过构造函数生成实例，第二种是通过prototype原型。他们的不同体现在：
1、两个实例的getAge函数指向不同：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function a(age){
	this.name = "sam";
	this.age = age;
	var that = this;
	// this.getAge = function(){
	// 	return that.age;
	// }
}
a.prototype.getAge = function() {
	return this.age;
};	
var B = new a(200);
var C = new a(300);
console.log(B.getAge == C.getAge);	//true
console.log(C.getAge);

原型的函数指向的都是同一个函数。

构造函数指向的确是不同的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function a(age){
	this.name = "sam";
	this.age = age;
	var that = this;
	this.getAge = function(){
		return that.age;
	}
}
// a.prototype.getAge = function() {
// 	return this.age;
// };	
var B = new a(200);
var C = new a(300);
console.log(B.getAge == C.getAge);	//false
console.log(C.getAge);

2、第二点不同就是生成的实例会占用内存，大量的实例就会出现网页卡顿的情况，比如飞机大战中，每个子弹每个飞机都是实例的话，他们去做碰撞检测时会明显的卡顿，所以尽量写成原型的函数，这样逼格也更高，js代码更优雅。

/**更新**/
再看两种写法的对比：
1、

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
	 function ceshi(){
		var current = 1;
		function a(){current++;console.log(current);}
		function b(){console.log('b');}
		function c(){console.log('c');}
		return {
			a:a,
			b:b,
			c:c
		}
	};
	var CESHI = new ceshi();
	var CESHI2 = new ceshi();
	console.log(CESHI.a == CESHI2.a);//false
        CESHI.a();//2 
        CESHI2.a();//2 
	</script>
</body>
</html>

这种就是生成实例，两个实例的指向不同，所以不相等，CESHI和CESHI2没有任何关联。

2、

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
	ceshi = function (){
		var current = 1;
		function a(){current++;console.log(current);}
		function b(){console.log('b');}
		function c(){console.log('c');}
		return {
			a:a,
			b:b,
			c:c
		}
	}();
	ceshi.a();//2
	ceshi.a();//3
	console.log(ceshi.a == ceshi.a);//true
	</script>
</body>
</html>

这种写法形成了闭包，可以通过ceshi这个变量访问内部变量，所以指向的a()也是相同的。

/*更新*/
封装模块写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
(function(globle){
	var module = (function(){
		var data = "sectet";
		return {
			bool : true,
			string: "a string",
			array : [1, 2, 3, 4, 5],
			object : {
				lang : 'en-US'
			},
			getData : function(){
				return data;
			},
			setData : function(value){
				return (data = value)
			}
		};
	})();
	globle.module = module;
})(this);
module.setData(3);
console.log(module.getData())