JavaScript函数01

目录

  • 函数的意义
  • 函数的作用
  • 函数三种声明方式
  • 形参和实参
  • arguments对象
  • 函数的重复声明
  • 函数的返回值

函数的意义

函数是一段反复可以调用的代码块。

函数的作用

  • 代码复用
  • 让代码变得更可靠,更稳定
  • 增加代码安全程度
  • 创建函数作用域,避免变量污染

函数声明方式

js中有三种函数的声明方式:
1. function命令
function命令声明的代码区块,就是一个函数。function命令后面就是函数名,函数名后面是一对圆括号,里面是传入函数的参数,函数体放在打括号里面。
例如:

function fn1() {
    // code...
}

上面的代码定义了一个fn1函数,我们想要使用这个函数,只需要通过fn1()这种形式即可执行其中相应的代码段。
这就叫做函数的声明(Function Declaration)

2. 函数表达式
采用变量赋值的方式。
示例:

var fn1 = function() {
    console.log('hello,world!');
}

这种写法是将一个匿名函数赋值给变量。这时,这个匿名函数又称为函数表达式(Function Expression),因为赋值语句的等号右侧只能放表达式。
采用函数表达式声明函数时,function命令后面不带有函数名。如果加上函数名,该函数名只在函数体内部有效,在函数体外部无效。
例如:

var fn1 = function test() {
  console.log(typeof test);
};
fn1(); // 通过这种调用方式可以顺利执行代码
test(); // 通过这种调用方式则会出现not defined 错误。

在实际开发的过程中,上面的这种在使用函数表达式写法并且同时给函数设置名字的做法其实很常见。
这么做的目的有两个:

  • 可以非常方便的在函数体内部调用自身
  • 方便除错,除错工具显示函数调用栈时,将显示函数名,而不再显示这里是一个匿名函数
var f = function f() {};

需要注意的是,函数的表达式需要在语句的结尾加上分号,表示语句结束。而函数的声明在结尾的大括号后面不用加分号。

3. Function 构造函数
例如:

var add = new Function (
    'x',
    'y',
    'return x + y'
    );
console.log(add);

上面这个通过构造函数创建的代码与下面的代码大体是相等的:

function add(x,y) {
    return x + y;
}

上面通过构造函数创建函数的代码中,Function构造函数接受三个参数,除了最后一个参数是add函数的“函数体”,其他参数都是add函数的参数。
你可以传递任意数量的参数给Function构造函数,只有最后一个参数会被当做函数体,如果只有一个参数,该参数就是函数体。

var foo = new Function(
  'return "hello world";'
);
// 等同于
function foo() {
  return 'hello world';
}

总的来说,这种声明函数的方式非常不直观,几乎无人使用。

圆括号运算符

在我们调用函数的时候,要使用圆括号运算符。圆括号之中,可以加入函数的参数。
例如:

function fn1() {
    console.log("hello,world!");
}
fn1();

在上面的案例中,函数名后面紧跟一对圆括号,就会调用这个函数。
我们也可以通过在调用函数的时候传递参数从而实现数据的传递。

function sayHello(name) {
    console.log("你好,"+name);
}
sayHello("张三");

一般情况下,我们将函数名后面的括号里面的参数称之为形参,而在调用函数时使用的圆括号里面传递的参数,我们称之为实参

形参和实参

/ *
* 定义一个用来求两个数和的函数
*    可以在函数的()中指定一个或多个形参(形式参数)
*   多个形参之间使用 ,隔开,声明形参就相当于在函数内部声明了对应的变量,但是并不赋值
*
/
function sum(a,b) {
    console.log(a+b);
}
/*
* 在调用函数时,可以在()中指定实参(实际参数)
*    实参将会赋值给函数中对应的形参
/
/*
* 在调用函数时,解析器不会检查实参的类型,
*    所以要注意,是否有可能会接收到非法的参数,如果有可能则需要对参数进行类型的检查
  函数的实参可以是任意类型的数据类型
/
// sum(123,"hello"); // "123hello"
// sum(true,false); // 1

/*
*  调用函数时,解析器也不会检查实参的数量,
*   多余实参不会被赋值
*   如果实参的数量小于形参的数量,则没有对应实参的形参将是undefined
*/
// sum(123,234,"hello","hsdf",true,null);
// sum(123);

