當前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
JS高级程序设置笔记(二)
生活随笔
收集整理的這篇文章主要介紹了
JS高级程序设置笔记(二)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
5.4 RegExp類型 用這個類來表示正則表達式。 var expression = /pattern/flags; pattern部分是任何簡單的或者復雜的正則;每一個正則都有一個或者多個標志。 正則表達式匹配模式下支持下列3個標示 1:g 全局模式 2:i 不區(qū)分大小寫 3:m 表示多行 ? 5.4.1RegExp實例屬性: 1:global:布爾值,表示是否設(shè)置了g標志。 2:ignoreCase:布爾值:表示是否設(shè)置了i標志 3:lastIndex:整數(shù),表示開始搜索下一個匹配的字符位置,從0算起。 4:multiline 布爾值:表示是否設(shè)置了m標志 5:source:正則表達式的字符串表示。 5.4.1RegExp實例方法 該對象的主要方法是exec(),用來補貨組 接收一個參數(shù)。返回的數(shù)組雖然是Array的實例,單包含了兩個額外的屬性index(位置) 和 input(正則表達式)? function num(){
var text = "mom and dad and baby";
var pattern=/mom( and dad (and baby)?)?/gi;
var matches = pattern.exec(text);
document.write(matches.index);
document.write(matches.input);
document.write(matches[0]);
document.write(matches[1]);
document.write(matches[2]);
}
num(); 5.4.3?RegExp構(gòu)造函數(shù)屬性 RegExp構(gòu)造函數(shù):
長屬性名 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 短屬性名 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 說明
input ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $_ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 最近一次要匹配的字符串。 lastMatch ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$& ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 最近一次的匹配項。 LastParent ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $+ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?最近一次匹配的捕獲組 LeftContext ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $` ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?input字符串中l(wèi)astMatch之前的文本 multiline ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $* ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?布爾值,表示是否所有表達式都使用多行模式。 rightContext ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$' ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? input字符串中l(wèi)astMatch之后的文本
RegExp構(gòu)造函數(shù)的各個屬性返回了下列的值 input:屬性返回了原始字符串 leftContext:返回了單詞short之前的字符串,而rightContext返回了之后的字符串 lastMatch:屬性返回最近一次與整個正則表達式匹配的字符串 LastParent:屬性返回最近一次匹配的捕獲組 ? 5.4.4 模式的局限性 下面列出了正則不支持的特性
? 5.5 function類型 ? 每個函數(shù)都是function類型的實例 function sum(num1,num2){
return num1+num2;
};
var sun=function(num1,num2){
return num1+num2;
} 5.5.1沒有重載(深入理解) 在JS中是沒有方法的重載的,如果有兩個相同命名的函數(shù),后面的函數(shù)會覆蓋前面的函數(shù) ? 5.5.3 作為值的函數(shù) 函數(shù)本身就是一個變量,所以函數(shù)也可以用值來使用,可以將一個函數(shù)作為另一個函數(shù)的返回結(jié)果 function callSomeFunction(someFunction,someArgument){
return someFunction(someArgument);
}
function add10(num){
return num+10;
}
var result = callSomeFunction(add10,10);
alert(result); 5.5.4函數(shù)的內(nèi)部屬性 在函數(shù)內(nèi)部有兩個特殊的屬性:arguments(包含參數(shù)的數(shù)組)和this() arguments是一個類數(shù)組對象,包含著傳入函數(shù)中的所有參數(shù)。這個對象還有一個特殊的屬性叫做callee的屬性 該屬性是一個指針,擁有指向這個對象的函數(shù): 例子:求一個數(shù)的階乘 //階乘 遞歸函數(shù)
function factorial(num){
if(num>=1){
return 1;
}else{
return num*factorial(num-1);
}
}; 耦合性太強,消除耦合性 function factorial(num){
if (num >= 1) {
return 1;
} else {
return num * arguments.callee(num-1);
}
};
</script> 使用了arguments.callee方法: callee是arguments的一個屬性成員,他表示函數(shù)的對象本身的引用,這有利于匿名。 ? 函數(shù)體內(nèi)的另一個對象是this.this指的就是環(huán)境對象,this就是對象Window 例子: window.color="red"; var o = {color:"blue"}; ? function sayColor(){ ? ? ?alert(this.color)//輸出的是window的顏色 } ? ECMAScript5規(guī)范了另一個函數(shù)對象的屬性:caller 用來返回調(diào)用者 ? 5.5.5函數(shù)屬性和方法 length:表示函數(shù)希望接收的命名參數(shù)的個數(shù) 每個函數(shù)都包含兩個非繼承而來的方法:apply()和call()用來設(shè)置函數(shù)體this內(nèi)的值。 call():調(diào)用一個對象的一個方法,以另一個對象替換當前對象,說明:call方法可以用來代替另一個方法。 apply()接收兩個參數(shù),一個是在其中運行的作用域,另一個是參數(shù)數(shù)組。 call()與apply()的作用相同,他們的僅是在接參數(shù)不同。第一個是this,剩下的全部傳遞給函數(shù)。 ECMAScript5 定義了一個新的方法:bind():這個方法會創(chuàng)建一個函數(shù)的實例,其this值會被綁定到傳給bind()函數(shù)的值。例如:
window.color="red"; var o ={color:"blue"} function sayColor(){ ? ?alert(this.color); } var objectSayColor = sayColor.bind(o); objectSayColor();//blue; ? 5.6基本包裝類型 為了便于操作基本類型值 ECMAScript提供了3個特殊的引用類型:boolean,Number和String
訪問過程出于一種讀取模式,也就是要存內(nèi)存中讀取這個字符串的值。味雜讀取模式中訪問字符串時,后臺都會完成下列處理(1)創(chuàng)建String類型的一個實例 (2)在實例上調(diào)用指定的方法: (3)銷毀這個實例 5.6.1Boolean類型 建議永遠不要使用boolean對象 5.6.3 String類型 定義String對象的語法 var StringObject = new String("hello world"); alert(StringObject.length);//"11" 1:字符方法: 兩個用于訪問字符串中特定的方法是:chatAt(),chartCodeAt(); 一個用于返回查找位置的字符,另一個返回該字符的字符編碼。 var string ="hello"; string.charAt(1)//e string.chartCodeAt(1);//101e的字符編碼 ? 2:字符串操作方法 concat()方法,用于將一或多個字符串拼接起來,返回拼接得到的新字符串。 var string="hello"; string.concat("world"); alert(string);//hello world ECMAScript還提供了三個基于字符串創(chuàng)新的方法:slice()、sbuString()、sbustr();
接受兩個參數(shù),一個是起始位置,另一個是結(jié)束位置。 就是對原有字符串進行截取,并形成一個新的字符串,不會對原有的字符串進行改變 3:字符串位置方法:indexof(),lastIndexOf() 前一個方法是返回搜索的值在原有字符串中的位置,如果有多個同樣的搜索值,他只會返回第一個值得位置; 后一個方法顧名思義就是返回搜索值在原有字符串中最后一次出現(xiàn)的位置。 接收兩個參數(shù),第一個是要搜索的值,第二個是起始位置 4:trim()方法 ECMAScript5為所有字符串定義了trim()方法。
使用這個方法會刪除原有字符串前置和后置所存在的字符串,然后產(chǎn)生一個類似副本的新字符串。 5:字符串大小寫 有四個方法: 轉(zhuǎn)換成大寫:(1)toUpperCase()(2)toLocaleUpperCase() 轉(zhuǎn)換成小寫:(1)toLowerCase()(2)toLocaleLowerCase() 6:字符串的模式匹配方法: match()只接受一個參數(shù),要么是一個正則表達式,要么是一個RegExp 用來匹配正則里的值 search()返回字符串中第一個匹配的索引;如果沒有找到匹配項,返回-1; replace():接收兩個值,第一個是索引的值,第二個是需要替換的值。 7:localeCompare()方法: 用于字符串之間的比較; 5.7單體內(nèi)置對象: 已經(jīng)存在了的對象,在程序之前,他們已經(jīng)實例化過了,例如object,Array和String。 5.7.1global對象 全局對象所有在全局作用域中定義的屬性和函數(shù),都是Global對象的屬性 isNaN,isFinite(),parseInt(),parseFloat()全是Global的方法 1:URI編碼方式:通用資源標識符 encodeURI() encodeURIComponent()方法可以針對URI進行編碼,以便發(fā)給瀏覽器 2:eval()方法 一個完整的ECMAScript的解析器 只接受一個參數(shù)及要執(zhí)行的ECMAScript的字符串 3:global對象的屬性 不能給undefined NaN和infinity賦值, 4:window對象 是BOM中所有對象的核心 5.7.2Math對象()數(shù)學方法 min()和max()方法,用于確定一組數(shù)值中的最大值和最小值的方法 例: var min = Math.min(1,2,3);//1 var max = Math.Max(1,2,3);//3 ? 3:舍入方法 Math.ceil()向上舍入,取大的25.1取26 Math.floor()向下舍入 取小的25.9取25 Math.round()執(zhí)行標準舍入 四舍五入 4:random() 產(chǎn)生隨機數(shù) selectFrom(x,y)隨機抽出X-Y中的一個值,總數(shù)是ifx>y x-y+1個 ? 6:面向?qū)ο蟮某绦蛟O(shè)計 類和對象的區(qū)別,類是抽象的,對象是具體的,例如:手機是一個大類,蘋果6手機就是一個對象,一個是很高層面的理解,另一個又是很基礎(chǔ)的理解。對象是特定類的一個實例 屬性是對象固有的:如:車有最大馬力,重量等等,方法是對象能干什么,比如車能啟動來開,大方形盤就能轉(zhuǎn)向等等。 6.1理解對象 //創(chuàng)建一個對象
var person={
name:"gavin",
age:"23",
job:"IT engineer"
}
person.sayHey=function(name){
alert("Hello"+name);
}
document.write(person.age+person.job+person.name);
person.sayHey("JJ"); 用這段代碼來理解對象、屬性、方法: 這里的對象是一個person 它是object類的一個實例 他有三個屬性、名字、年紀、工作、 他還有他一個方法,可以理解成這個對象能干什么,他可以說HELLO to "someone"這里的some需要你給它提供參數(shù) 6.1.1屬性類型 1:數(shù)據(jù)類型: 數(shù)據(jù)屬性包含一個數(shù)據(jù)值的位置。在這個位置上可以讀取和寫入值,數(shù)據(jù)屬性有4個描述其行為的特性 [configurable]:表示能否通過delete刪除屬性從而重新定義屬性 [Enumerable]:表示能否通過for-in循環(huán)返回屬性 [Writable]:表示能否修改屬性的值 [Value]:包含這個屬性的數(shù)據(jù)值 要修改屬性默認的屬性,必須使用一個神奇的方法 object.defineProperty() 這個神奇的方法可以接受三個值:屬性所在的對象,屬性的名字和一個描述符的對象 Object.defineProperty(person,"name",{
writable:true,//這里如果填的是false 的話就不能通過.屬性來沖新設(shè)置值了例:person.name="gavin"//不會修改屬性
value:"zhihao"
});
person.name="gavin"; 2:訪問器屬性 可以通過設(shè)置get 和set方法來獲取或者設(shè)置對象的屬性的值 Object.defineProperty(person,"age",{
get :function(){
return this.age;
},
set:function(val){
this.age=val;
}
}); 6.1.2定義多個屬性 使用Object。defineProperties()方法 var book={};
Object.defineProperties(book,{
_year:{
value:2004
},
_edition:{
value:1
},
year:{
get:function(){
return this._year;
},
set:function(NewValue){
if(NewValue>2004){
this._year=NewValue;
this._edition+=NewValue-2004;
}
}
}
}) 6.1.3讀取屬性的特征: var d = Object.getOwnPropertyDescriptor(book,"_year"); 6.2創(chuàng)建對象 6.2.1工廠模式: 把一個對象封裝起來,只留了一個接口,可以通過接口傳入?yún)?shù)來更改對象的值。 6.2.2構(gòu)造函數(shù)模式 function Person(name,age,job){
this.name=name;
this.age=age;
this.job=job;
this.sayHi=function(someOne){
alert(this.name+"say Hello to"+someOne);
}
} 用java的編程思想來理解這個:創(chuàng)建了一個Person類,而不是再使用Object類,他其實就相當于一個框架,this相當于當前的類,我們可以通過New 來創(chuàng)建一個Person類的對象 1:當構(gòu)造函數(shù)調(diào)用 function Person(name,age,job){
this.name=name;
this.age=age;
this.job=job;
this.sayHi=function(someOne){
alert(this.name+"say Hello to"+someOne);
}
}
var person = new Person("gavin",23,"it");
document.write(person.age+" "+person.name+" "+person.job); 2:當普通函數(shù)調(diào)用 Person("a",2,"a");//添加到window window.sayName(); ? 6.2.3原型模式prototype(原型)屬性。 這個屬性是一個指針,指向一個對象,這個對象的用途是包含可以由特定類型的所有實例共享的屬性和方法。 個人的理解方法: 你玩游戲有一個大號,有一個倉庫,倉庫里有很多錢、裝備之類的,然后你又用這個賬號創(chuàng)建了一個小號,這個小號就能使用這個倉庫里的所有東西。 function Person(){
Person.prototype.name="gavin";
Person.prototype.age=23;
Person.prototype.job="software engineer";
Person.prototype.sayName=function(){
aler(this.name);
}
} 這就是一個原型的構(gòu)造函數(shù)。 我們可以以這個原型類創(chuàng)建對象,當我們?yōu)樽约簞?chuàng)建的對象付新值得時候,原型構(gòu)造函數(shù)里的函數(shù)值并沒有被改變,只是被屏蔽了。換句話說就是,新建的對象中的屬性會阻礙我們看到原型中的屬性。當我們使用delete操作符刪除了我們自己定義的屬性之后,原型中的屬性又可以重新正常顯示了, 我們可以用hasOwnProperty()方法來檢測值是來自于原型還是來自于自定義,原型的話返回值是false,自定義的話返回值是true。 ? 2:原型與in操作符: in操作符只要能通過對象能夠訪問到屬性就返回true,hasOwnPeoperty()只在屬性存在于實例中才返回ture,只要in返回true,hasOwnPeoperty()返回false就能確定屬性是原型中的屬性。 hasPrototypeProperty()接收兩個參數(shù),一個是對象,一個是屬性,如果屬性是原型中的就返回true,如果重寫了屬性的值,就返回false; ?要取得對象上所有可枚舉類的實例屬性,可以使用ECMAScript5中的object.key()方法,這個方法接收一個對象作為參數(shù),返回一個包含所有可枚舉屬性的字符串數(shù)組。 3:更簡單的原型語法: function Person(){}
Person.prototype={
name:"gavin",
age:23,
job:"software engineer",
sayName:function(){
alert(this.name);
}
} 和上面的創(chuàng)建方法有一點不同的是constructor屬性不在指向這個Person了。 如果constructor值真的很重要,我們可以加上他 constructor:Person,
? 4:原型的動態(tài)性 當我們先創(chuàng)建一個對象再重新寫了原型類之后,對象的調(diào)用就會出現(xiàn)問題。 ? 6.2.4 組合使用構(gòu)造函數(shù)模式和原型模式: 把自己特有的東西寫進構(gòu)造函數(shù)里,把公用的方法提出來用原型的方法去寫 function Person(name,age,job){
this.name=name;
this.age=age;
this.job=job; } Person.Prototype={ ? constructor:person, ? sayName:function(){ ? ?alert(this.name); } } 所有屬性都是再構(gòu)造函數(shù)中完成的,方法都是再原型中完成 ? 6.2.5動態(tài)原型模式 把所有信息都封裝在了構(gòu)造函數(shù)中,而通過構(gòu)造函數(shù)中初始化原型,保持了同時使用構(gòu)造函數(shù)和原型的優(yōu)點??梢酝ㄟ^檢查某個應該存在的方法是否有效。來決定是否要初始化原型。 6.2.6寄生構(gòu)造函數(shù)模式 基本思想,創(chuàng)建一個函數(shù),該函數(shù)的作用僅僅是封裝創(chuàng)建對象的代碼,然后再返回新的創(chuàng)建對象;但是從表面上來看,就和構(gòu)造函數(shù)是差不多的。在構(gòu)造函數(shù)內(nèi)部又創(chuàng)建了一個object類的對象,對這個對象進行操作,然后返回這個函數(shù) 6.2.7穩(wěn)妥構(gòu)造函數(shù)模式 穩(wěn)妥對象這個概念。所謂穩(wěn)妥對象,指的是沒有公公屬性,而且方法也不引用this的對象。穩(wěn)妥對象最適合在一些安全的環(huán)境中。 6.3:繼承 繼承的兩種方式,接口繼承和實現(xiàn)繼承。接口繼承只繼承方法簽名,而實際繼承則繼承繼承實際的方法。 6.3.1原型鏈 基本思想是利用原型讓一個引用類繼承另一個引用類的屬性和方法。 ? 6.3.2借用構(gòu)造函數(shù) 基本思想,在子類型構(gòu)造函數(shù)的內(nèi)部調(diào)用超類型構(gòu)造函數(shù)。 函數(shù)只不過是在特定環(huán)境中執(zhí)行代碼的對象,因此通過使用apply()和call()方法可以在新創(chuàng)建的對象上執(zhí)行構(gòu)造函數(shù)。 ? 6.3.3組合繼承 使用原型鏈實現(xiàn)對原型屬性和方法復用,又能夠保證每個實例都有它自己的屬性。、 6.3.4原型式繼承 思想是借助原型可以基于已有的對象創(chuàng)建新對象,同時還不用因此創(chuàng)建自定義類型 形象的說就是站在巨人的肩膀上摘蘋果,前提是必須有一個巨人。 var Person = {
name: "gavin",
friends: ["a", "b", "c"]
};
var onePerson = Object(Person);
onePerson.name = "zzh";
onePerson.friends.push("d");
var otherPerson = Object(onePerson);
otherPerson.name = "zzh";
otherPerson.friends.push("E");
alert(Person.friends); 會豐富模板 ? 7函數(shù)表達式: 定義函數(shù)的方式有兩種:一種是函數(shù)聲明,另一種是函數(shù)表達式。 函數(shù)聲明的語法: function functionName(arg0,....){ ? ?//函數(shù)體 } 函數(shù)聲明提升:就是在執(zhí)行代碼之前就會先讀取函數(shù) ?sayHi(); ?function sayHi(){ ? alert("Hi!"); } ? 第二種創(chuàng)建函數(shù)的方式是使用函數(shù)表達式。函數(shù)表達式有幾種不同的語法形式,最常見是: var functionName=function(arg1....){ ? ? ? ? ? ? //函數(shù)體 } 匿名函數(shù):創(chuàng)建一個函數(shù)并賦值給一個變量,因為function關(guān)鍵字后面沒有標識符 函數(shù)表達式和其他表達式不一樣,一定要先聲明后引用 函數(shù)聲明和函數(shù)表達式的區(qū)別:函數(shù)聲明可以先引用后聲明,而函數(shù)表達式一定要先聲明后引用 ? 7.1遞歸 遞歸函數(shù)是一個函數(shù)通過調(diào)用自己名字的情況下產(chǎn)生的 一個經(jīng)典的遞歸函數(shù) function factorial(num){ ? ? ? if(num<1){ ? ? ?return 1; }else{ ? ?return num*factorial(num-1); ? ? ? } } arguments.callee?指向一個正在執(zhí)行的函數(shù)指針,因此他可以用來實現(xiàn)函數(shù)的調(diào)用 在嚴格模式下不能使用這個函數(shù),會導致錯誤,可以用命名函數(shù)來達成相同的結(jié)果 var factorial=(function f(num){? ?? ?if(num<1){ ? ? ?return 1; }else{ ? ?return num*f(num-1); ? }) ? 7.2 閉包 ? ? 首先基本上所有的編程語言都有類似的特性,局部方法可以訪問外部父類方法的屬性,也就是說,子類或子方法可以訪問父類的資源。
就是在一個函數(shù)內(nèi)創(chuàng)建一個子函數(shù),這個子函數(shù)是用來得到他父元素的屬性值得,設(shè)置一個返回值就是父元素的屬性,然后外部調(diào)用這個函數(shù)的內(nèi)部函數(shù),就能訪問到這個函數(shù)的屬性值了,這個函數(shù)的子函數(shù)就稱為閉包 ? function?func3(){ var?num3?=?44; function?func4(){ return?num3; } return?func4; } var?func?=?func3(); console.log(func()); {
var text = "mom and dad and baby";
var pattern=/mom( and dad (and baby)?)?/gi;
var matches = pattern.exec(text);
document.write(matches.index);
document.write(matches.input);
document.write(matches[0]);
document.write(matches[1]);
document.write(matches[2]);
}
num(); 5.4.3?RegExp構(gòu)造函數(shù)屬性 RegExp構(gòu)造函數(shù):
長屬性名 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 短屬性名 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 說明
input ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $_ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 最近一次要匹配的字符串。 lastMatch ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$& ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 最近一次的匹配項。 LastParent ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $+ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?最近一次匹配的捕獲組 LeftContext ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $` ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?input字符串中l(wèi)astMatch之前的文本 multiline ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $* ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?布爾值,表示是否所有表達式都使用多行模式。 rightContext ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$' ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? input字符串中l(wèi)astMatch之后的文本
RegExp構(gòu)造函數(shù)的各個屬性返回了下列的值 input:屬性返回了原始字符串 leftContext:返回了單詞short之前的字符串,而rightContext返回了之后的字符串 lastMatch:屬性返回最近一次與整個正則表達式匹配的字符串 LastParent:屬性返回最近一次匹配的捕獲組 ? 5.4.4 模式的局限性 下面列出了正則不支持的特性
| 匹配字符串開始和結(jié)尾的/A和/Z錨 支持插入符號(^)和美元符號($) |
| 向后查找(lookbehind)支持向前查找lookahead |
| 并集合交集類 |
| 原子組 |
| unicode支持(單個字符除外) |
| 命名的捕獲組(但是支持標號的捕獲組) |
| s(single,單行)和X (free-spacing,無間隔)匹配模式 |
| 條件匹配 |
| 使用正則表達式注釋 |
return num1+num2;
};
var sun=function(num1,num2){
return num1+num2;
} 5.5.1沒有重載(深入理解) 在JS中是沒有方法的重載的,如果有兩個相同命名的函數(shù),后面的函數(shù)會覆蓋前面的函數(shù) ? 5.5.3 作為值的函數(shù) 函數(shù)本身就是一個變量,所以函數(shù)也可以用值來使用,可以將一個函數(shù)作為另一個函數(shù)的返回結(jié)果 function callSomeFunction(someFunction,someArgument){
return someFunction(someArgument);
}
function add10(num){
return num+10;
}
var result = callSomeFunction(add10,10);
alert(result); 5.5.4函數(shù)的內(nèi)部屬性 在函數(shù)內(nèi)部有兩個特殊的屬性:arguments(包含參數(shù)的數(shù)組)和this() arguments是一個類數(shù)組對象,包含著傳入函數(shù)中的所有參數(shù)。這個對象還有一個特殊的屬性叫做callee的屬性 該屬性是一個指針,擁有指向這個對象的函數(shù): 例子:求一個數(shù)的階乘 //階乘 遞歸函數(shù)
function factorial(num){
if(num>=1){
return 1;
}else{
return num*factorial(num-1);
}
}; 耦合性太強,消除耦合性 function factorial(num){
if (num >= 1) {
return 1;
} else {
return num * arguments.callee(num-1);
}
};
</script> 使用了arguments.callee方法: callee是arguments的一個屬性成員,他表示函數(shù)的對象本身的引用,這有利于匿名。 ? 函數(shù)體內(nèi)的另一個對象是this.this指的就是環(huán)境對象,this就是對象Window 例子: window.color="red"; var o = {color:"blue"}; ? function sayColor(){ ? ? ?alert(this.color)//輸出的是window的顏色 } ? ECMAScript5規(guī)范了另一個函數(shù)對象的屬性:caller 用來返回調(diào)用者 ? 5.5.5函數(shù)屬性和方法 length:表示函數(shù)希望接收的命名參數(shù)的個數(shù) 每個函數(shù)都包含兩個非繼承而來的方法:apply()和call()用來設(shè)置函數(shù)體this內(nèi)的值。 call():調(diào)用一個對象的一個方法,以另一個對象替換當前對象,說明:call方法可以用來代替另一個方法。 apply()接收兩個參數(shù),一個是在其中運行的作用域,另一個是參數(shù)數(shù)組。 call()與apply()的作用相同,他們的僅是在接參數(shù)不同。第一個是this,剩下的全部傳遞給函數(shù)。 ECMAScript5 定義了一個新的方法:bind():這個方法會創(chuàng)建一個函數(shù)的實例,其this值會被綁定到傳給bind()函數(shù)的值。例如:
window.color="red"; var o ={color:"blue"} function sayColor(){ ? ?alert(this.color); } var objectSayColor = sayColor.bind(o); objectSayColor();//blue; ? 5.6基本包裝類型 為了便于操作基本類型值 ECMAScript提供了3個特殊的引用類型:boolean,Number和String
訪問過程出于一種讀取模式,也就是要存內(nèi)存中讀取這個字符串的值。味雜讀取模式中訪問字符串時,后臺都會完成下列處理(1)創(chuàng)建String類型的一個實例 (2)在實例上調(diào)用指定的方法: (3)銷毀這個實例 5.6.1Boolean類型 建議永遠不要使用boolean對象 5.6.3 String類型 定義String對象的語法 var StringObject = new String("hello world"); alert(StringObject.length);//"11" 1:字符方法: 兩個用于訪問字符串中特定的方法是:chatAt(),chartCodeAt(); 一個用于返回查找位置的字符,另一個返回該字符的字符編碼。 var string ="hello"; string.charAt(1)//e string.chartCodeAt(1);//101e的字符編碼 ? 2:字符串操作方法 concat()方法,用于將一或多個字符串拼接起來,返回拼接得到的新字符串。 var string="hello"; string.concat("world"); alert(string);//hello world ECMAScript還提供了三個基于字符串創(chuàng)新的方法:slice()、sbuString()、sbustr();
接受兩個參數(shù),一個是起始位置,另一個是結(jié)束位置。 就是對原有字符串進行截取,并形成一個新的字符串,不會對原有的字符串進行改變 3:字符串位置方法:indexof(),lastIndexOf() 前一個方法是返回搜索的值在原有字符串中的位置,如果有多個同樣的搜索值,他只會返回第一個值得位置; 后一個方法顧名思義就是返回搜索值在原有字符串中最后一次出現(xiàn)的位置。 接收兩個參數(shù),第一個是要搜索的值,第二個是起始位置 4:trim()方法 ECMAScript5為所有字符串定義了trim()方法。
使用這個方法會刪除原有字符串前置和后置所存在的字符串,然后產(chǎn)生一個類似副本的新字符串。 5:字符串大小寫 有四個方法: 轉(zhuǎn)換成大寫:(1)toUpperCase()(2)toLocaleUpperCase() 轉(zhuǎn)換成小寫:(1)toLowerCase()(2)toLocaleLowerCase() 6:字符串的模式匹配方法: match()只接受一個參數(shù),要么是一個正則表達式,要么是一個RegExp 用來匹配正則里的值 search()返回字符串中第一個匹配的索引;如果沒有找到匹配項,返回-1; replace():接收兩個值,第一個是索引的值,第二個是需要替換的值。 7:localeCompare()方法: 用于字符串之間的比較; 5.7單體內(nèi)置對象: 已經(jīng)存在了的對象,在程序之前,他們已經(jīng)實例化過了,例如object,Array和String。 5.7.1global對象 全局對象所有在全局作用域中定義的屬性和函數(shù),都是Global對象的屬性 isNaN,isFinite(),parseInt(),parseFloat()全是Global的方法 1:URI編碼方式:通用資源標識符 encodeURI() encodeURIComponent()方法可以針對URI進行編碼,以便發(fā)給瀏覽器 2:eval()方法 一個完整的ECMAScript的解析器 只接受一個參數(shù)及要執(zhí)行的ECMAScript的字符串 3:global對象的屬性 不能給undefined NaN和infinity賦值, 4:window對象 是BOM中所有對象的核心 5.7.2Math對象()數(shù)學方法 min()和max()方法,用于確定一組數(shù)值中的最大值和最小值的方法 例: var min = Math.min(1,2,3);//1 var max = Math.Max(1,2,3);//3 ? 3:舍入方法 Math.ceil()向上舍入,取大的25.1取26 Math.floor()向下舍入 取小的25.9取25 Math.round()執(zhí)行標準舍入 四舍五入 4:random() 產(chǎn)生隨機數(shù) selectFrom(x,y)隨機抽出X-Y中的一個值,總數(shù)是ifx>y x-y+1個 ? 6:面向?qū)ο蟮某绦蛟O(shè)計 類和對象的區(qū)別,類是抽象的,對象是具體的,例如:手機是一個大類,蘋果6手機就是一個對象,一個是很高層面的理解,另一個又是很基礎(chǔ)的理解。對象是特定類的一個實例 屬性是對象固有的:如:車有最大馬力,重量等等,方法是對象能干什么,比如車能啟動來開,大方形盤就能轉(zhuǎn)向等等。 6.1理解對象 //創(chuàng)建一個對象
var person={
name:"gavin",
age:"23",
job:"IT engineer"
}
person.sayHey=function(name){
alert("Hello"+name);
}
document.write(person.age+person.job+person.name);
person.sayHey("JJ"); 用這段代碼來理解對象、屬性、方法: 這里的對象是一個person 它是object類的一個實例 他有三個屬性、名字、年紀、工作、 他還有他一個方法,可以理解成這個對象能干什么,他可以說HELLO to "someone"這里的some需要你給它提供參數(shù) 6.1.1屬性類型 1:數(shù)據(jù)類型: 數(shù)據(jù)屬性包含一個數(shù)據(jù)值的位置。在這個位置上可以讀取和寫入值,數(shù)據(jù)屬性有4個描述其行為的特性 [configurable]:表示能否通過delete刪除屬性從而重新定義屬性 [Enumerable]:表示能否通過for-in循環(huán)返回屬性 [Writable]:表示能否修改屬性的值 [Value]:包含這個屬性的數(shù)據(jù)值 要修改屬性默認的屬性,必須使用一個神奇的方法 object.defineProperty() 這個神奇的方法可以接受三個值:屬性所在的對象,屬性的名字和一個描述符的對象 Object.defineProperty(person,"name",{
writable:true,//這里如果填的是false 的話就不能通過.屬性來沖新設(shè)置值了例:person.name="gavin"//不會修改屬性
value:"zhihao"
});
person.name="gavin"; 2:訪問器屬性 可以通過設(shè)置get 和set方法來獲取或者設(shè)置對象的屬性的值 Object.defineProperty(person,"age",{
get :function(){
return this.age;
},
set:function(val){
this.age=val;
}
}); 6.1.2定義多個屬性 使用Object。defineProperties()方法 var book={};
Object.defineProperties(book,{
_year:{
value:2004
},
_edition:{
value:1
},
year:{
get:function(){
return this._year;
},
set:function(NewValue){
if(NewValue>2004){
this._year=NewValue;
this._edition+=NewValue-2004;
}
}
}
}) 6.1.3讀取屬性的特征: var d = Object.getOwnPropertyDescriptor(book,"_year"); 6.2創(chuàng)建對象 6.2.1工廠模式: 把一個對象封裝起來,只留了一個接口,可以通過接口傳入?yún)?shù)來更改對象的值。 6.2.2構(gòu)造函數(shù)模式 function Person(name,age,job){
this.name=name;
this.age=age;
this.job=job;
this.sayHi=function(someOne){
alert(this.name+"say Hello to"+someOne);
}
} 用java的編程思想來理解這個:創(chuàng)建了一個Person類,而不是再使用Object類,他其實就相當于一個框架,this相當于當前的類,我們可以通過New 來創(chuàng)建一個Person類的對象 1:當構(gòu)造函數(shù)調(diào)用 function Person(name,age,job){
this.name=name;
this.age=age;
this.job=job;
this.sayHi=function(someOne){
alert(this.name+"say Hello to"+someOne);
}
}
var person = new Person("gavin",23,"it");
document.write(person.age+" "+person.name+" "+person.job); 2:當普通函數(shù)調(diào)用 Person("a",2,"a");//添加到window window.sayName(); ? 6.2.3原型模式prototype(原型)屬性。 這個屬性是一個指針,指向一個對象,這個對象的用途是包含可以由特定類型的所有實例共享的屬性和方法。 個人的理解方法: 你玩游戲有一個大號,有一個倉庫,倉庫里有很多錢、裝備之類的,然后你又用這個賬號創(chuàng)建了一個小號,這個小號就能使用這個倉庫里的所有東西。 function Person(){
Person.prototype.name="gavin";
Person.prototype.age=23;
Person.prototype.job="software engineer";
Person.prototype.sayName=function(){
aler(this.name);
}
} 這就是一個原型的構(gòu)造函數(shù)。 我們可以以這個原型類創(chuàng)建對象,當我們?yōu)樽约簞?chuàng)建的對象付新值得時候,原型構(gòu)造函數(shù)里的函數(shù)值并沒有被改變,只是被屏蔽了。換句話說就是,新建的對象中的屬性會阻礙我們看到原型中的屬性。當我們使用delete操作符刪除了我們自己定義的屬性之后,原型中的屬性又可以重新正常顯示了, 我們可以用hasOwnProperty()方法來檢測值是來自于原型還是來自于自定義,原型的話返回值是false,自定義的話返回值是true。 ? 2:原型與in操作符: in操作符只要能通過對象能夠訪問到屬性就返回true,hasOwnPeoperty()只在屬性存在于實例中才返回ture,只要in返回true,hasOwnPeoperty()返回false就能確定屬性是原型中的屬性。 hasPrototypeProperty()接收兩個參數(shù),一個是對象,一個是屬性,如果屬性是原型中的就返回true,如果重寫了屬性的值,就返回false; ?要取得對象上所有可枚舉類的實例屬性,可以使用ECMAScript5中的object.key()方法,這個方法接收一個對象作為參數(shù),返回一個包含所有可枚舉屬性的字符串數(shù)組。 3:更簡單的原型語法: function Person(){}
Person.prototype={
name:"gavin",
age:23,
job:"software engineer",
sayName:function(){
alert(this.name);
}
} 和上面的創(chuàng)建方法有一點不同的是constructor屬性不在指向這個Person了。 如果constructor值真的很重要,我們可以加上他 constructor:Person,
? 4:原型的動態(tài)性 當我們先創(chuàng)建一個對象再重新寫了原型類之后,對象的調(diào)用就會出現(xiàn)問題。 ? 6.2.4 組合使用構(gòu)造函數(shù)模式和原型模式: 把自己特有的東西寫進構(gòu)造函數(shù)里,把公用的方法提出來用原型的方法去寫 function Person(name,age,job){
this.name=name;
this.age=age;
this.job=job; } Person.Prototype={ ? constructor:person, ? sayName:function(){ ? ?alert(this.name); } } 所有屬性都是再構(gòu)造函數(shù)中完成的,方法都是再原型中完成 ? 6.2.5動態(tài)原型模式 把所有信息都封裝在了構(gòu)造函數(shù)中,而通過構(gòu)造函數(shù)中初始化原型,保持了同時使用構(gòu)造函數(shù)和原型的優(yōu)點??梢酝ㄟ^檢查某個應該存在的方法是否有效。來決定是否要初始化原型。 6.2.6寄生構(gòu)造函數(shù)模式 基本思想,創(chuàng)建一個函數(shù),該函數(shù)的作用僅僅是封裝創(chuàng)建對象的代碼,然后再返回新的創(chuàng)建對象;但是從表面上來看,就和構(gòu)造函數(shù)是差不多的。在構(gòu)造函數(shù)內(nèi)部又創(chuàng)建了一個object類的對象,對這個對象進行操作,然后返回這個函數(shù) 6.2.7穩(wěn)妥構(gòu)造函數(shù)模式 穩(wěn)妥對象這個概念。所謂穩(wěn)妥對象,指的是沒有公公屬性,而且方法也不引用this的對象。穩(wěn)妥對象最適合在一些安全的環(huán)境中。 6.3:繼承 繼承的兩種方式,接口繼承和實現(xiàn)繼承。接口繼承只繼承方法簽名,而實際繼承則繼承繼承實際的方法。 6.3.1原型鏈 基本思想是利用原型讓一個引用類繼承另一個引用類的屬性和方法。 ? 6.3.2借用構(gòu)造函數(shù) 基本思想,在子類型構(gòu)造函數(shù)的內(nèi)部調(diào)用超類型構(gòu)造函數(shù)。 函數(shù)只不過是在特定環(huán)境中執(zhí)行代碼的對象,因此通過使用apply()和call()方法可以在新創(chuàng)建的對象上執(zhí)行構(gòu)造函數(shù)。 ? 6.3.3組合繼承 使用原型鏈實現(xiàn)對原型屬性和方法復用,又能夠保證每個實例都有它自己的屬性。、 6.3.4原型式繼承 思想是借助原型可以基于已有的對象創(chuàng)建新對象,同時還不用因此創(chuàng)建自定義類型 形象的說就是站在巨人的肩膀上摘蘋果,前提是必須有一個巨人。 var Person = {
name: "gavin",
friends: ["a", "b", "c"]
};
var onePerson = Object(Person);
onePerson.name = "zzh";
onePerson.friends.push("d");
var otherPerson = Object(onePerson);
otherPerson.name = "zzh";
otherPerson.friends.push("E");
alert(Person.friends); 會豐富模板 ? 7函數(shù)表達式: 定義函數(shù)的方式有兩種:一種是函數(shù)聲明,另一種是函數(shù)表達式。 函數(shù)聲明的語法: function functionName(arg0,....){ ? ?//函數(shù)體 } 函數(shù)聲明提升:就是在執(zhí)行代碼之前就會先讀取函數(shù) ?sayHi(); ?function sayHi(){ ? alert("Hi!"); } ? 第二種創(chuàng)建函數(shù)的方式是使用函數(shù)表達式。函數(shù)表達式有幾種不同的語法形式,最常見是: var functionName=function(arg1....){ ? ? ? ? ? ? //函數(shù)體 } 匿名函數(shù):創(chuàng)建一個函數(shù)并賦值給一個變量,因為function關(guān)鍵字后面沒有標識符 函數(shù)表達式和其他表達式不一樣,一定要先聲明后引用 函數(shù)聲明和函數(shù)表達式的區(qū)別:函數(shù)聲明可以先引用后聲明,而函數(shù)表達式一定要先聲明后引用 ? 7.1遞歸 遞歸函數(shù)是一個函數(shù)通過調(diào)用自己名字的情況下產(chǎn)生的 一個經(jīng)典的遞歸函數(shù) function factorial(num){ ? ? ? if(num<1){ ? ? ?return 1; }else{ ? ?return num*factorial(num-1); ? ? ? } } arguments.callee?指向一個正在執(zhí)行的函數(shù)指針,因此他可以用來實現(xiàn)函數(shù)的調(diào)用 在嚴格模式下不能使用這個函數(shù),會導致錯誤,可以用命名函數(shù)來達成相同的結(jié)果 var factorial=(function f(num){? ?? ?if(num<1){ ? ? ?return 1; }else{ ? ?return num*f(num-1); ? }) ? 7.2 閉包 ? ? 首先基本上所有的編程語言都有類似的特性,局部方法可以訪問外部父類方法的屬性,也就是說,子類或子方法可以訪問父類的資源。
就是在一個函數(shù)內(nèi)創(chuàng)建一個子函數(shù),這個子函數(shù)是用來得到他父元素的屬性值得,設(shè)置一個返回值就是父元素的屬性,然后外部調(diào)用這個函數(shù)的內(nèi)部函數(shù),就能訪問到這個函數(shù)的屬性值了,這個函數(shù)的子函數(shù)就稱為閉包 ? function?func3(){ var?num3?=?44; function?func4(){ return?num3; } return?func4; } var?func?=?func3(); console.log(func()); {
在外部無法獲取到func3內(nèi)部的局部變量,但是func3內(nèi)部的局部方法func4卻可以獲取到,因此?返回一個func4的引用?,這樣在外部通過這個func4就可以獲取到func3的內(nèi)部變量。
雖然是繞了一個圈子,但是在方法外部卻通過這樣一個手段獲取到了內(nèi)部的值。
而這個方法內(nèi)的局部方法func4就叫做閉包,按照很多書上的概念,這個方法搭建了方法內(nèi)部與方法外部的橋梁,使得在外部也可以任意的獲取到方法內(nèi)部的資源。
? 但是閉包會造成變量在內(nèi)存中持久占用,因此會有一定的性能問題,最好不要輕易使用,即便使用也要在恰當?shù)膶嶋H進行釋放。
} 作用域鏈的本質(zhì)是一個指向變量對象的指針列表,它只引用但不實際包含變量對象。轉(zhuǎn)載于:https://www.cnblogs.com/gavinzzh-firstday/p/5338982.html
總結(jié)
以上是生活随笔為你收集整理的JS高级程序设置笔记(二)的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: SlidingMenu实现侧滑
- 下一篇: 叫我大掌柜九龙城寨水果和鱼哪个好