创建函数的几种方式
<script type="text/javascript">
//1.直接声明函数
function funcName(/*参数列表*/){
//函数体
}
//2.函数表达式
var funcName = function(){
};
//3.new Function
var func = new Function();
</script>
函数的构造函数Function
在 js 中 使用Function可以实例化函数对象。也就是说在 js 中函数与普通对象一样, 也是一个对象类型. 函数是 js 中的一等公民.
- 函数是对象, 就可以使用对象的动态特性
- 函数是对象, 就有构造函数创建函数
- 函数是函数, 可以创建其他对象
- 函数是唯一可以限定变量作用域的结构
要解决的问题
- Function 如何使用
- Function 与函数的关系
- 函数的原型链结构
Function 的使用
语法
//Function函数所有的参数全都是字符串
//Function函数的作用就是将所有的参数组合起来，变成一个函数
//1、如果只传一个参数，那么这个函数必然是函数体
//2、如果传多个参数，那么最后一个参数表示函数体，前面的参数代表将要创建的函数的参数
//3、如果不传参数，表示创建一个空函数
new Function(arg1, arg2, arg3, ..., argN, body);
创建一个打印一句话的函数
//传统的方式
function foo(){
console.log("你好");
}
//使用Function
var func = new Function("console.log('你好');");
这里两种方式创建出来的函数功能是一样的。
创建一个空函数
//传统的方式
function foo(){}
//Function
var func = new Function();
创建一个有参数的函数
//传统的方式
function foo(num){
console.log(num);
}
//Function
var func = new Function(){"num", "console.log(num);"};
解决代码太长的问题
- 利用字符串特性
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 语法（很少有浏览器实现） 使用键盘左上角的` 表示可换行字符串的界定符，之前我们用的是单引号或者双引号来表示一个字符串字面量，在ES6中可以用反引号来表示该字符串可换行。
- (最终)利用 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>
练习（重点）
<script type="text/javascript">
var func = new Function("console.log('我是动态创建的函数')");
func();
//Function这构造函数，可以用来新建函数对象
//语法
// 0，一参数都不传，创建一个空的函数,var 函数名 = new Function();
// 1，只传一个参数，这个参数就是函数体，var 函数名 = new Function("函数体");
// 2，传多个参数的情况，最后一个参数是函数体，前面的参数都是该函数的参数
//练习: 利用 Function 创建一个函数, 要求传入两个数字, 打印其和
var f1 = new Function("num1","num2","console.log(num1+num2);");
f1(2,5);
//练习：使用Function创建一个打印4句歌词的函数
var f2 = new Function("console.log('四句歌词');");
f2();
//练习: 利用 Function 创建一个求三个数中最大数的函数.
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创建函数时，代码过长的的问题
// 1，如何使字符串拼接让代码换行
// 2，使用模板的方式，将代码写在模板标签内
// 3，使用反引号（`） 引住字符串，那么就可以 换行了
//练习：传入一个数组，求数组中的最大数
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]));
//练习: 利用 Function 创建一个函数, 要求允许函数调用时传入任意个数参数, 并且函数返回这些数字中最大的数字
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]));
}
//练习：利用 Function 创建一个函数，求数组最大值，函数体使用反引号。
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对象
在每一个函数调用的过程中, 函数代码体内有一个默认的对象arguments, 它存储着实际传入的所有参数。
arguments是一个伪数组对象. 它表示在函数调用的过程中传入的所有参数的集合。在函数调用过程中不规定参数的个数与类型, 可以使得函数调用变得非常灵活性。
JavaScript中的函数并没有规定必须如何传参：
- 定义函数的时候不写参数, 一样可以调用时传递参数
- 定义的时候写了参数, 调用的时候可以不传参
- 定义的时候写了一个参数, 调用的时候可以随意的传递多个而参数
在代码设计中, 如果需要函数带有任意个参数的时候, 一般就不带任何参数, 所有的参数利用arguments对象来获取. 一般的函数定义语法, 可以写成:
function foo ( /* ... */ ) {
}
练习
<script type="text/javascript">
// 要求允许函数调用时传入任意个数参数,
// 并且函数返回这些数字中最大的数字.
//函数内部的一个对象 arguments
//当函数调用的时候，系统会将所有传入的实参，依次存入这个数组对象
function max(){
console.log(arguments);//参数数组
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));
//练习，使用Function创建一个函数，
//给函数传入任意个数的参数，
//在函数内进行去重操作，然后返回去重后的数组
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.一个函数有形参的时候，调用的时候，可以不传参数
//2.一个函数没有形参的时候，调用时后，可以传参 arguments对象
//3.一个函数不管有没有形参，调用的时候都会把实参的值存入arguments对象
</script>
eval
<script type="text/javascript">
//eval函数可以用来将字符串转换成JavaScript代码并且运行
var str = "var a = 10";
eval(str);
console.log(a);
//JSON格式的数据 JSON对象有兼容性问题
var jsonData = '{"name":"zs", "age":18}';
var o = JSON.parse(jsonData);
console.log(o);
//使用eval来解析JSON格式字符串的时候，会将{}解析为代码块，而不是对象的字面量
//1.在JSON格式的字符串前面拼接上 "var o ="
//2.把JSON格式的字符串使用()括起来，就不会将{}解析为代码块，而是表达式
eval("var obj = "+jsonData);
console.log(obj);
var jsonData2 = '({"name":"zs", "age":18})';
var obj2 = eval(jsonData2);
console.log(obj2);
</script>
静态成员和实例成员
<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
//静态成员和实例成员的概念，是从其他编程语言中引入的
//静态成员：
//是指构造函数的属性和方法
//实例成员：
//是指实例的属性和方法
//__proto__
// $("#id").css();
// $("#id").text();
// $.trim();
// $.each();
// $.extend();
//把工具方法，作为静态成员
//把跟对象相关的方法，作为实例成员
</script>