arguments对象

arguments(ar gei men ci)对象包含了函数运行时所有的参数(实参),arguments[0]就是第一个参数,arguments[1]就是第二个参数,以此类推。
需要注意的是,这个对象只有在函数体内部才能使用。

function f1() {
    // 获取传入的实参
    console.log(arguments[0]);
    console.log(arguments[1]);
    console.log(arguments[2]);
    console.log(arguments[3]);
}
f1(1,2,3,4);// 1 2 3 4

在正常的模式下,arguments对象可以在运行的时候进行修改。

var f = function(a, b) {
  arguments[0] = 3;
  arguments[1] = 2;
  return a + b;
}

f(1, 1) // 5

上面代码中,函数f调用时传入的参数,在函数内部被修改成3和2。

严格模式下,arguments对象与函数参数不具有联动关系。也就是说,修改arguments对象不会影响到实际的函数参数。

var f = function(a, b) {
  'use strict'; // 开启严格模式
  arguments[0] = 3;
  arguments[1] = 2;
  return a + b;
}

f(1, 1) // 2

上面代码中,函数体内是严格模式,这时修改arguments对象,不会影响到真实参数a和b。

length属性
通过arguments对象的length属性,可以判断函数调用时到底带几个参数。

function f() {
  return arguments.length;
}

f(1, 2, 3); // 3
f(1); // 1
f(); // 0

与数组的关系 -- 类数组对象
需要注意的是,虽然arguments很像数组,但它是一个对象。数组专有的方法(比如sliceforEach),不能在arguments对象上直接使用。

如果要让arguments对象使用数组方法,真正的解决方法是将arguments转为真正的数组。下面是两种常用的转换方法:slice方法和逐一填入新数组。

var args = Array.prototype.slice.call(arguments);

// 或者
var args = [];
for (var i = 0; i < arguments.length; i++) {
  args.push(arguments[i]);
}

callee属性
arguments对象带有一个callee属性,返回它所对应的原函数。

var f = function () {
  console.log(arguments.callee === f);
}

f() // true

可以通过arguments.callee,达到调用函数自身的目的。这个属性在严格模式里面是禁用的,因此不建议使用。

函数重复声明

当在js代码中出现函数重复声明的情况(也就是函数名相同),那么后面的函数会把前面的函数给覆盖掉。

function fn1() {
    console.log(1111);
}
function fn1() {
    console.log(2222);
}
fn1(); // 2222

函数返回值

  • return语句

js函数体内的return语句,表示返回。
JavaScript 引擎遇到return语句,就直接返回return后面的那个表达式的值,后面即使还有语句,也不会得到执行。也就是说,return语句所带的那个表达式,就是函数的返回值。return语句不是必需的,如果没有的话,该函数就不返回任何值,或者说返回undefined。

例如:

function fn1(){
    var name = "zhangsan";
    var  age = 19;

    return name + "今年" + age + "岁!";
}

上面的案例中我们在函数体内设置了一个返回值。返回值会将表达式的结果从函数体内返回到函数体的外部,让我们可以在函数外部访问。
那么该如何访问函数的返回值呢?

例如:

function fn1(){
    var name = "zhangsan";
    var  age = 19;

    return name + "今年" + age + "岁!";
}
// 可以直接打印调用函数的语句。就可以在调用函数的同时还打印出返回值
console.log(fn1());
// 也可以直接将返回值赋值给一个变量
var return_value = fn1(); // 函数在执行的同时也将返回值赋值给了变量return_value
console.log(return_value);

如果函数内没有返回值,但是我们偏偏还来打印,那么结果将返回undefined。

function fn1(){
    var name = "zhangsan";
    var  age = 19;
}
console.log(fn1()); // undefined
var return_value = fn1();
console.log(return_value);//undefined
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,233评论 6 495
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,357评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,831评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,313评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,417评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,470评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,482评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,265评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,708评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,997评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,176评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,827评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,503评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,150评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,391评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,034评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,063评论 2 352

推荐阅读更多精彩内容