創(chuàng)建函數(shù)的幾種方式
<script type="text/javascript">
//1.直接聲明函數(shù)
function funcName(/*參數(shù)列表*/){
//函數(shù)體
}
//2.函數(shù)表達(dá)式
var funcName = function(){
};
//3.new Function
var func = new Function();
</script>
函數(shù)的構(gòu)造函數(shù)Function
在 js 中 使用Function可以實(shí)例化函數(shù)對(duì)象酱床。也就是說(shuō)在 js 中函數(shù)與普通對(duì)象一樣, 也是一個(gè)對(duì)象類(lèi)型. 函數(shù)是 js 中的一等公民.
- 函數(shù)是對(duì)象, 就可以使用對(duì)象的動(dòng)態(tài)特性
- 函數(shù)是對(duì)象, 就有構(gòu)造函數(shù)創(chuàng)建函數(shù)
- 函數(shù)是函數(shù), 可以創(chuàng)建其他對(duì)象
- 函數(shù)是唯一可以限定變量作用域的結(jié)構(gòu)
要解決的問(wèn)題
- Function 如何使用
- Function 與函數(shù)的關(guān)系
- 函數(shù)的原型鏈結(jié)構(gòu)
Function 的使用
語(yǔ)法
//Function函數(shù)所有的參數(shù)全都是字符串
//Function函數(shù)的作用就是將所有的參數(shù)組合起來(lái)芋肠，變成一個(gè)函數(shù)
//1氧映、如果只傳一個(gè)參數(shù)犯助，那么這個(gè)函數(shù)必然是函數(shù)體
//2级乍、如果傳多個(gè)參數(shù)倘感，那么最后一個(gè)參數(shù)表示函數(shù)體留特，前面的參數(shù)代表將要?jiǎng)?chuàng)建的函數(shù)的參數(shù)
//3伏恐、如果不傳參數(shù)孩哑，表示創(chuàng)建一個(gè)空函數(shù)
new Function(arg1, arg2, arg3, ..., argN, body);
創(chuàng)建一個(gè)打印一句話的函數(shù)
//傳統(tǒng)的方式
function foo(){
console.log("你好");
}
//使用Function
var func = new Function("console.log('你好');");
這里兩種方式創(chuàng)建出來(lái)的函數(shù)功能是一樣的。
創(chuàng)建一個(gè)空函數(shù)
//傳統(tǒng)的方式
function foo(){}
//Function
var func = new Function();
創(chuàng)建一個(gè)有參數(shù)的函數(shù)
//傳統(tǒng)的方式
function foo(num){
console.log(num);
}
//Function
var func = new Function(){"num", "console.log(num);"};
解決代碼太長(zhǎng)的問(wèn)題
- 利用字符串特性
function foo ( a, b, c ) {
var res = a > b ? a : b;
res = res > c ? res : c;
return res;
}
var func = new Function( 'a', 'b', 'c', 'return foo( a, b, c );');
- 利用
+連接字符串
var func = new Function( 'a', 'b', 'c',
'var res = a > b ? a : b;' +
'res = res > c ? res : c;' +
'return res;' );
- ES6 語(yǔ)法（很少有瀏覽器實(shí)現(xiàn)） 使用鍵盤(pán)左上角的` 表示可換行字符串的界定符翠桦，之前我們用的是單引號(hào)或者雙引號(hào)來(lái)表示一個(gè)字符串字面量横蜒，在ES6中可以用反引號(hào)來(lái)表示該字符串可換行。
- (最終)利用 DOM 的特性完成該方法
<div id="code" style="display:none">
var res = a > b ? a : b;
res = res > c ? res : c;
return res;
</div>
<script>
var txt = document.getElementbyId("code).innerHtml + ' ';
var func = new Function('a', 'b', 'c', txt);
</script>
練習(xí)（重點(diǎn)）
<script type="text/javascript">
var func = new Function("console.log('我是動(dòng)態(tài)創(chuàng)建的函數(shù)')");
func();
//Function這構(gòu)造函數(shù)销凑，可以用來(lái)新建函數(shù)對(duì)象
//語(yǔ)法
// 0丛晌，一參數(shù)都不傳，創(chuàng)建一個(gè)空的函數(shù),var 函數(shù)名 = new Function();
// 1斗幼，只傳一個(gè)參數(shù)澎蛛，這個(gè)參數(shù)就是函數(shù)體，var 函數(shù)名 = new Function("函數(shù)體");
// 2蜕窿，傳多個(gè)參數(shù)的情況谋逻，最后一個(gè)參數(shù)是函數(shù)體呆馁，前面的參數(shù)都是該函數(shù)的參數(shù)
//練習(xí): 利用 Function 創(chuàng)建一個(gè)函數(shù), 要求傳入兩個(gè)數(shù)字, 打印其和
var f1 = new Function("num1","num2","console.log(num1+num2);");
f1(2,5);
//練習(xí)：使用Function創(chuàng)建一個(gè)打印4句歌詞的函數(shù)
var f2 = new Function("console.log('四句歌詞');");
f2();
//練習(xí): 利用 Function 創(chuàng)建一個(gè)求三個(gè)數(shù)中最大數(shù)的函數(shù).
var f3 = new Function("a","b","c","return (a>b?a:b)>c?(a>b?a:b):c;");
console.log(f3(2,12,8));
//如何解決使用Function創(chuàng)建函數(shù)時(shí)，代碼過(guò)長(zhǎng)的的問(wèn)題
// 1毁兆，如何使字符串拼接讓代碼換行
// 2浙滤，使用模板的方式，將代碼寫(xiě)在模板標(biāo)簽內(nèi)
// 3荧恍，使用反引號(hào)（`） 引住字符串瓷叫，那么就可以 換行了
//練習(xí)：傳入一個(gè)數(shù)組，求數(shù)組中的最大數(shù)
var max = new Function("arr",
"var max=arr[0];"+
"for(var i=1;i<arr.length;i++){" +
"max = arr[i]>max?arr[i]:max;"+
"}" +
"return max;"
);
console.log(max([23, 4, 8, 101, 102]));
//練習(xí): 利用 Function 創(chuàng)建一個(gè)函數(shù), 要求允許函數(shù)調(diào)用時(shí)傳入任意個(gè)數(shù)參數(shù), 并且函數(shù)返回這些數(shù)字中最大的數(shù)字
window.onload = function () {
var script = document.getElementById("funcContent");
var str = script.innerHTML;
var max = new Function("arr",str);
console.log(max([1, 23, 12, 24, 8]));
}
//練習(xí)：利用 Function 創(chuàng)建一個(gè)函數(shù)送巡，求數(shù)組最大值摹菠，函數(shù)體使用反引號(hào)。
var str = `adfafdsa
asdfas`;
console.log(str);
var max2 = new Function("arr",`
var max = arr[0];
for(var i=0;i<arr.length;i++){
max = arr[i]>max?arr[i]:max;
}
return max;
`);
console.log(max2([1, 5, 24, 2]));
</script>
<script type="text/template" id="funcContent">
var max = arr[0];
for(var i=1;i<arr.length;i++){
max = arr[i]>max?arr[i]:max;
}
return max;
</script>
arguments對(duì)象
在每一個(gè)函數(shù)調(diào)用的過(guò)程中, 函數(shù)代碼體內(nèi)有一個(gè)默認(rèn)的對(duì)象arguments, 它存儲(chǔ)著實(shí)際傳入的所有參數(shù)骗爆。
arguments是一個(gè)偽數(shù)組對(duì)象. 它表示在函數(shù)調(diào)用的過(guò)程中傳入的所有參數(shù)的集合次氨。在函數(shù)調(diào)用過(guò)程中不規(guī)定參數(shù)的個(gè)數(shù)與類(lèi)型, 可以使得函數(shù)調(diào)用變得非常靈活性。
JavaScript中的函數(shù)并沒(méi)有規(guī)定必須如何傳參：
- 定義函數(shù)的時(shí)候不寫(xiě)參數(shù), 一樣可以調(diào)用時(shí)傳遞參數(shù)
- 定義的時(shí)候?qū)懥藚?shù), 調(diào)用的時(shí)候可以不傳參
- 定義的時(shí)候?qū)懥艘粋€(gè)參數(shù), 調(diào)用的時(shí)候可以隨意的傳遞多個(gè)而參數(shù)
在代碼設(shè)計(jì)中, 如果需要函數(shù)帶有任意個(gè)參數(shù)的時(shí)候, 一般就不帶任何參數(shù), 所有的參數(shù)利用arguments對(duì)象來(lái)獲取. 一般的函數(shù)定義語(yǔ)法, 可以寫(xiě)成:
function foo ( /* ... */ ) {
}
練習(xí)
<script type="text/javascript">
// 要求允許函數(shù)調(diào)用時(shí)傳入任意個(gè)數(shù)參數(shù),
// 并且函數(shù)返回這些數(shù)字中最大的數(shù)字.
//函數(shù)內(nèi)部的一個(gè)對(duì)象 arguments
//當(dāng)函數(shù)調(diào)用的時(shí)候摘投，系統(tǒng)會(huì)將所有傳入的實(shí)參煮寡，依次存入這個(gè)數(shù)組對(duì)象
function max(){
console.log(arguments);//參數(shù)數(shù)組
var max = arguments[0];
for(var i=0;i<arguments.length;i++){
max = max>arguments[i]?max:arguments[i];
}
return max;
}
console.log(max(1, 8, 2, 5, 9, 6));
//練習(xí)，使用Function創(chuàng)建一個(gè)函數(shù)犀呼，
//給函數(shù)傳入任意個(gè)數(shù)的參數(shù)幸撕，
//在函數(shù)內(nèi)進(jìn)行去重操作，然后返回去重后的數(shù)組
var distinct = function(){
var arr = [];
for(var i=0;i<arguments.length;i++){
if(arr.lastIndexOf(arguments[i]) == -1){
arr.push(arguments[i]);
}
}
return arr;
}
console.log(distinct(1, 2, 4, 5, 6, 5, 4));
//1.一個(gè)函數(shù)有形參的時(shí)候外臂，調(diào)用的時(shí)候坐儿，可以不傳參數(shù)
//2.一個(gè)函數(shù)沒(méi)有形參的時(shí)候，調(diào)用時(shí)后宋光，可以傳參 arguments對(duì)象
//3.一個(gè)函數(shù)不管有沒(méi)有形參貌矿，調(diào)用的時(shí)候都會(huì)把實(shí)參的值存入arguments對(duì)象
</script>
eval
<script type="text/javascript">
//eval函數(shù)可以用來(lái)將字符串轉(zhuǎn)換成JavaScript代碼并且運(yùn)行
var str = "var a = 10";
eval(str);
console.log(a);
//JSON格式的數(shù)據(jù) JSON對(duì)象有兼容性問(wèn)題
var jsonData = '{"name":"zs", "age":18}';
var o = JSON.parse(jsonData);
console.log(o);
//使用eval來(lái)解析JSON格式字符串的時(shí)候，會(huì)將{}解析為代碼塊罪佳，而不是對(duì)象的字面量
//1.在JSON格式的字符串前面拼接上 "var o ="
//2.把JSON格式的字符串使用()括起來(lái)逛漫，就不會(huì)將{}解析為代碼塊，而是表達(dá)式
eval("var obj = "+jsonData);
console.log(obj);
var jsonData2 = '({"name":"zs", "age":18})';
var obj2 = eval(jsonData2);
console.log(obj2);
</script>
靜態(tài)成員和實(shí)例成員
<script type="text/javascript">
function Person(){
this.name = "zs";
this.run = function () {
console.log("跑");
}
}
// Person.prototype
console.log(Person.name);
var p = new Person();
// p.name
//靜態(tài)成員和實(shí)例成員的概念赘艳，是從其他編程語(yǔ)言中引入的
//靜態(tài)成員：
//是指構(gòu)造函數(shù)的屬性和方法
//實(shí)例成員：
//是指實(shí)例的屬性和方法
//__proto__
// $("#id").css();
// $("#id").text();
// $.trim();
// $.each();
// $.extend();
//把工具方法酌毡，作為靜態(tài)成員
//把跟對(duì)象相關(guān)的方法，作為實(shí)例成員
</script>
