JavaScript函数详解

1、函数定义

函数包含一组语句,它们是javascript的基础模块单元,用于代码复用、信息隐藏和组合调用函数用于指定对象的行为

2、函数的四种调用模式及this的初始化

第一种:方法调用模式

以下事例证明通过方法调用模式调用时,this绑定到拥有该方法的对象。如:

代码如下:

第二种:函数调用模式

以下事例证明通过函数调用模式调用时,this绑定到全局对象上。如:

代码如下:
方法可以将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();

第三种:构造器调用模式

代码如下:
调用时一定要用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调用模式

代码如下:
方法。如sum(1,2,3,4...) // 该方法位于window执行环境中。 var displayName = function(){ alert("sum的执行环境: " + typeof(this)); alert("Name: " + this.name); // 取出当前执行环境中name属性 } // 定一个Person对象 var Person = { name: "zhangsan" }; displayName.apply(Person);

3、Apply和call的区别

代码如下:
方法,返回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是通过将被调函数的所有参数以逗号分隔的形式展开

4、函数参数(arguments)

arguments并不是一个数组,只是与数组相似。arguments除了拥有length属性,数组的所有属性方法都不具备。用arguments来实现一个累加的函数

代码如下:

5、函数返回值(return)

当一个函数被调用,通常会从函数的{开始执行到}结束。如果想提前结束该函数的执行可以使用return语句,此时,return语句后面的所有语句将永远不会执行。如:

代码如下:
函数总是会返回值,如果没有使用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

6、异常(exception)

异常是干扰程序正常流程的非正常事故(可能人为有意的)。当检查出这样的事故,应当抛出异常。如:

代码如下:
函数 // 如果传递的参数不是数字类型,则抛出一个异常信息 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); } } })();

7、给类型添加方法

javascript中允许给基本类型添加方法。如:boolean、string、Number 实例:在Function中添加一个method函数,该函数为Function添加其他自定义函数(避免使用prototype),然后利用method函数想Function中添加一个add函数,最后测试add函数在Function中确实存在。该方法将func函数添加到Function中,以name命名。然后,返回Function的对象

代码如下:
方法 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

8、递归调用(arguments.callee)

递归调用就是自己调用自己。调用分为:直接调用和间接调用下面展示使用递归调用来计算指定值的斐波那契数列。

代码如下:
调用 } 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));

9、作用域

代码如下:
函数作用域,所以在函数内部定义的变量在外部是不可见的 alert(name); // default

注意:在现代的很多语言中,推荐将变量尽可能的延迟声明。如:java而在js中,却不推荐这样做,因为js不支持块级作用域。推荐在函数的开始就将所有用到的变量进行声明。

10、闭包

函数能够访问它被创建时环境的上下文称为闭包。作用域的好处是,内部函数可以访问外部函数的所有变量(除this和arguments)。

代码如下:

11、回调(callbacks)

代码如下:
函数 function sendRequest(data,call_function){ // setTimeout来模仿客户端请求服务端中传输数据的时间。 // 当3秒钟后就调用回调函数(有客户端实现回调函数) setTimeout(function(){ call_function(data); // 调用回调函数 },3000); } // 测试sendRequest函数 sendRequest("参数",function(context){ alert("context=" + context); });

12、模块

模块是一个提供接口而隐藏状态和实现的函数或对象。 一般形式:一个定义了私有变量和函数函数;利用闭包创建可以访问私有变量和函数的特权函数;最后返回这个特权函数,或者把他们保存到一个可以被访问到的地方。

代码如下:
' }; return function(){ return this.replace(/&([^&;]+);/g,b){ // 怎样知道a、b的值,了解正则表达式 var r = entity[b]; return typeof r === "string" ? r : a; }); }; }()); alert("<">".deentityify()); // 测试:<">

注:模块模式通常结合单例模式使用,JavaScript的单例模式就是用对象字面量方式创建的对象,对象的属性值可以是数值或函数,并且属性值在该对象的生命周期中不会发生变化。

13、级联(链式操作)

对于一些不返回值的方法,我们返回this,而不是undefined,那么我们就可以启动以级联(链式)去操作该对象。如下:

代码如下:
代码: (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");

14、套用

所谓套用就是将函数与传递给它的参数相结合,产生一个新的函数。如:下面代码中定义一个add()函数,该函数能够返回一个新的函数,并把参数值传递给这个新函数,从而实现连加操作。

代码如下:

15、记忆

函数可以用对象去记住先前操作的结果,从而能避免无谓的运算。这种优化被称为记忆。

代码如下:
"); } //========================== // 创建一个具有记忆的函数 //========================== 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,n){ return n * shell(n-1); }); for(var i=0; i<=15; i++){ document.writeln("// " + i + ": " + factorial(i) + "
"); }

小伙伴们看明白了没,非常实用吧,如有遗漏的地方,还请大神们指点下,共同进步

相关文章

事件冒泡和事件捕获 起因:今天在封装一个bind函数的时候,发现el.addEventListener函数支持第三个参数...
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型,number类型相当于其他强类型语言...
什么是跨域 跨域 : 广义的跨域包含一下内容 : 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源...
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知,也是须知的必须有...
搞懂:MVVM模式和Vue中的MVVM模式 MVVM MVVM : 的缩写,说都能直接说出来 :模型, :视图, :视图模...
首先我们需要一个html代码的框架如下: 我们的目的是实现ul中的内容进行横向的一点一点滚动。ul中的内容...