`
schy_hqh
  • 浏览: 558398 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

javascript中的原型prototype的应用

 
阅读更多

通过操作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>

 

分享到:
评论

相关推荐

    JavaScript中的prototype(原型)属性研究

    在JavaScript中,每个函数都有一个prototype属性,这个属性指向一个对象,这个对象就是所谓的原型对象。当我们创建一个函数实例时,实例会自动获取一个内部属性[[Prototype]],这个属性通常通过`__proto__`或者`...

    JavaScript中的原型prototype完全解析

    JavaScript中的原型和prototype是理解该语言面向对象机制的核心概念之一,它支撑着JavaScript的“一切皆对象”的编程范式。接下来,我们将详细解析JavaScript中的原型和prototype,以及与之密切相关的__proto__属性...

    详解JavaScript中基于原型prototype的继承特性_.docx

    JavaScript中的原型(prototype)机制是实现继承的一种核心方式。由于JavaScript是一种基于原型的面向对象语言,它不支持传统的类(class)概念,因此其继承机制显得与众不同。在JavaScript中,对象可以直接从另一个...

    深入学习JavaScript中的原型prototype

    javascript 是一种 prototype based programming 的语言, 而与我们通常的 class based programming 有很大 的区别,我列举重要的几点如下: 1.函数是first class object, 也就是说函数与对象具有相同的语言地位 2.没有...

    JavaScript中的prototype原型学习指南

    Function 类型有一个属性 prototype,直接翻译过来就是原型。这个属性就是一个指针,指向一个对象,这个对象包含一些属性和方法,这些属性和方法会被当前函数生成的所有实例(对象)所共享。 这句话根据前面所说的,...

    了解JavaScript中的prototype (实例)

    JavaScript中的`prototype`是理解面向对象编程的关键概念之一。它是一种机制,允许对象共享属性和方法,从而实现代码复用。在JavaScript中,每个函数(包括构造函数)都有一个内置的`prototype`属性,这个属性指向一...

    javascript prototype原型操作笔记.docx

    ### JavaScript Prototype原型操作知识点 #### 一、Prototype基础概念 **Prototype** 在 JavaScript 中是一个非常重要的概念,它支持面向对象编程中的继承特性。每个 JavaScript 对象都有一个内部属性 `[...

    JavaScript_Prototype(源代码+中文手册).rar

    这个压缩包文件“JavaScript_Prototype(源代码+中文手册).rar”包含了关于JavaScript原型的源代码和中文手册,为学习和理解这一主题提供了丰富的资源。 JavaScript是一种动态类型的语言,其核心特性之一就是原型...

    javascript 原型模式实现OOP的再研究

    JavaScript中的原型模式是一种实现面向对象编程(OOP)的关键机制,它基于原型继承,使得对象可以从其他对象那里获得属性和方法。在这个模式下,每个函数都有一个`prototype`属性,这个属性是一个对象,用于共享属性...

    JavaScript的prototype

    JavaScript中的`prototype`是一个核心概念,它涉及到对象继承和函数原型。在JavaScript中,每创建一个函数,该函数就会自动获得一个名为`prototype`的属性,这个属性是一个对象,用于实现对象间的继承。同时,每个...

    JavaScript原型链

    JavaScript原型链是JavaScript语言中的一个核心特性,它关乎对象之间的继承关系。在JavaScript中,一切皆为对象,而原型链则是实现对象间属性和方法共享的一种机制。理解原型链对于深入学习JavaScript至关重要。 ...

    JavaScript彻底理解JavaScript原型PDF

    彻底理解 JavaScript原型 原型是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有"[[prototype]]"属性,函数对象有"prototype"属性,原型对象有"constructor"属性。 为了弄清原型,以及原型相关的...

    Advanced JavaScript (closures,prototype,inheritance)

    JavaScript,作为一种广泛应用于Web开发的脚本语言,其高级特性如闭包(closures)、原型(prototype)和继承(inheritance)是理解其精髓的关键。本文将深入探讨这些概念,帮助开发者更好地掌握JavaScript的核心。 ...

    原型设计模式prototype

    例如,Spring框架中的`Prototype`作用域,可以配置bean为原型类型,每次请求都会返回一个新的实例。 ### 扩展与变体 1. **浅拷贝**与**深拷贝**:浅拷贝只复制对象本身,而不复制它引用的对象;深拷贝不仅复制对象...

    JavaScript中的原型prototype属性使用详解

    同时,如果在实例中直接设置与prototype中同名的属性,则会覆盖prototype中定义的属性。 在文章中提供的实例中,定义了一个构造函数book(),它接受title和author两个参数。随后,我们通过book.prototype.price=null...

    JavaScript中prototype的使用

    JavaScript中的`prototype`属性是实现面向对象编程的关键概念之一,尤其在JavaScript中,它用于实现对象的继承。本文将深入探讨`prototype`的含义、作用以及如何使用。 1. **什么是prototype** 在JavaScript中,每...

    prototype_oop_javascript_ruby_prototype_

    在处理"prototype.rb"这个文件时,可能是在Ruby中实现了一个类似于JavaScript原型的模式,或者是探讨如何在Ruby中模拟JavaScript的原型行为。具体的内容将取决于文件的实际代码。学习这种跨语言的编程思想可以帮助...

    【技术分享】从浅入深 Javascript 原型链与原型链污染 .pdf

    本文将深入探讨JavaScript原型链的工作原理及其可能导致的安全问题——原型链污染。 首先,JavaScript 中的对象继承并不像传统面向对象语言那样基于类,而是通过原型链机制。每个对象都有一个内部属性`[[Prototype]...

Global site tag (gtag.js) - Google Analytics