JavaScript：this粗解、prototype

this：当前的方法属于谁，this就是谁，比如下面的代码中，function是为arr添加的，所以this就是指arr。

<!DOCTYPE html>
<html>
<head>
	<title>this 粗解</title>
</head>
<script type="text/javascript">
var arr = [1,2,3,4,5,6];
arr.a = 12;
arr.show = function(){
	alert(this.a);
};
arr.show();
</script>
<body>
</body>
</html>

再看另一个常用的，oDiv.onclick = function(){ alert(this.childNodes); };中，this就是指oDiv，因为该function赋给了oDiv的方法onclick，所以该function属于oDiv。

下面在一个html文档中，新建一个Object对象obj，然后为该对象添加两个属性和方法，这就是一个简单的面向对象的例子。

<!DOCTYPE html>
<html>
<head>
	<title>面向对象实例</title>
</head>
<script type="text/javascript">
var obj = new Object();
obj.name = 'chen';
obj.password = '123456';

obj.showName = function(){
	alert('myName is :'+this.name);
};
obj.showPassword = function(){
	alert('my password is :'+this.password)
};

obj.showName();
obj.showPassword();
</script>
<body>
</body>
</html>

对上面创建一个人的名字和密码的过程进行封装过后，结果如下

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>面向对象实例</title>
</head>
<script type="text/javascript">
function createPerson(name,password){
	//原料
	var obj = new Object();
	//加工
	obj.name = name;
	obj.password = password;

	obj.showName = function(){
		alert('myName is :'+this.name);
	};
	obj.showPassword = function(){
		alert('my password is :'+this.password)
	};
	//出厂
	return obj;
}

var person1 = createPerson('张三','123456');
person1.showName();
person1.showPassword();
</script>
<body>
</body>
</html>

为函数加new和不加new有不同之处，上面的例子中，如果代码是var person1 = new creatPerson('张三','123456');那么，就需要修改一下createPerson函数。实际上，在进行new的时候，系统会自动地在前面加上var this = new Object，最后也会通过return this返回this。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>面向对象实例</title>
</head>
<script type="text/javascript">
function createPerson(name,password){
	//原料
	//var obj = new Object();
	//加工
	this.name = name;
	this.password = password;

	this.showName = function(){
		alert('myName is :'+this.name);
	};
	this.showPassword = function(){
		alert('my password is :'+this.password)
	};
	//出厂
	//return obj;
}

var person1 = new createPerson('张三','123456');
person1.showName();
person1.showPassword();
</script>
<body>
</body>
</html>

再来看一个例子，有两个数组arr1和arr2，现在都要给它们求和，那么可以自定义一个函数，如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>面向对象实例</title>
</head>
<script type="text/javascript">
var arr1 = new Array(1,2,3,4,5,3);
var arr2 = new Array(1,5,3);
arr1.sum = function(){
	var result = 0;
	for (var i = this.length - 1; i >= 0; i--) {
		result += this[i];
	}
	return result;
}
alert(arr1.sum());
</script>
<body>
</body>
</html>

但是现在问题是，有多个arr怎么办？不可能为每个arr都写一个函数。于是就用到了原型prototype。如下，直接为Array加函数。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>面向对象实例</title>
</head>
<script type="text/javascript">
var arr1 = new Array(1,2,3,4,5,3);
var arr2 = new Array(1,5,3);
Array.prototype.sum = function(){
	var result = 0;
	for (var i = this.length - 1; i >= 0; i--) {
		result += this[i];
	}
	return result;
}
alert(arr1.sum());
alert(arr2.sum());
</script>
<body>
</body>
</html>

注意：如果是自己写类，那么一般构造函数里面放属性，方法用原型实现。

posted @ 2020-02-29 13:47  昨夜昙花  阅读(7)  评论(0)    收藏  举报