在Javascript基础中,Prototype

分享于 

9分钟阅读

Web开发

  繁體

什么是 Prototype?

Prototype属性允许你向对象添加属性和方法。

  • Prototype是函数对象的一个属性。
  • 只有函数对象可以具有Prototype属性。

函数

  • 是对象。
  • 返回值。
  • 可以返回对象,包括其他函数。
  • 它们有属性。
  • 他们有方法。
  • 可以复制,delete,增强。

例如:


var foo = function() { };


Console.log(foo.prototype); // Output: Object {}



什么

用新关键字创建的任何内容都是一个对象

例如:


new String("hi");


new Object();


new Array();


Person = function(name) { 


 this.name = name


}


Me = new Person("Imdadhusen");



对象会使代码更加简洁和易于维护,它代表了整个函数或者代码 block的上下文。


var timer = { start: 1000, stop: 2000 }; 



当你在一段时间后重温代码时,要记住或者映射为什么使用 2000是有点困难的。 但是,如果维持一个对象并说'停止',那么你可以识别它的意义。

Prototype的好东西

  • 鼓励模块化和可用性
  • 为( 不同) 事件提供一致的方法
  • 使代码保持最小
  • 简化复杂性

扩充 Prototype

将构造函数,属性和方法添加到Prototype对象中。


// instantiates an object of foo


var myfoo = new foo(); 


//Access Method of foo


console.log(myfoo.SayHello("Imdad")); // Output"Hello Imdad!"


//Access Property of foo


console.log(myfoo.Name); // Output"Imdad!" 



Prototype示例

  • 字符串
  • 号码
  • 日期
  • Array
  • 函数
    • 使用纯 JavaScript
    • 使用 jQuery

字符串

String.prototype 属性代表字符串构造函数的Prototype

示例:


//Get File Name with Extension from Full Path


alert("C:wwwscriptsviewsUtils.js".getFileName()); //Output: Utils.js


String.prototype.getFileName = function(){


 return this.match(/[^/]+.[^/]+$/)[0];


}



alert("imdad{0}".isValidName()); //Output: false


//Username should be minimum 3 char and maximum 15 and it allowed 


//only (. -_$@*) special characters.


String.prototype.isValidName = function() {


 var regex =/^[a-zA-Z0-9. -_$@*!]{3,15}$/;


 return regex.test(this);


}



alert("imdad@yahoo.com".isValidEmail()); //Output: true


//Checking email is valid or not


String.prototype.isValidEmail = function() {


 var regex =/^w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$/;


 return regex.test(this);


}



号码

Number.prototype 属性代表数字构造函数的Prototype

示例:


var start = 100;


var end = 200;


var value = 150;


if(value.isInRange(start,end)) //Output: 'Value is in Range'


 alert('Value is in Range');


else


 alert('Value is not in Range');



//Validate number only and within range


Number.prototype.isInRange = function(start,end){


 this.Min = start||100;


 this.Max = end||200;


 return (this.Max> = this.valueOf() && this.Min <= this.valueOf());


}



日期

Date.prototype 属性表示日期构造函数的Prototype

示例:


var dt = new Date();


alert(dt.shortDate()); //Output: Fri, 2 May 14


alert(dt.fullDate()); //Output: Friday, 2 May 2014



Date.prototype.dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];


 Date.prototype.monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];



 Date.prototype.fullDay = function() {


 return this.dayNames[this.getDay()];


 };


 Date.prototype.shortDay = function() {


 return this.fullDay().slice(0, 3);


 };



 Date.prototype.fullMonth = function() {


 return this.monthNames[this.getMonth()];


 };


 Date.prototype.shortMonth = function() {


 return this.fullMonth().slice(0, 3);


 };


 Date.prototype.shortYear = function() {


 return this.getFullYear().toString().substr(2,2);


 };



 Date.prototype.shortDate = function() {


 return this.shortDay() +', '+ this.getDate() +' '+ this.shortMonth() +' '+ this.shortYear();


 }



 Date.prototype.fullDate = function() {


 return this.fullDay() +', '+ this.getDate() +' '+ this.fullMonth() +' '+ this.getFullYear()


 }



Array

Array.prototype 属性代表 array 构造函数的Prototype

示例:


//Define list of users in Array for remove by index and key/pair value


var users = new Array(


 { 'Country' : 'India', 'Code' : '+91'},


 { 'Country' : 'Afghanistan', 'Code' : '+93'},


 { 'Country' : 'Bhutan', 'Code' : '+975'},


 { 'Country' : 'Brazil', 'Code' : '+55'},


 { 'Country' : 'China', 'Code' : '+86'},


 { 'Country' : 'Egypt', 'Code' : '+20'},


 { 'Country' : 'Greece', 'Code' : '+30'}


 );


users.renderList('#olUsersList'); //Render list of all users with index on order list (olUsersList)



//Remove user by Index (4) start with 0


users.removeByIndex(4);


//Refresh users list


users.renderList('#olUsersList');



//Remove user by Key (Country) and Value (Bhutan)


var key = 'Country';


var val = 'Bhutan';


users.removeByObject(key, val);


//Refresh users list


users.renderList('#olUsersList');



Array.prototype.removeByIndex = function(index) {


 this.splice(index, 1);


 return this;


 }


 Array.prototype.removeByObject = function(key, val) {


 var getUser = this.getObject(key, val);


 if(getUser!== null)


 this.splice(getUser.index, 1);


 return this;


 }


 Array.prototype.getObject = function(key, val) {


 for (var i=0; i <this.length; i++)


 {


 if (this[i][key] == val)


 return { 'index': i, 'obj' : this[i] };


 }


 return null;


 };


 Array.prototype.renderList = function(ele) {


 $(ele).empty();


 this.forEach(function(item) {


 $(ele).append('<li>'+>('+ item.Code +')');


 });


 }


</li>'+>



使用jQuery功能

使用jquery我们可以扩展我们的函数对象。 示例:

jQuery.fn.extend({


 setScrollbar: function(height) {


 return this.css({'overflow' : 'auto', 'height': height});


 }


});



$(document).ready(function(){


 $('#btnApplyjQueryScroll').click(function(){


 $('#dvScoll_jQuery').setScrollbar(250);


 });


});



使用纯JavaScript的函数

你可以使用纯JavaScript创建自己的自定义控件。 示例:

function myScroll(ele){


 this.element = document.getElementById(ele);


}


myScroll.prototype.setScrollbar = function(height){


 this.element.style.height = height + 'px';


 this.element.style.overflow = 'auto';


}



$(document).ready(function(){


 $('#btnApplyJSScroll').click(function(){


 var t = new myScroll('dvScoll_JS');


 t.setScrollbar(150);


 });


});



我已经展示了 上面 所有的例子都是初级的开发者。 他们将更清楚地了解Prototype在每个数据类型中的作用。 如果你想了解更多信息,请告诉我。

相关文章