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 相关文章推荐
JQuery 学习笔记 element属性控制
Jul 23 Javascript
jquery next nextAll nextUntil siblings的区别介绍
Oct 05 Javascript
JavaScript中如何通过arguments对象实现对象的重载
May 12 Javascript
javascript实现图片跟随鼠标移动效果的方法
May 13 Javascript
javascript手风琴下拉菜单实现代码
Nov 12 Javascript
微信小程序 SocketIO 实例讲解
Oct 13 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 Javascript
微信小程序本地缓存数据增删改查实例详解
May 24 Javascript
AngularJS 中的数据源的循环输出
Oct 12 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
JavaScript创建对象方法实例小结
Sep 03 Javascript
VUE中setTimeout和setInterval自动销毁案例
Sep 07 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
轻松修复Discuz!数据库
2008/05/03 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
JavaScript模拟实现封装的三种方式及写法区别
2017/10/27 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
浅谈mint-ui 填坑之路
2017/11/06 Javascript
vue中过滤器filter的讲解
2019/01/21 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
Python中的字符串类型基本知识学习教程
2016/02/04 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
Python中的Numpy矩阵操作
2018/08/12 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析)
2019/06/28 Python
英国最大的宠物商店:Pets at Home
2019/04/17 全球购物
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
公务员职务工作的自我评价
2013/11/01 职场文书
物流毕业生个人的自我评价
2014/02/13 职场文书
开学典礼策划方案
2014/05/28 职场文书
学校2014年度工作总结
2014/12/06 职场文书
2015秋季开学典礼主持词
2015/07/16 职场文书
小学六年级毕业感言
2015/07/30 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js