javascript中的原型prototype的应用

最新推荐文章于 2025-06-16 18:07:53 发布

原创最新推荐文章于 2025-06-16 18:07:53 发布 · 120 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

WEB前端@javascript 专栏收录该内容

31 篇文章

订阅专栏

本文介绍如何通过操作prototype来扩展JavaScript内置对象的功能，包括字符串的截取、反转等实用方法。

通过操作prototype来扩展javascript内置对象的功能

新建一个js文件用来存放对javascript对象的扩展

/**
 * 打印字符串到页面中
 */
Object.prototype.show = function() {
	document.write(this.toString()+"<br/>");
}


/**
 * 截取字符串两端的空格
 * 
 */
String.prototype.trim = function() {
	var start,end;
	start = 0;
	//this指代调用该匿名函数的对象
	end = this.length-1;
	//空格的code为32 ， 也可以直接用 " "来表示 
	//去除字符串左边的空格 
	while(start<=end && (this.charCodeAt(start)==32)) {
		++start;
	}
	//去除字符串右边的空格 
	while(start<=end && (this.charCodeAt(end)==32)) {				
		--end;
	}
	//注意 ：截串时包头不包尾 ，所以end+1
	return this.substring(start,end+1);
}


/** 
 * 字符串转换为字符数组
 * 
 */
String.prototype.toCharArray = function() {
	var chs = new Array(this.length);
	for(var i=0; i<this.length; i++)
		chs[i] = this.charAt(i);
	return chs;
}

//[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]

/**
 * 字符串反转
 * 1.将字符串转换为字符数组
 * 2.交换位置
 * 3.再将数组变为字符串返回
 */
String.prototype.reverse = function() {
	//字符串转换为数组
	var arr = this.toCharArray();
	
	//交换位置
	for(var start=0,end=arr.length-1; start<=end; start++,end--) {
		swapElementInArray(arr,start,end);
	}
	//javascript中可以在函数中定义函数，此时内部的函数作为一段代码的封装体存在
	function swapElementInArray(arr,i,j) {
		arr[i] = arr[i]^arr[j];
		arr[j] = arr[i]^arr[j];
		arr[i] = arr[i]^arr[j];
	}
	
	//Array对象的方法: arrayObject.join(separator) 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。  默认使用逗号作为分隔符。
	return arr.join("");
}

/**
 * 更简单的字符串反转实现
 * 1.字符串转为字符数组
 * 2.调用Array中已经提供的reverse()对数组反转
 * 3.再使用join()将数组转为字符串
 * */
String.prototype.reverseMoreSimple = function() {
	return this.toCharArray().reverse().join("");
}

//[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]

外部引入该js，即可使用其中的扩展功能

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<!-- 引入外部的js脚本文件 -->
	<script type="text/javascript" src="mytool.js"></script>
	<script type="text/javascript">
		//show()打印内容到页面，该方法加入到了Object的原型中，所有类型都可以使用 
		var str = "  hello  ";
		str.show(); 
		str.length.show();//9
		
		//trim()去除字符串两端空格 
		str.trim().show();
		str.trim().length.show();//5
		
		//toCharArray(),将字符串转换为字符数组 
		var s = "ABCDEFG";
		var charArray = s.toCharArray();
		charArray.show();//A,B,C,D,E,F,G
		
		//reverse() 反转一个字符串 
		var ss = "12345689";
		var newStr = ss.reverse();
		newStr.show();//98654321
		
		//reverseMoreSimple()也是反转一个字符串，但实现更简单 
		var sss = "abcdefg";
		var newString = sss.reverseMoreSimple();
		newString.show();//gfedcba
	</script>
</head>
<body>

</body>
</html>

=================================================================================

<script type="text/javascript">
	//扩展： 字符串的prototype 原型属性 
	
	//通过字符串的prototype原型， 对字符串对象的功能进行扩展
	//注意：只能通过原型添加功能 
	
	String.prototype.trim = function() {
		var start,end;
		start = 0;
		//this指代调用该匿名函数的对象
		end = this.length-1;
		//空格的code为32 ， 也可以直接用 " "来表示 
		//去除字符串左边的空格 
		while(start<=end && (this.charCodeAt(start)==32)) {
			++start;
		}
		//去除字符串右边的空格 
		while(start<=end && (this.charCodeAt(end)==32)) {				
			--end;
		}
		//注意 ：截串时包头不包尾 ，所以end+1
		return this.substring(start,end+1);
	}
	
	var s = " abc  ";
	sop("("+s+"),length="+s.length);
	//调用手动添加到字符串原型中的新功能，与调用字符串本身的方法一样，直接对象调用即可   
	var ss = s.trim();
	sop("("+ss+"),length="+ss.length);
	
</script>