javascript函数定义-调用-变量-参数-return语句-预定义函数-编码-解码-作用域

作者: 鲁智深 分类: JAVASCRIPT 发布时间: 2015-12-04 23:51

函数是这样的一段 JavaScript 代码,它只定义一次,但可能被执行或调用多次。简单来说,函数就是一组可重用的代码,你可以在你程序的任何地方调用他。

函数定义调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//函数声明方式
function fn() {
    console.log('声明一个函数');
}

//字面量方式
var fn1 = function () {
    console.log('字面量方式函数');
}

//函数调用方式
fn();
fn1();
//变量方式调用是function类型
console.log(fn1);

函数和变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//定义一个变量
var fn = '这是一个全局变量';
console.log(fn);

//字面量定义一个函数
var fn = function () {
    console.log('这是一个函数');
}

//调用变量
console.log(fn);//发现输出一个[Function],函数字面量定义将全局变量覆盖了

//调用一个函数
fn();
1
2
3
4
5
6
7
8
9
10
11
12
//定义一个变量
var fn = '这是一个全局变量';
console.log(fn);

//声明方式定义函数
function  fn() {
    console.log('这是一个声明方式定义的函数');
}
console.log(fn);

//调用函数返回报错了
fn();//TypeError: fn is not a function---不是一个函数

函数的参数

函数的定义—形参:在函数体中,刑参可以类似于变量的使用

1
2
3
4
5
6
7
8
function fn(a) {
    //var a = 200;//变量在函数体内也不能用于函数体外
    console.log(a);//函数体
}
//100是函数的实参
fn(100);

console.log(a);// 函数的形参:在函数体外,是无法被访问(调用)的

全局变量在函数的函数体外

1
2
3
4
5
6
var a = 100;
function fn(a) {
    console.log(a);
}
console.log(a);//输出100,证明a如果在函数体外,是可以被console访问的
fn(a);//输出100,这里的a是实参,传值给形参中,console输出a

函数参数的耦合度

1
2
3
4
5
6
7
8
9
10
11
12
13
//耦合度高
var b = 100;
function fn1() {
    console.log(b);
}
fn1();

//耦合度较低(推荐方法)
var a = 200;
function fn(c) {
    console.log(c);
}
fn(a);

函数形参和实参

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
//形参,这里的形参可以定义多个用逗号隔开
function fn(a,b,c) {
    console.log(a+b+c);
}
fn(10,20,30);//这里的赋值就是实参,这里的实参可以定义多个用逗号隔开

//定义4个形参看看,也是没有问题的
function  fn1(a,b,c,d) {
    console.log(a+b+c+d);
}
fn1(10,20,30,40);

// 形参的个数多于实参的个数 - 多余的形参的值为 undefined
function fn2(a,c,f,g) {
    console.log(a+c+f+g);
    console.log(g);//输出是nudefined,所有acfg相加成为一个非数字
}
fn2(10,30,10);//返回时NaN

// 实参的个数多于形参的个数 - 多余的实参的值,形参无法接收
function fn3(a,b) {
    console.log(a+b);
    console.log(arguments);
    //如果我用arguments对象输出内容发现,实际接收的有3个实参
    //arguments对象的主要作用是不需要形参,就能接收全部实参
}
fn3(10,30,50);

//小案例研究一
var a = 100;//这里的100和形参中的a不存在传值
function fn4(a) {//这里是形参由实参进行传值
    console.log(a);//调用输出形参值
}
fn4(200);
//小案例研究二
function fn5(a) {//这里是形参由实参进行传值
    var a = 100;//这里的100赋值(格式化)变量a(局部变量)
    console.log(a);//调用输出形参值100
}
fn5(200);
//小案例研究三
var b = 100;
function fn6(b) {
    b = b-10;
}
fn6(b);//函数体没有返回值,也没有赋值(格式化)b,b还是输出全局变量的100
console.log(b);//100

函数return语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//直接量定义函数并返回return
var fn = function(a) {
      b = a + a;
      return b;
}
console.log(fn(10));//这里输出20,就是return返回的值

//声明函数并返回return
function fn1(a) {
    b = a + a;
    return b;
}
console.log(fn(10));//这里输出20,就是return返回的值

//return语句后加上定义代码之后
function  fn2(a) {
    b = a + a;
    console.log(b);//加在return语句钱的代码执行了
    return b;
    console.log(b);//加在return语句后的代码发现不执行了,函数的返回值 return,尽量定义在函数体的最后面
}
console.log(fn2(20));

