引用類型之Function類型

2019-11-08 18:48:31

字體：大中小

供稿：網(wǎng)友

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><script>Function類型:在ECMAScript中,函數(shù)實際上是對象.每個函數(shù)都是Function類型的實例,而卻都與其它引用類型一樣,都有屬性和方法.由于函數(shù)是對象,因此函數(shù)名也是一個指向函數(shù)對象的指針./**** 定義函數(shù)的3中方式(創(chuàng)建函數(shù)的3種方式)* **/1.函數(shù)聲明的方式function sum (num1,num2) {return num1+num2;}2.函數(shù)表達式(又叫函數(shù)字面量)var sum = function(num1,num2) {return num1 + num2;};3.Function構(gòu)造函數(shù) var sum = new Function('num1','num2','return num1+num2'); 不推薦使用構(gòu)造函數(shù)創(chuàng)建函數(shù),因為這種方式會導(dǎo)致解析兩次代碼(一次是解析常規(guī)的ECMAScript代碼,第二次是解析傳入構(gòu)造函數(shù)的字符串).從而影響性能 /**** 1.函數(shù)可以有多個名字*/由于函數(shù)名僅僅是指向函數(shù)的指針,因此函數(shù)名與包含對象指針的其它變量沒什么不同,換句話說,函數(shù)可以有多個名字.function sum (num1,num2) {return num1 + num2}alert(sum(10,10)); //20;var anotherSum = sum;alert(anotnerSum(10,10)); //20sum=null;alert(anotnerSum(10,10)); //20/**** 沒有重載* 重載: 在同一個類中，方法的名字相同，但參數(shù)個數(shù)，參數(shù)類型，或返回值類型不同* 重寫: 它是子類和父類的關(guān)系，子類重寫了父類的方法，但方法名，參數(shù)類型，參數(shù)個數(shù)必須相同*/function addSomeNumber(num){return num + 100;}function addSomeNumber(num){return num + 200;}var result = addSomeNumber(100); //結(jié)果為300聲明了兩個同名的函數(shù),結(jié)果前面一個被后面的給覆蓋了.以上代碼實際上與下面的代碼沒區(qū)別.var addSomeNumber = function(num){return num + 100;}addSomeNumber = function(num){return num +200;}var result = addSomeNumber(100); //結(jié)果為300 在創(chuàng)建第二個函數(shù)的時候，實際上覆蓋了引用第一個函數(shù)的變量addSomeNumber/*** *函數(shù)聲明與函數(shù)表達式的區(qū)別* * 除了什么時候可以通過變量訪問函數(shù)這一點區(qū)別之外，函數(shù)聲明與函數(shù)表達式的語法其實是等價的。**/實際上,解析器在向執(zhí)行環(huán)境中加載數(shù)據(jù)時,對函數(shù)聲明和函數(shù)表達式并非一視同仁.解析器會率先讀取函數(shù)聲明,并使其在執(zhí)行任何代碼之前可用(可以訪問).至于函數(shù)表達式,則必須等到解析器執(zhí)行到它所在的代碼行,才會被真正的解釋執(zhí)行. (函數(shù)聲明提升);alert(sum(10,10));function sum(num1,num2){return num1 + num2;}以上代碼可以正確的執(zhí)行,因為在代碼執(zhí)行之前,解析器已經(jīng)通過一個名為函數(shù)聲明提升的過程,讀取,并將函數(shù)添加到執(zhí)行環(huán)境中.對代碼求值時,javaScript引擎在第一遍會聲明函數(shù),并將它放到源代碼樹的頂部.所以,即使聲明函數(shù)的代碼放在調(diào)用它的代碼之后,Javascript引擎也能把函數(shù)聲明提升到頂部.sum(10,10); //、執(zhí)行錯誤var sum = function (num1,num2){return num1+ num2};如果把函數(shù)聲明改為等價的函數(shù)表達式,就會在執(zhí)行期間出錯./***作為值的函數(shù)* * */因為ECMASCript中函數(shù)名本省就是變量,所以函數(shù)也可以當(dāng)做值來使用. 1.做函數(shù)的參數(shù) 2.作為另一個函數(shù)的返回結(jié)果function callSomeFunction(someFunction,someArgument){return someFunction(someArgument);}function add10(num){return num + 10;}要訪問函數(shù)的指針而不執(zhí)行函數(shù)的話,必須去掉函數(shù)名后面的那對圓括號var result = callSomeFunction(add10 , 10);alert(result); //10 將對象數(shù)組按照name屬性排序 var data = [{name: "Zachary", age: 28}, {name: "Nicholas", age: 29}];data.sort(createComparisonFunction("name"));alert(data[0].name); //Nicholasdata.sort(createComparisonFunction("age"));alert(data[0].name); //Zacharyfunction createComparisonFunction(PRopertyName) {return function(object1, object2){var value1 = object1[propertyName];var value2 = object2[propertyName];if (value1 < value2){return -1;} else if (value1 > value2){return 1;} else {return 0;}};}/**** * 函數(shù)內(nèi)部屬性 arguments和this* * */在函數(shù)內(nèi)部有兩個特殊的對象:arguments 和 this. arguments 是一個類數(shù)組對象,包含著傳入函數(shù)的所有參數(shù),雖然 arguments 的主要作用是保存函數(shù)參數(shù),但這個對象還有一個叫callee的屬性,該屬性是一個指針,指向擁有 arguments 對象的函數(shù)(callee的作用:解耦)階層函數(shù):function factorial(num){if(num <=1){return 1;}else{return num* factorial(num -1);}}函數(shù)可以正常執(zhí)行,但是問題在于這個函數(shù)的執(zhí)行與函數(shù)名 factorial緊緊的耦合在一起,我們可以利用 callee 解耦function factorial(num){if(num < 1){return 1;}else{return num * arguments.callee(num-1);}}這樣就可以保證無論引用函數(shù)時使用的是什么名子,都可以保證正常完成遞歸調(diào)用.var trueFactorial = factorial;factorial = function(){return 0;};alert(trueFactorial(5)); //120alert(factorial(5)); //01.案例1function factorial(num){if(num < 1){return 1;}else{return num * arguments.callee(num-1);}}var trueFactorial = factorial; //我的理解是這行代碼重新定義了一個函數(shù) trueFactorial 說以trueFactorial的toString方法會返上面的那個函數(shù)factorial = function(){return 0;};alert(trueFactorial(5)); //120alert(factorial(5)); //02.案例2function factorial(num){if(num < 1){return 1;}else{return num * arguments.callee(num-1);}}factorial = function(){return 0;};var trueFactorial = factorial; alert(trueFactorial(5)); //0alert(factorial(5)); //03.案例3function factorial(num){if(num < 1){return 1;}else{return factorial * factorial(num-1);}}var trueFactorial = factorial;factorial = function(){return 0;};alert(trueFactorial(5)); // NaNalert(factorial(5)); // 04.案例4function factorial(num){if(num < 1){return 1;}else{return factorial * factorial(num-1);}}factorial = function(){return 0;};var trueFactorial = factorial;alert(trueFactorial(5)); // 0alert(factorial(5)); // 0// this 引用的是函數(shù)執(zhí)行環(huán)境的對象，(當(dāng)在網(wǎng)頁的全局作用域中調(diào)用函數(shù)時，this引用的就是window)/*** *函數(shù)對象屬性 caller* **/ECMAScript5也規(guī)范了另外一個函數(shù)對象的屬性:caller.caller : 這個屬性保存著調(diào)用當(dāng)前函數(shù)的函數(shù)的引用,如果在全局作用域中調(diào)用當(dāng)前函數(shù),它的值為nullfunction outer(){inner();}function inner(){alert(inner().caller);}outer();彈框顯示outer函數(shù)的源碼,因為outer調(diào)用了inner,所以inner.caller指向outer();為了實現(xiàn)更松散的耦合,也可以通過 arguments.callee.caller來訪問相同的信息function outer(){inner();}function inner(){alert(arguments.callee.caller);}outer();注意: 1.在嚴(yán)格模式下 arguments.callee會報錯 2.在嚴(yán)格模式下 arguments.caller 會報錯在非嚴(yán)格模式下為 undefined,ECMAscript定義 arguments.caller 是為了區(qū)分和函數(shù)的caller屬性 /*** * 函數(shù)內(nèi)部屬性和方法* 屬性:length,prototype* 方法:call,apply* * **/length: 該屬性表示函數(shù)的參數(shù)prototype: 我們創(chuàng)建的每一個函數(shù)都有一個prototype(原型)屬性,該屬性是一個指針,指向一個對象,這個對象包含著特定類型的所有實例共享的屬性和方法.使用原型的好處是,可以讓所有實例共享它包含的屬性和方法.換句話說就是不必在構(gòu)造函數(shù)中定義對象實例的信息,而是可以將這些信息直接添加到原型對象中.function Person(){}Person.prototype.name = 'Nichollas';Person.prototype.age = 29;Person.prototype.job = 'Software Enginner';Person.prototype.sayName = function(){alert(this.name);}var person1 = new Person();person1.sayName(); //Nicholas"var person2 = new Person();person2.sayName(); // Nicholas"alert(person1.sayName() == person2.sayName()); //true注: 對于ECMAScript5中的引用類型而言,prototype是保存它們所有實例方法的真正所在.換句話說,諸如 toString()和valueOf()等方法,實際上都保存在prototype名下,只不過是通過各自對象的實例訪問罷了.在創(chuàng)建自定義引用類型以及實現(xiàn). prototype屬性是不可枚舉的,因此使用 for-in 無法發(fā)現(xiàn).// call apply方法: 每個函數(shù)都包含兩個非繼承而來的方法: call和apply. 作用 : 在特定的作用域中調(diào)用函數(shù),實際上等于設(shè)置函數(shù)體內(nèi)this對象的值(擴充函數(shù)賴以運行的作用域)apply方法: 接受兩個參數(shù),一個是在其中運行函數(shù)的作用域,另一個是參數(shù)數(shù)組. 第二個參數(shù)可以是 Array 的實例,也可以是 arguments 對象function sum (num1, num2){return sum1 + sum2;}function callSum1(num1,num2){sum.apply(this,[num1,num2]) //傳入數(shù)組}function callSum2(num1,num2){sum.apply(this,arguments) //傳入 arguments 對象}alert(callSum1(10,10)); //20alert(callSum2(10,10)); // 20call方法: call方法的作用與apply相同,區(qū)別在于接受參數(shù)的方式不同,第一個是this值沒變化,變化的是其余的參數(shù)都直接傳遞給函數(shù)(一一列舉出來)function sum(num1 ,num2){return sum1+sum2;}function callSum(num1,num2){return sum.call(this,num1,num2);}alert(callSum(10,10)); // 20事實上傳遞參數(shù)并非call()和apply()真正的用武之地,他們強大的地方在于能夠擴充函數(shù)賴以運行的作用域.window.color= 'red';var o ={'color':'blue'};function sayColor(){aletr(this.color);}sayColor() ; // redsayColor.call(this) //redsayColor.call(window) // thissayColor.call(o); // blue// ECMASCript5 還定義了一個方法bind()bind()方法會創(chuàng)建一個函數(shù)的實例,其this值會被綁定到傳給bind函數(shù)的值.window.color = 'red';var color = 'blue';function sayColor(){alert(this.color);}var objectSayColor = sayColor.bind(o);objectSayColor(); //blue在這里,sayColor()調(diào)用bind()并傳入對象 o,創(chuàng)建了objectSayColor函數(shù). objectSayColor()函數(shù)的this值就等于 o,因此即使在全局函數(shù)作用域中調(diào)用這個函數(shù) ,也會看到'blue'</script></body></html>

上一篇：map 用法詳解（轉(zhuǎn)）

下一篇：SDUT 2622 - 最短路徑（SPFA+二維）