JavaScript中Function详解


Posted in Javascript onFebruary 27, 2015

关键字function用来定义函数。

//函数声明式定义:

function funcname([arg1[,args[...,argn]]]){

 statements 

}

//函数表达式定义:

var funcname = function ([arg1[,args[...,argn]]]){

 statements 

};

注意,function语句里的花括号是必需的,即使函数体只包含一条语句。

在JavaScript中,函数是Function类的具体实例。而且都与其它引用类型一样具有属性和方法。

函数名实际上是指向函数对象的指针,函数可以作为参数参与到传参和返回值中。

函数的对象特性

因为函数是Function的实例,而函数名仅仅是该实例的一个引用地址。因此可以作为参数和返回值参与到函数的传参过程中。

function call_some_function(some_function, some_argument) {

    return some_function(some_argument);

}

function add_10(num) {

    return num + 10;

}

console.log(call_some_function(add_10,20)); //30

函数的内部属性

arguments | this
•arguments对象中保存着传递给函数的参数
•arguments.length返回传入参数的个数
•Note: length属性表示函数定义时候默认接收的参数数量。arguments.length表示函数实际执行时接收的参数数量。

function test_arguments() {

    if (arguments.length == 2) {

        console.log(arguments.length); 

        console.log(arguments); 

    } else {

        console.log(arguments.length); 

        console.log(arguments); 

        arguments.callee(4, 5);

    };

}(1, 2, 3)

/**

 3

{ '0': 1, '1': 2, '2': 3 }

2

{ '0': 4, '1': 5 }

 **/

•arguments.callee()主要用在递归函数中调用函数自身的情境中。js和别的语言不同在于函数名只是一个指针,可以随时变化,函数中利用函数名来调用自身属于高耦合,可能会出现问题,而arguments.callee()调用自身就会规避掉这个问题

function factorial(num) {

    if (num <= 1) {

        return 1;

    } else {

        return num * factorial(num - 1);

    };

}

function callee_f(num) {

    if (num <= 1) {

        return 1;

    } else {

        return num * arguments.callee(num - 1);

    };

}

factorial(10); //运行正常

f = factorial;

factorial = null;

f(10); //error

callee_f(10); //运行正常

f = callee_f;

callee_f = null;

f(10); //运行正常

•this主要用来帮助函数引用函数所处作用域中的对象。

var color = 'red';

function syaColor() {

    console.log(this.color);

}

syaColor(); //red

var o = new Object();

o.color = 'blue';

o.sayColor = sayColor;

o.sayColor(); //blue

call()和apply()

call()和apply()是每个函数都包含的自有方法。之前已经提到了函数是定义的对象,那么调用函数时候,函数中的this是对当前与下变量的调用。而如果想改变函数执行所在域空间,则可以使用call()和apply()来实现。

color = 'red';

var o = {color: 'blue'};

function sayColor() {

    console.log(this.color);

}

sayColor(); //red

sayColor.call(this); //red

sayColor.call(o); //blue

app()和call()的作用是相同的,区别主要在于传入参数的不同。

call(this,para1,prar2,prar3) 第一个参数是函数要执行的作用域,后面的参数是函数的输入参数,有多少个依次写多少个。

apply(this,[para1,para2,prara3])第一个参数也是函数要执行的作用域,后面是一个Array的数组对象。

使用call()/apply()来扩充作用域最大的好处是对象和方法的解耦。

内置对象

Global对象可以理解成最外层的对象,所有的对象,以及不属于其它对象的属性和方法都被包含在Global对象中。
* isNaN(x) 用来检查参数x是否为数字。如果为数字返回false,否则返回true
* isFinite(x) 用来检查参数x是否为无穷大/小,如果是无穷大/小,则返回true
* parseInt(x) 用来解析字符串并返回整数
* parseFloat(x) 用来解析字符串并返回浮点数
* encodeURI()和encodeURIComponent()会对字符串进行特殊的UTF-8编码,规避一些特殊字符来让浏览器能够读懂。他俩的区别主要在于encodeURI()不会对本身属于URI的特殊字符进行编码,而encodeURIComponent()会对其发现的所有非标准字符进行编码。

var uri = "http://www.wrox.com/illegal value.htm#start";

//http://www.wrox.com/illegal%20value.htm#start

console.log(encodeURI(uri))

//http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start

console.log(encodeURIComponent(uri))

•对应的解码函数为decodeURI()和decodeURIComponent()
•eval(script) 用来将script的内容在解释器中执行并返回对应的结果。非常强大!

Note:在浏览器中,windows对象封装了Global对象,并承担了很多额外的任务和功能。

Math对象为另一个内置对象。为JavaScript提供了数学计算功能。

以上就是本文的全部内容了,希望小伙伴们能够喜欢,能够对大家有所帮助。

Javascript 相关文章推荐
如何使Chrome控制台支持多行js模式——意外发现
Jun 13 Javascript
js获取html文件的思路及示例
Sep 17 Javascript
jQuery中wrapInner()方法用法实例
Jan 16 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 Javascript
Vue.js路由vue-router使用方法详解
Mar 20 Javascript
基于iScroll实现下拉刷新和上滑加载效果
Jul 18 Javascript
three.js中3D视野的缩放实现代码
Nov 16 Javascript
详解Node.js异步处理的各种写法
Jun 09 Javascript
element的el-table中记录滚动条位置的示例代码
Nov 06 Javascript
JS实现图片产生波纹一样flash效果的方法
Feb 27 #Javascript
js实现鼠标触发图片抖动效果的方法
Feb 27 #Javascript
javascript实现当前页导航激活的方法
Feb 27 #Javascript
jquery 根据name名获取元素的value值
Feb 27 #Javascript
jQuery使用元素属性attr赋值详解
Feb 27 #Javascript
jquery实现公告翻滚效果
Feb 27 #Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
Feb 26 #Javascript
You might like
[原创]PHP中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
JavaScript 应用类库代码
2008/06/02 Javascript
JavaScript国旗变换效果代码
2008/08/13 Javascript
javascript 全角转换实现代码
2009/07/17 Javascript
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
js获取当前select 元素值的代码
2010/04/19 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/06 Javascript
JS分页控件 可用于无刷新分页
2013/07/23 Javascript
通过js简单实现将一个文本内容转译成加密文本
2013/10/22 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
JavaScript使用Range调色及透明度实例
2016/09/25 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
2020/07/31 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
[02:51]DOTA2 Supermajor小组分组对阵抽签仪式
2018/06/01 DOTA
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
Python基础之文件读取的讲解
2019/02/16 Python
提升Python程序性能的7个习惯
2019/04/14 Python
PyQt5 加载图片和文本文件的实例
2019/06/14 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
python实现银行账户系统
2021/02/22 Python
莫斯科绝对前卫最秘密的商店:SVMoscow
2017/10/23 全球购物
党员岗位承诺口号大全
2014/03/28 职场文书
教师节宣传方案
2014/05/23 职场文书
介绍信范文
2015/01/31 职场文书