JavaScript基础内容中的函数详解

函数

函数:即方法

函数就是一段预先设置的功能代码块，可以反复调用，根据输入参数的不同，返回不同的值。

为什么使用函数：

1.方便调用

2.代码重用，利于维护

3.便于修改，便于重构

4.简化逻辑，利于编程

1、声明函数

声明函数 function declaration 的三种方法

1）function 命令

function print(s) {
    document.write(s+"<br/>");
}

2）函数表达式

var printstr =function(str){
    document.write(str+"<br/>");
}

这种写法将一个匿名函数赋值给变量。这时，这个匿名函数又称函数表达式（function expression），因为赋值语句的等号右侧只能放表达式。

3）function 构造函数 : 入门级别用的不多….

var add = new function('x','y','return (x + y)');

// 等同于

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

var foo = new function(
    'return "hello world"'
);

// 等同于

function foo() {
    return "hello world";
}

注意:不能在条件语句中声明函数

函数名的提升

javascript 引擎将函数名视同变量名，所以采用 function 命令声明函数时，整个函数会像变量声明一样，被提升到代码头部。所以，下面的代码不会报错。

f();
function f() {}

表面上，上面代码好像在声明之前就调用了函数 f。但是实际上，由于“变量提升”，函数 f 被提升到了代码头部，也就是在调用之前已经声明了。但是，如果采用赋值语句定义函数，javascript 就会报错。

f();
var f = function (){};// typeerror: undefined is not a function

2、函数的调用

函数的调用:圆括号运算符

函数名([实参]);

存在返回值可以变量接收

print()
printstr("goodgoodstudy");
var result =add(1,2);

3、参数

参数: 形参与实参 函数运行的时候，有时需要提供外部数据，不同的外部数据会得到不同的结果，这种外部数据就叫参数。"种瓜得瓜种豆得豆"，使用时实参可以省略。

function square(x) { //x 为形参
    return x * x;
}

square(2) // 4 2 为实参

square(3) // 9

function f(a, b) {
    return a;
}
//实参可以省略
f(4, 2, 3) // 1
f(10) // 1
f() // undefined

同名参数：取最后的一个

function f(a, a) {
    console.log(a);
}

f(1, 2) // 2

默认值:使用 || 或运算

function f(a){
    a = a || 1;
    return a;
}

f('') // 1
f(0) // 1

//更精确写法
function f(a){
    (a !== undefined && a !== null) ? a = a : a = 1;
    return a;
}

值传递（passes by value）:值的副本

var box= 2;
function f(a) {
    a = 3;
}

f(box);
console.log(box) // 2 没有改变
//思考 对象值的改变
var obj = {p: 1};
function f(o) {
    o.p = 2;
}
f(obj);
console.log(obj.p) // 2

//思考
var obj = [1, 2, 3];
function f(o){
    o = [2, 3, 4];
}

f(obj);
console.log(obj) // [1, 2, 3]

arguments 对象: 获取所有的参数，可以看成数组。由于 javascript 允许函数有不定数目的参数，所以我们需要一种机制，可以在函数体内部读取所有参数。这就是 arguments 对象的由来。

var f = function(a) {
    for(var i in arguments){
        console.log(arguments[i]);
    }
}

f(1,2,3);

了解: callee

var add =function(){
    //获取调用者
    console.log(arguments.callee === add); //是否为自己调用
}
add();

4、 return 语句

是函数的返回值。return 语句不是必需的，如果没有的话，该函数就不返回任何值，或者说返回 undefined。

5、递归（ recursion）

函数自己调用自身

函数头:尽头 函数体:重复执行

function print(num){
    if(num==10){ //递归头
        return ;
    }
    //递归体
    console.log(num);
    print(num+1);
}

print(1);

6、函数的地位

函数的地位是第一等公民

函数与其他数据类型完全是平等的，所以又称函数为第一等公民

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

// 将函数赋值给一个变量
var operator = add;

// 将函数作为参数和返回值
function a(op){
    return op;
}

a(operator)(1, 1)// 2

7、函数的属性和方法

name:函数名

length:参数个数

tostring(): 返回源码

8、函数作用域

函数作用域:全局(global variable)和局部(local variable)

var a =1; //全局变量
function display(){
    var b=2; //局部变量
    c =3; //没有 var 为全局变量 ,调用完成后 c 就存在了
    console.log(a+"-->"+b);
}

display();
//b 不能访问
console.log(a+"-->"+c);

就近原则:

var v = 1;

function f(){
    var v = 2;
    console.log(v);
}

f(); // 2
console.log(v); // 1

变量提升

function foo(x) {
    if (x > 100) {
        var tmp = x - 100;
    }
}

//等同于

function foo(x) {
    var tmp;
    if (x > 100) {
        tmp = x - 100;
    };
}

函数本身的作用域:函数本身也是一个值，也有自己的作用域。它的作用域绑定其声明时所在的作用域。

var a = 1;

var x = function (){
    console.log(a);
};

function f(){
    var a = 2;
    x();
}

f() // 1

9、方法的调用

方法的调用: apply call ：调用一个对象的一个方法，以另一个对象替换当前对象。二者的区别在于参数是否为数组

function animal(age){
    this.name = "animal";
    this.showname = function(){
           alert(this.name);
    }
}

function cat(){
    this.name = "cat";
}

var animal = new animal();

var cat = new cat();

//通过 call 或 apply 方法，将原本属于 animal 对象的 showname()方法交给对象 cat 来使用了。

//输入结果为"cat"

animal.showname.call(cat,"10");
// 等同于apply方法中参数为数组
animal.showname.apply(cat,[10]);

10、 eval

执行字符串，将字符串当作语句执行。

eval('var a = 1;');
alert(a); // 1

了解 jsonp 的使用:

var jsonp = 'foo({id:42})';

var f = new function( "foo", jsonp );

// 相当于定义了如下函数
/*
function f(foo) {
    foo({id:42});
}*/

//业务处理

var print=function(json){
    console.log( json.id ); // 42
}

f(print);
//相当于
function f(print){
    json = {id:42};
//    print(json);
    console.log(json.id);
}

 

上面代码中，jsonp 是一个字符串，function 构造函数将这个字符串，变成了函数体。调用该函数的时候，jsonp 就会执行。这种写法的实质是将代码放到函数作用域执行，避免对全局作用域造成影响。（上海尚学堂，原文首发至：公众号 嗨码歌）