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 相关文章推荐
js apply/call/caller/callee/bind使用方法与区别分析
Oct 28 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
Jan 11 Javascript
30个最佳jQuery Lightbox效果插件分享
Apr 11 Javascript
extjs ColumnChart设置不同的颜色实现代码
May 17 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
Google 地图事件实例讲解
Aug 06 Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 Javascript
解析JS在获取当前月的最后一天遇到的坑
Aug 30 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
Sep 10 Javascript
Javascript 模拟mvc实现点餐程序案例详解
Dec 24 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入门源程序
2006/10/09 PHP
用 PHP5 轻松解析 XML
2006/12/04 PHP
深思 PHP 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
解析php入库和出库
2013/06/25 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
浅谈javascript 面向对象编程
2009/10/28 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
2010/11/30 Javascript
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
在javascript中关于节点内容加强
2013/04/11 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
使表格的标题列可左右拉伸jquery插件封装
2014/11/24 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
详解如何在项目中使用jest测试react native组件
2018/02/09 Javascript
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
vue中使用echarts制作圆环图的实例代码
2018/07/27 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
对vue事件的延迟执行实例讲解
2018/08/28 Javascript
layui的表单提交以及验证和修改弹框的实例
2019/09/09 Javascript
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
Python如何为图片添加水印
2016/11/25 Python
Centos7 下安装最新的python3.8
2019/10/28 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
使用python无账号无限制获取企查查信息的实例代码
2020/04/17 Python
浅谈关于html5中图片抛物线运动的一些心得
2018/01/09 HTML / CSS
九年级体育教学反思
2014/01/23 职场文书
竞选部门副经理的自荐书范文
2014/02/11 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
导游词之西安骊山
2019/12/03 职场文书
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers