prototype属性的用法演示
返回对象类型原型的引用。
objectName.prototype
objectName 参数是对象的名称。
JS是基于对象的,用对象的时候都是临时去读取复制原型的,这个属性,就是改变那个原型的。
用 prototype 属性提供对象的类的一组基本功能。 对象的新实例“继承”赋予该对象原型的操作。
代码演示:
<html> <head> <title>prototype属性的用法演示</title> </head> <body> <script type="text/javascript" src="out.js"> </script> <script type="text/javascript"> //※※※利用prototype更改原型时,如果属性或方法已经存在那么是修改,否则就是添加。 //※※给String原型对象添加一个属性aa String.prototype.aa=100; var str = "abc123"; println( str.aa ); println( "aw12".aa );//只要是String型的,都能调用aa,结果都是100 </script> <script type="text/javascript"> //※※给String原型对象添加一个函数---以trim()为例--去前后空格 //☆☆过渡版 function trim(str){ var start=0; var end = str.length-1; while(start<=end && str.charAt(start)==' '){ start++; } while(start<=end && str.charAt(end)==' '){ end--; } return str.substring(start,end+1); } println( trim(" ewwewe ewwewe ") ); //println( " ewwewe ewwewe ".trim() ); </script> <!-- <script type="text/javascript"> //※※给String原型对象添加一个函数---以trim()为例 //不用传参,将str改为this就可以了。 //☆☆法1---用非匿名函数 function trim(){ var start=0; var end = this.length-1; while(start<=end && this.charAt(start)==' '){ start++; } while(start<=end && this.charAt(end)==' '){ end--; } return this.substring(start,end+1); } String.prototype.trim=trim;//给原型对象添加一个trim()方法 println( " yyy 666 ".trim() ); </script> --> <script type="text/javascript"> //※※给String原型对象添加一个函数---以trim()为例 //☆☆法2---用匿名函数 String.prototype.trim= function(){ //给原型对象添加一个trim()方法 var start=0; var end = this.length-1; while(start<=end && this.charAt(start)==' '){ start++; } while(start<=end && this.charAt(end)==' '){ end--; } return this.substring(start,end+1); }; println( " yyrry 666888 ".trim() ); var sstr = new String(" www eee "); println( sstr.trim() ); </script> </body> </html>
360浏览器8.1 演示结果:
prototype扩展:
我们现在扩展一下,假如我们先写好js,再导入,就可以直接用我们自己写的那个函数,那个值了。
<html> <head> <title>利用prototype属性给API进行功能扩展</title> </head> <body> <script type="text/javascript" src="out.js"> </script> <script type="text/javascript" src="stringtools.js"> </script> <script type="text/javascript"> var str=" hjdsh "; println( str.trim() );//去掉字符串前后空格 println( str.toCharArray() );//字符串转换为字符数组 var str2 = "abc123"; println( str2 ); println( str2.reverse() );//字符串反转输出 </script> </body> </html>
stringtools.js的代码:
//给原型对象添加一个trim()方法 String.prototype.trim = function() { var start = 0; var end = this.length - 1; while (start <= end && this.charAt(start) == ' ') { start++; } while (start <= end && this.charAt(end) == ' ') { end--; } return this.substring(start, end + 1); }; // 给原型对象添加一个toCharArray()方法 String.prototype.toCharArray = function() { var chs = []; for ( var x = 0; x < this.length; x++) { chs[x] = this.charAt(x); } return chs; }; // 给原型对象添加一个reverse()方法 String.prototype.reverse = function() { //☆☆js中,函数当中可以再定义函数--内部函数 function swap(arr,x,y){ var temp = arr[x]; arr[x] = arr[y]; arr[y] = temp; } var arr = this.toCharArray(); for(var x=0,y=arr.length-1; x<y; x++,y--){ swap(arr,x,y); } return arr.join("");//join(str)方法-返回字符串,str就是连接数组元素之间的符号。 };
360浏览器8.1 演示结果:
Array对象使用方法
代码演示:
<html> <head> <title>Array对象使用方法演示</title> </head> <body> <script type="text/javascript" src="out.js"> </script> <script type="text/javascript"> var arr=["aaa","bbb","ccc","ddd"]; println(arr); var arr2=["111","222","333","okok"]; var newArr = arr.concat(arr2); println(newArr); println(newArr.join("-")); println("<hr/>"); //pop() : 移除数组中的最后一个元素并返回该元素。 println( newArr.pop() ); println(newArr); //push() : 将新元素添加到一个数组中,并返回数组的新长度值。 arr.push("x1",arr2,"x2");//注意1,arr2在arr当中是一个元素---即arr变成二维数组。注意2,push方法会改变原来的数组。arr长度为:9 println(arr+"----二维数组了"); println(arr.length); //arr.push("y1",arr2,"z1");//注意1,arr2在arr当中是一个元素---即arr变成二维数组。注意2,push方法会改变原来的数组。arr长度为:9 arr=arr.concat("y1",arr2,"z1"); //注意1,该方法会把数组arr2当中的每个元素取出来,分别添加到arr当中---arr还是一维数组 //注意2,concat方法不会改变原来的数组,连接结果以新数组的形式返回。旧arr的长度还是6,新arr的长度是12 println(arr); println(arr.length); arr.sort(); println(arr); arr.splice(1, 3, "u1","u2","u3","u4","u5");//从1位置开始,删掉3个元素,并且在删除的位置插入:"u1","u2","u3","u4","u5" println(arr); //※※※做栈和队列的提示 //unshift---addFirst concat--addLast() shift---removeFirst() pop---removeLast() //Array.prototype.addFirst=unshift; </script> <script type="text/javascript" src="arraytools.js"> </script> <script type="text/javascript"> var arr=["aaa","bbb","ccc","ddd"]; var max = arr.getMax(); println(max); println(arr); </script> </body> </html>
arraytools.js代码:
//给原型对象添加一个getMax()方法 Array.prototype.getMax = function() { var temp=0; for(var x=1;x<this.length;x++){ if(this[x]>this[temp]){ temp = x; } } return this[temp]; }; Array.prototype.toString = function() { return "["+this.join("")+"]"; };
360浏览器8.1 演示结果:
prototype属性真的很强大~~~