预定义函数

eval函数和uneval函数

JavaScript 预定义了一组函数,又称为全局函数,允许直接使用。

预定义函数

预定义函数

定义一个字符串类型的JavaScript代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function fn () {
    console.log(100);
}
var a = 'fn()';

//将字符串变成js代码并输出
eval(a);//输出100

//将js转化为字符串
var b = 1;
uneval(b);//uneval is not defined,目前只有火狐浏览器支持此函数

/*
 eval()函数使用
 * 好处 - 可以利用这种方式有效地保护核心代码(存储在服务器端)
 * 坏处 - Web安全性低(目前不推荐使用)
 */

编码和解码

1
2
3
4
5
6
7
8
9
var uri = "http://www.atguigu.com/Web前端开发工程师";
uri = encodeURI(uri);//编码
console.log(uri);
uri = decodeURI(uri);//解码
console.log(uri);
/*
 * URI - 统一资源标识符
 * URL - 统一资源定位符
 */

函数作用域

变量和函数都具有作用域。作用域就是变量和函数的可被访问的范围,控制着变量和函数的可见性和生命周期。

变量的作用域可被分为全局作用域和函数作用域(局部作用域)。如果变量是被定义在全局作用域的话,在 JavaScript 代码中的任何位置都可以访问该变量;如果变量是被定义在指定函数内部的话,在 JavaScript 代码中只能在该函数内访问该变量。

函数的作用域也可被分为全局作用域和函数作用域(局部作用域)。被定义在指定函数内部的函数被称之为局部函数或内部函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//全局变量
var str = '123';
function  fn() {
    console.log(str);
}
fn();//能输出123,全局作用域变量能在被函数作用域中允许访问

//局部变量(私有变量)
function fn1() {
    var num = 100;
    console.log(num);//只能在当前函数作用域中被访问
}
fn1();

console.log(num);//报错,ReferenceError: num is not defined私有变量不能被外部使用

局部变量定义var关键字的问题

1
2
3
4
5
6
7
8
9
10
11
12
13
// 在函数作用域中,定义局部变量,不使用 var 关键字时 - 自动提升为全局变量

function fn() {
    var a = 100;
}
fn();//调用函数
//console.log(a);//ReferenceError: a is not defined定义变量时前面使用var关键字,局部变量(私有变量)不能被外部调用

function fn1() {
    b = 100;
}
fn1();//调用函数
console.log(b);//输出100,定义变量时前面不 no no 使用var关键字,局部变量(私有变量)能被外部调用

声明变量提前

1
2
3
4
5
6
function fn() {
    console.log(a);//undefined,为格式化变量,但是声明了变量,所有声明提前了
    var a = 100;
    console.log(a);
}
fn();

全局变量与局部变量同名时

1
2
3
4
5
6
7
8
var a = 100;
function fn(){
    console.log(a);//undefined提前声明变量了
    var a = 200;//加了var关键字的变量成为了局部变量,无法被外籍调用
    console.log(a);
}
fn();//函数作用域中只访问到局部变量
console.log(a);//输出的是全局变量

函数的形参 – 函数体中改变的都是形参的值,与全局变量无关

1
2
3
4
5
6
7
8
var a = 100;//全局变量
function fn(a) {
    console.log(a);
    a = a +10;
    console.log(a);
}
// 函数的实参 -> 对应全局变量
fn(a);

函数的形参与局部变量的关系

1
2
3
4
5
6
7
8
9
function fn(str) {
    console.log(str);//形参只是初始化了局部变量的值,在函数体内,还是按流程走
    var str = 100;
    console.log(str);
    str = str - 5;
    console.log(str);
    console.log(str/2);
}
fn(10);

变量的就近原则定义

1
2
3
4
5
6
7
8
9
10
11
var num = 100;
function fn(num) {

    var num = 200;

    console.log(num);
    //当num最近有局部变量时,会直接找,局部变量
    //当没有全局变量,num最近有形参时,找形参
    //当没有全局变量和形参时,那就找局部变量
}
fn();

作用域链,函数的多层嵌套

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//作用域链,函数的多层嵌套
var a = 100;
function fn() {
    var a = 'a';//局部变量
    function fn1() {//内部函数
        var b = 'b';//局部变量
        function fn2() {//内部函数
            var c = 'c';//局部变量
            console.log(a,b,c);
        }
        fn2();
    }
    fn1();
}
fn();

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注