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 相关文章推荐
javascript编程起步(第二课)
Feb 27 Javascript
简短几句 通俗解释javascript的闭包
Jan 17 Javascript
js中的eventType事件及其浏览器支持性介绍
Nov 29 Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 Javascript
JS中常用的正则表达式
Sep 29 Javascript
深入探究node之Transform
Jul 20 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
May 13 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
Sep 19 Javascript
vue实现重置表单信息为空的方法
Sep 29 Javascript
防止Layui form表单重复提交的实现方法
Sep 10 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 Javascript
ElementUI实现el-form表单重置功能按钮
Jul 21 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
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
用PHP实现读取和编写XML DOM代码
2010/04/07 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
Zend Framework动作助手FlashMessenger用法详解
2016/03/05 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
零基础php编程好学吗
2019/10/11 PHP
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
JS判断元素为数字的奇异写法分享
2012/08/01 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
drag-and-drop实现图片浏览器预览
2015/08/06 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
完美实现js焦点轮播效果(一)
2017/03/07 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
npm的lock机制解析
2019/06/20 Javascript
JS实现图片切换特效
2019/12/23 Javascript
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
python实现拉普拉斯特征图降维示例
2019/11/25 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
深入浅析python的第三方库pandas
2020/02/13 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
利用css3如何设置没有上下边的列表间隔线
2017/07/03 HTML / CSS
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
Html5 滚动穿透的方法
2019/05/13 HTML / CSS
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
师范生自我鉴定范文
2013/10/05 职场文书
党员公开承诺书
2014/03/25 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
创业计划书之校园跑腿公司
2019/09/24 职场文书
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android
python常见的占位符总结及用法
2021/07/02 Python