在JS中,Function(函数)类型实际上是对象;每个函数都是Function类型的实例,而且都与其他引用类型一样具有属性和方法。由于函数是对象,因此函数名实际上也是一个指向函数对象的指针。 一 函数的声明方式 //1.函数声明方式 function add(num1,num2){ return num1+num2; } //2.函数表达式定义函数 var add= function(num1,num2){ // 通过变量box即可引用函数; return num1+num2; }; // 注意函数末尾有一个分号,就像声明其他变量时一样; var another = add; // 使用不带圆括号的函数名是访问函数指针;而非调用函数; console.log(another(10,10)); //3.使用Function构造函数 var add = new Function('num1','num2','return num1+num2'); // 第三种方式不推荐,这种语法会导致解析两次代码(第一次解析常规JS代码,第二次解析传入构造函数中的字符串),从而影响性能; // 可以通过这种语法来理解"函数是对象,函数名是指针"的概念; 通常来说,在全局作用域内声明一个对象,只不过是对一个属性赋值而已,比如上例中的add函数,事实上只是为全局对象添加了一个属性,属性名为add,而属性的值是一个对象,即function(x, y){return x+y;},理解这一点很重要,这条语句在语法上跟: var str = "This is a string"; 并没有什么区别。都是给全局对象动态的增加一个新的属性,如此而已。 二 作为值的函数 // JS中的函数名本身就是变量,所以函数也可以作为值来使用; // 也就是说,不仅可以像传参数一样把一个函数传递给另一个函数,而且可以将一个函数作为另一个函数的结果返回; function box(sumFunction,num){ // 无论第一个参数传递进来的是什么函数, return sumFunction(num); // 它都会返回执行第一参数后的结果; } function sum(num){ return num+10; } // 传递函数到另一个函数里; // 要访问函数的指针不执行函数的话,须去掉函数名后的圆括号; var result = box(sum,10); // =>20;
三、函数的内部属性 // 函数内部有两个特殊的对象:arguments和this; // 1.arguments:包含着传入函数中的所有参数,arguments并不是一个数组,只是与数组相似。除了拥有length属性,数组的所有属性和方法都不具备。 // arguments这个对象还有一个名叫callee的属性,该属性是一个指针,指向拥有这个arguments对象的函数; function box(num){ if(num<=1){ return 1; }else{ return num*arguments.callee(num-1); // 使用arguments.callee来执行box本身; } } // 2.this:引用的是函数据以操作的对象,或者说函数调用语句所处的作用域; // 当在全局作用域调用函数时,this对象引用的就是window; window.color = "red"; alert(this.color); // 打印全局的color;=>red; var box = { color:'blue', sayColor:function(){ alert(this.color); // 打印局部的color;=>blue; } }; 四 函数属性和方法 // JS中的函数是对象,因此函数也有属性和方法;包含length和prototype; // length属性:表示函数希望接收到命名参数的个数; function box(name,age){ alert(name+age); } alert(box.length); // 2s // prototype属性:它是保存所有实例方法的真正所在,也就是原型; // prototype包含两个方法:apply()和call(),每个函数都包含这两个非继承而来的方法; // 这两个方法的用途都在特定的作用域中调用函数,实际上等于设置函数体内this对象的值; var color = 'red'; var box = { color = 'blue'; } function sayColor({ alert(this.color); }); sayColor(); // 作用域在window; sayColor.call(this); // 作用域在window; sayColor.call(window); // 作用域在window; sayColor.call(box); // 作用域在box,对象冒充;=>red; // 使用call(box)方法的时候,sayColor()方法的运行环境已经变成了box对象里了; // 使用call()或apply()来扩充作用域的最大好处,就是对象不需要与方法发生任何耦合关系; // 耦合:相互关联的意思,扩展和维护会发生连锁反应; // 也就是说,box对象和sayColor()方法之间不会有多余的关联操作,比如:box.sayColor = sayColor; function Animal(){ this.name = "Animal"; this.showName = function(){ alert(this.name); } } function Cat(){ this.name = "Cat"; } var animal = new Animal(); var cat = new Cat(); //通过call或apply方法,将原本属于Animal对象的showName()方法交给对象cat来使用。 //输入结果为"Cat" animal.showName.call(cat,","); //animal.showName.apply(cat,[]); 函数返回值(return) 当一个函数被调用,通常会从函数的{开始执行到}结束。如果想提前结束该函数的执行可以使用return语句,此时,return语句后面的所有语句将永远不会执行。如: function test(){ alert("first"); return; alert("second"); // 该语句永远被不会执行 } test(); // 一个函数总是会返回值,如果没有使用return返回值,默认返回undefined。如: function test(){ alert("first"); } alert(test()); // 输出:undefined // 如果函数前使用new方式调用,且返回值不是一个对象,则返回this(新对象)。如: function test(){ alert("first"); } var t = new test(); alert(typeof t); // 输出:‘object' alert(t instanceof test); // 输出:true 异常(exception) 异常是干扰程序正常流程的非正常事故(可能人为有意的)。当检查出这样的事故,应当抛出异常。如: function add(a, b){ // 定义一个加法函数 // 如果传递的参数不是数字类型,则抛出一个异常信息 if(typeof a != 'number' || typeof b != 'number'){ throw { 'name' : "typeError", // 属性是自定义的,名字可以任意取 'message': "add方法必须使用数字作为参数" }; } return a + b; } (function(){ // 捕获add方法可能产生的异常 try{ add(10, ""); } catch(e){ // 一个try语句只有一个catch语句,如果要处理多个异常,则通过异常的name属性来区别 // 判断异常的类型 if(e.name === "typeError"){ alert(e.message); } } })(); 给类型添加方法 Function.prototype.method = function(name, func){ // 避免覆盖已有的方法 if(!this.prototype[name]){ this.prototype[name] = func; } return this; }; // 通过Function.method方法添加一个加法函数到Function,该函数的名称为“add” Function.method("add", function(a, b){ if(typeof a != 'number' || typeof b != 'number'){ throw { 'name' : "typeError", 'message' : "add方法必须传入数字" }; } return a + b; }); // 调用Function的add方法是否存在 (function(){ try{ alert(Function.add(1, 3)); // 输出:4 } catch(e){ if(e.name === 'typeError'){ alert(e.message); } } })(); // 去除字符串两端的空白 String.method("trim", function(){ return this.replace(/^\s+|\s+$/g, ''); }); alert('|' + " hello world ".trim() + '|'); // 输出: '|hello world|' // 添加数字的取整函数 Number.method("integer", function(){ // 可以通过此种方式调用函数,如:Math.random() == Math['random']() == Math["random"]() return Math[this < 0 ? 'ceil' : 'floor'](this); }); alert((-10 / 3).integer()); // 输出:-3 递归调用(arguments.callee) // 求i的阶乘 function factorial(i){ if(i < 2){ return 1; } return i*factorial(i-1); // 递归调用 } alert(factorial(5)); // 求5的阶乘 // 以上方式存在一个问题?如下: var factorial = function(i){ if(i < 2){ return 1; } return i*factorial(i-1); // factorial还能被调用吗?不能 } var test = factorial; factorial = null; alert(test(2)); // 解决方案: var factorial = function(i){ if(i < 2){ return 1; } return i*arguments.callee(i-1); // arguments.callee返回正被执行的 Function 对象,也就是所指定的 Function 对象的正文 } var test = factorial; factorial = null; alert(test(5)); 函数的作用域 作用域的概念在几乎所有的主流语言中都有体现,在JavaScript中,则有其特殊性:JavaScript中的变量作用域为函数体内有效,而无块作用域,我们在Java语言中,可以这样定义for循环块中的下标变量: public void method(){ for(int i = 0; i < obj1.length; i++){ //do something here; } //此时的i为未定义 for(int i = 0; i < obj2.length; i++){ //do something else; } } 而在JavaScript中: function func(){ for(var i = 0; i < array.length; i++){ //do something here. } //此时i仍然有值,及I == array.length print(i);//i == array.length; } 再看一个例子 // 在程序中,作用域控制着变量的可见性和生命周期。 var name = "default"; // 全局作用域 function getName(){ var name = "getName"; // getName作用域下 for(var i=0; i<2; i++){ var inName = "inName"; } alert(i + "," + inName); // 2,inName 注意:在js中没有块级作用域,及if、for、while中声明的变量是放在块所在的作用域下 return name; } alert(getName()); // getName 注意:js存在函数作用域,所以在函数内部定义的变量在外部是不可见的 alert(name); // default 注意:在现代的很多语言中,推荐将变量尽可能的延迟声明。如:java而在js中,却不推荐这样做,因为js不支持块级作用域。推荐在函数的开始就将所有用到的变量进行声明。 JavaScript的函数是在局部作用域内运行的,在局部作用域内运行的函数体可以访问其外层的(可能是全局作用域)的变量和函数。JavaScript的作用域为词法作用域,所谓词法作用域是说,其作用域为在定义时(词法分析时)就确定下来的,而并非在执行时确定,如下例: 运行结果是什么呢?初学者很可能得出这样的答案: 函数上下文 call和apply //定义一个人,名字为jack var jack = { name : "jack", age : 26 } //定义另一个人,名字为abruzzi var abruzzi = { name : "abruzzi", age : 26 } //定义一个全局的函数对象 function printName(){ return this.name; } //设置printName的上下文为jack, 此时的this为jack print(printName.call(jack)); //设置printName的上下文为abruzzi,此时的this为abruzzi print(printName.call(abruzzi)); print(printName.apply(jack)); print(printName.apply(abruzzi)); apply和call的区别 // 定一个对象,包含一个add方法,返回a、b的和 var Person = { 'add' : function(a, b){ return a + b; } }; // 显示a、b的和 function showInfo(a, b){ alert(this.add(a, b)); } // 通过apply方法改变showInfo方法的this指向 //showInfo(1, 3); // 对象不支持次对象 showInfo.apply(Person, [1, 3]); showInfo.call(Person, 1, 3); // 从上面可以看出,apply和call的区别是apply接受一个数组作为被调函数的参数, // 而call是通过将被调函数的所有参数以逗号分隔的形式展开 匿名函数和嵌套函数 在JavaScript可以声明一个没有名称的函数,称为匿名函数(Anonymouse Function)。同时JavaScript还允许在函数内部声明函数,称为嵌套函数(Nested Function),嵌套函数的作用域为整个父函数。 以上代码就是一个简单的示例,log函数的作用域被限制在这个匿名函数之内,而匿名函数则因为被外面一对小括号()包括起来,形成一个函数表达式,表达式的值是一个函数,紧接着一对小括号表示立即执行这个函数,让原有的代码正常执行一次。不过,这种方式声明的函数、通过var声明的变量等等都是内部的,不能被任何匿名函数以外的代码访问到。如果你需要对外暴露一些函数作为接口的话有如下几种方法: var mylib = (function(global) { function log(msg) { console.log(msg); } log1 = log; // 法一:利用没有var的变量声明的默认行为,在log1成为全局变量(不推荐) global.log2 = log; // 法二:直接在全局对象上添加log2属性,赋值为log函数(推荐) return { // 法三:通过匿名函数返回值得到一系列接口函数集合对象,赋值给全局变量mylib(推荐) log: log }; }(window)); 高阶函数(High-order Function) 如果函数作为参数或返回值使用时,就称为高阶函数,JavaScript中的函数都可以作为高阶函数来使用,这也是第一类函数的特征。下面我们就分别分析一下这两种使用方法。 function negative(n) { return -n; // 取n的相反值 } function square(n) { return n*n; // n的平方 } function process(nums, callback) { var result = []; for(var i = 0, length = nums.length; i < length; i++) { result[i] = callback(nums[i]); // 对数组nums中的所有元素传递给callback进行处理,将返回值作为结果保存 } return result; } var nums = [-3, -2, -1, 0, 1, 2, 3, 4]; var n_neg = process(nums, negative); // n_neg = [3, 2, 1, 0, -1, -2, -3, -4]; var n_square = process(nums, square); // n_square = [9, 4, 1, 0, 1, 4, 9, 16]; 以上代码展示了把函数作为参数传入另一个函数process调用的示例,在process函数的实现中,把callback作为一个黑盒子看待,负责把参数传给它,然后获取返回值,在调用之前并不清楚callback的具体实现。只有当执行到20行和22行时,callback才被分别代表negative或square,分别对每个元素进行取相反值或平方值的操作。 function generator() { var i = 0; return function() { return i++; }; } var gen1 = generator(); // 得到一个自然数生成器 var gen2 = generator(); // 得到另一个自然数生成器 var r1 = gen1(); // r1 = 0 var r2 = gen1(); // r2 = 1 var r3 = gen2(); // r3 = 0 var r4 = gen2(); // r4 = 1 类构造函数 在一些面向对象的语言,如Java、C++、PHP中,构造函数是很常见的。在Javascript中构造函数首先是一个普通的函数,它可以使用new 操作符来调用,并生成一个特殊类型的对象。 function Benjamin(username, sex) { this.username = username; this.sex = sex; } var benjamin = new Benjamin("zuojj", "male"); //Outputs: Benjamin{sex: "male",username: "zuojj"} console.log(benjamin); 正如我们所看到的,“Benjamin”构造函数仅仅是接收传递过来的参数,并把它们赋值给this对象。这是因为当构造函数被new操作符调用时,构造函数的this对象赋值为new操作返回的对象。 benjamin = { "username": "zuojj", "sex": "male" } function Person(name) { this.name = name; this.toString = function() { return 'Hello, ' + this.name + '!'; }; } var p = new Person('Ghostheaven'); alert(p); // Hello, Ghostheaven! 在以上实例中Person函数作为类的构造函数使用,此时this指向新创建的实例对象,可以为实例增加属性和方法,关于详细的面向对象的JavaScript编程可以参考这篇文章。这里我想要说的是,JavaScript函数作为类构造函数使用时的返回值问题。 function MyClass(name) { this.name = name; return name; // 构造函数的返回值? } var obj1 = new MyClass('foo'); var obj2 = MyClass('foo'); var obj3 = new MyClass({}); var obj4 = MyClass({}); 上面的构造函数比较特别,有返回语句,那么obj1~obj4分别指向什么对象呢?实际结果是这样的: obj1 = MyClass对象 obj2 = 'foo' obj3 = {} obj4 = {} 具体原因这篇文章有解释,本文不再赘述,由于带返回值的构造函数会产生奇怪的结果,因此不要在构造函数中调用有返回值的返回语句(空return可以)。 为什么使用构造函数,有以下几个方面的原因: function Benjamin(username, sex) { this.username = username; this.sex = sex; } var benjamin = new Benjamin("zuojj", "male"); var ben = { "username": "zuojj", "sex": "male" } //Outputs: true console.log(benjamin instanceof Benjamin); //Outputs: false console.log(ben instanceof Benjamin); 3.使用构造函数,意味着我们可以在原型上定义公共方法,供多个实例共享 function Benjamin(username, sex) { this.username = username; this.sex = sex; } Benjamin.prototype.getName = function() { return this.username; } var benjamin = new Benjamin("zuojj", "male"); var ben = new Benjamin("lemon", "female"); //Outputs: zuojj console.log(benjamin.getName()); //Outputs: lemon console.log(ben.getName()); 1.new 关键字 function Bar() { return 2; } var bar = new Bar(); //返回新创建的对象 //Outputs: Bar {} console.log(bar); function Test() { this.value = 2; return { foo: 1 }; } var test = new Test(); //返回的对象 //Outputs: Object {foo: 1} console.log(test); 我们需要注意的是: function Bar() { return 2; } var bar = new Bar(); function BarN() { return new Number(2); } var barn = new BarN(); //Outputs: true console.log(bar.constructor === Bar); //Outputs: Number {} console.log(barn); //Ouputs: false console.log(barn.constructor === BarN); //Outputs: true console.log(barn.constructor === Number); /* -------------------------------------- */ function Test() { this.value = 2; return { foo: 1 }; } var test = new Test(); //Outputs: undefined console.log(test.value); //Ouputs: 1 console.log(test.foo);
闭包 var myObject = { value : 0, increment : function(inc){ this.value = typeof inc === 'number' ? inc : 1; }, getValue : function(){ return this.value; } }; myObject.increment(10); alert(myObject.value); alert(myObject.getValue()); // 上面使用字面常量方式定义了一个myObject对象。但是value变量可以被外部对象访问 var myObject = function(){ var value = 0; return { increment: function(inc){ value += typeof inc === 'number' ? inc : 1; }, getValue : function(){ return value; } }; }(); myObject.increment(10); alert(myObject.value); // 不能被外部对象访问 alert(myObject.getValue()); // 10 // 渐变body的背景色(黄色到白色) var fade = function(node){ var level = 1; var step = function(){ var hex = level.toString(16); node.style.backgroundColor = '#FFFF' + hex + hex; if(level < 15){ level += 1; setTimeout(step, 500); // 如果level小于15,则内部函数自我调用 } }; setTimeout(step, 1); // 调用内部函数 }; fade(document.body); // 下面是一个很糟糕的例子 <a href="#" name="test">点击我...</a><br> // 点击时显示3 <a href="#" name="test">点击我...</a><br> // 点击时显示3 <a href="#" name="test">点击我...</a><br> // 点击时显示3 var add_the_handlers = function(nodes){ var i; for(i = 0; i < nodes.length; i += 1) { nodes[i].onclick = function(e){ // 函数构造时的:i alert(i); }; } }; var objs = document.getElementsByName("test"); add_the_handlers(objs); // 造成上面的原因是:a标签的事件函数绑定了变量i,则不是函数在构造时的i值。 // 解决方案如下: var add_the_handlers = function(nodes){ var i; for(i = 0; i < nodes.length; i += 1) { nodes[i].onclick = function(i){ return function(e){ alert(i); // 输出的i是构造函数传递进来的i,不是事件处理绑定的i。 }; }(i); } }; var objs = document.getElementsByName("test"); add_the_handlers(objs);
回调 // data表示参数,而call_function则表示回调函数 function sendRequest(data, call_function){ // setTimeout来模仿客户端请求服务端中传输数据的时间。 // 当3秒钟后就调用回调函数(有客户端实现回调函数) setTimeout(function(){ call_function(data); // 调用回调函数 }, 3000); } // 测试sendRequest函数 sendRequest("参数", function(context){ alert("context=" + context); });
模块 模块是一个提供接口而隐藏状态和实现的函数或对象。 Function.prototype.method = function(name,func){ this.prototype[name] = func; return this; }; String.method("deentityify",function(){ var entity = { quot : '"', lt : '<', gt : '>' }; return function(){ return this.replace(/&([^&;]+);/g, function(a, b){ // 怎样知道a、b的值,了解正则表达式 var r = entity[b]; return typeof r === "string" ? r : a; }); }; }()); alert("<">".deentityify()); // 测试:<"> 注:模块模式通常结合单例模式使用,JavaScript的单例模式就是用对象字面量方式创建的对象,对象的属性值可以是数值或函数,并且属性值在该对象的生命周期中不会发生变化。 级联(链式操作) var $ = function(id){ var obj = document.getElementById(id); obj.setColor = function(color){ this.style.color = color; return this; }; obj.setBgColor = function(color){ this.style.backgroundColor = color; return this; // 返回this对象,启动级联 }; obj.setFontSize = function(size){ this.style.fontSize = size; return this; }; return obj; }; $("test").setColor("red") .setFontSize("30px") .setBgColor("blue"); // 改进后的代码: (function(id){ var _$ = function(id){ this.element = document.getElementById(id); }; _$.prototype = { setColor : function(color){ this.element.style.color = color; return this; }, setBgColor : function(color){ this.element.style.backgroundColor = color; return this; }, setFontSize : function(size){ this.element.style.fontSize = size; return this; } }; // 添加到window原型链中 window.$ = function(id){ return new _$(id); }; })(); $("test").setColor("red") .setFontSize("30px") .setBgColor("blue"); 套用 // 第一种方式: var add = function(a){ return function(b){ return a + b; } }; alert(add(1)(2)); // 3 // 第二种方式:用arguments实现 var add = function(){ var arg = arguments; return function(){ var sum = 0; for(var i=0; i<arg.length; i++){ sum += arg[i]; } for(i=0; i<arguments.length; i++){ sum += arguments[i]; } return sum; } }; alert(add(1,2,3)(4,5,6)); // 21 // 第三种方式:通过一个套用方法(curry)实现 var add = function(){ var sum = 0; for(var i=0; i<arguments.length; i++){ sum += arguments[i]; } return sum; }; // 添加方法到Function的原型链上 Function.prototype.method = function(name, func){ this.prototype[name] = func; return this; }; // 套用方法 Function.method('curry', function(){ // 通过数组Array的slice方法,使得arguments也具有concat方法 var slice = Array.prototype.slice, args = slice.apply(arguments), that = this; return function(){ return that.apply(null, args.concat(slice.apply(arguments))); }; }); alert(add.curry(1,2)(3,4)); // 10
记忆 var fibonacci = function(){ var mome = [0,1]; // 存放计算后的数据 var fib = function(n){ var result = mome[n]; // 如果不存在被计算过的数据,则直接计算。然后在将计算结果缓存 if(typeof result !== 'number'){ result = fib(n-1) + fib(n-2); mome[n] = result; } return result; }; return fib; }(); for(var i=0; i<=10; i++){ document.writeln("// " + i + ": " + fibonacci(i) + "<br/>"); } //========================== // 创建一个具有记忆的函数 //========================== var memoizer = function(memo, fundamental){ var shell = function(n){ var result = memo[n]; if(typeof result !== "number"){ result = fundamental(shell, n); memo[n] = result; } return result; }; return shell; }; // 通过记忆函数memoizer完成斐波那契数列 var fibonacci = memoizer([0,1], function(shell, n){ return shell(n-1) + shell(n-2); }); // 通过记忆函数memoizer完成阶乘 var factorial = memoizer([1,1], function(shell, n){ return n * shell(n-1); }); for(var i=0; i<=15; i++){ document.writeln("// " + i + ": " + factorial(i) + "<br/>"); } 自更新函数(Self-update Function) function selfUpdate() { window.selfUpdate = function() { alert('second run!'); }; alert('first run!'); } selfUpdate(); // first run! selfUpdate(); // second run! 这种函数可以用于只运行一次的逻辑,在第一次运行之后就整个替换成一段新的逻辑。 使用函数 //声明一个函数,接受两个参数,返回其和 function add(x, y){ return x + y; } var a = 0; a = add;//将函数赋值给一个变量 var b = a(2, 3);//调用这个新的函数a print(b); 这段代码会打印”5”,因为赋值之后,变量a引用函数add,也就是说,a的值是一个函数对象(一个可执行代码块),因此可以使用a(2, 3)这样的语句来进行求和操作。 事实上,这个例子与上个例子的本质上是一样的,第一个例子中的a变量,事实上是全局对象(如果在客户端环境中,表示为window对象)的一个属性。而第二个例子则为obj对象,由于我们很少直接的引用全局对象,就分开来描述。 //高级打印函数的第二个版本 function adPrint2(str, handler){ print(handler(str)); } //将字符串转换为大写形式,并返回 function up(str){ return str.toUpperCase(); } //将字符串转换为小写形式,并返回 function low(str){ return str.toLowerCase(); } adPrint2("Hello, world", up); adPrint2("Hello, world", low); 运行此片段,可以得到这样的结果:
function currying(){ return function(){ print("curring"); } } 函数currying返回一个匿名函数,这个匿名函数会打印”curring”,简单的调用currying()会得到下面的结果: function (){print("curring");} 如果要调用currying返回的这个匿名函数,需要这样: 第一种:方法调用模式 var person = { name: "defaultName", setName : function(name){ this.name = name; } }; person.setName("zhangsan"); alert(person.name); 第二种:函数调用模式 var test = add(value1, value2); var name = "defaultName"; var person = { name: "zhangsan", // person中定义的name getName : function(){ // 通过此方法可以将test函数的this改变为person的this对象 var that = this; // 解决方案 // getName中定义的name var name = "lisi"; var test = function(){ // 通过that来访问person中的对象 // this指向Global对象 // this.name = defaultName // that.name = zhangsan alert([this.name, that.name]); }; test(); // 函数调用模式 } } person.getName(); 第三种:构造器调用模式 // 定义一个Person的构造器,在调用时一定要用new调用 var Person = function(name){ this.name = name; } // 添加一个方法到Person Person.prototype.getName = function(){ return this.name; }; // 构造一个Person对象 var person = new Person("zhangsan"); alert(person.getName()); // 调用getName获取person对象中name属性的值 第四种:Apply调用模式 |
|
来自: _明心见性_ > 《JavaScript》