javascript 高级编程系列 - 函数

Posted 2020-08-15 箫笛

一、函数创建

    1. 函数声明 (出现在全局作用域，或局部作用域）

function add (a, b)
{
    return a + b;
}

function add(a, b)
{
    return add1(a,b);
    function add1(m, n)
    {
        return m + n;
    }
}   

    2. 函数表达式 

• 作为普通变量

var add = function (a, b){
    return a + b;
};

• 作为对象方法

var obj = {
    value: 0,
    add: function(a, b){
        return a + b;
    }
};

•  作为函数返回值

function add(a)
{
    var m = a;
    return function(n){
        return m+n;
    };
}

• 作为函数参数 

var numbers = [1, 2, 3, 4, 5, 4, 3, 2];
var mapResult = numbers.map(function(item, index, array){
    return item * 2;
});

 3. 函数提升

function add (a, b)
{
    var result1 = add1(a, b);
    var result2 = add2(a, b);
    
    console.log(result1); // a+b
    console.log(result2); // 输出TypeError add2 is not a function  
    function add1(m, n)
    {
        return m + n;
    }
    
    var add2 = function(m, n){
        return m + n;
    }
}

    add1 函数定义在函数add内部，在执行它时他会被提升到函数的顶部，提升到顶部后由于是在调用之前，因此add1的调用会正常执行。add2也会被提升到函数顶部，但由于仅仅提升了add2的定义，没有提升它的实现，因此add2的值在调用时为undefined。

 

二、函数调用

  1.函数调用模式

var add = function (a, b){
    return a + b;
};

var  result = add(1, 2);

  2. 方法调用模式

var obj = {
    sum: 10,
    increament: function(n){
        return this.sum + n;
    }
};
obj.increament(1);

3. 构造器调用模式

• 构造函数以new 进行调用实例化时，this绑定到新创建的对象上, 并返回此对象

function Person(name, age)
{
    this.name = name;
    this.age = age;
}

var personObj = new Person(‘leon‘, 30);

• 构造函数前面如果没有new运算符，则作为普通函数调用，此时this指向window对象，返回undefined

function Person(name, age)
{
    this.name = name;
    this.age = age;
}

var personObj = Person(‘leon‘, 30);
console.log(window.name); // ‘leon‘
console.log(window.age);  // 30

 

4. Apply调用模式（包括call方法）

• 指定调用上下文环境

var add = function (a, b){
    return a + b;
};

add.apply(null, [1, 2]);  // 当指定null时，函数内部的this指向window对象（浏览器环境)

• 方法借用

function getParams ()
{
   return  Array.prototype.filter.call(arguments, function(item,index){
          return item > 2;
    });
}
getParams(2, 3, 4);

• 实现继承

// 父类
function Person(name, age)
{
    this.name = name;
    this.age = age;
}
// 子类
function Children(gender)
{
    Person.apply(this, [‘leon‘, 5]); // 继承父类的name 和 age 属性
    this.gender = gender;
}

var boy = new Children(‘male‘);
console.log(boy.name);  // ‘leon‘
console.log(boy.age);   // 5

三、高级应用

1. 函数绑定 （作用是保证函数在执行时，上下文环境保持不变）

// 自定义绑定函数
function bind(fn, context)
{
    return function(){
        return fn.apply(context, arguments);
    };
}
var obj = {
    value: 0,
    add : function(a, b){
         this.value = a + b;
    }
};    
var add = bind(obj.add, obj);

注意：es5中函数已有原生bind方法

var obj = {
    value: 0,
    add : function(a, b){
         this.value = a + b;
    }
};    

var add = obj.add.bind(obj);

2. 函数curry化 (通过对函数预设一些参数从而生成一个新的函数的过程）

function curry(fn)
{
    var args = Array.prototype.slice.call(arguments, 1);
    return function(){
        return fn.apply(null, args.concat(Array.prototype.slice.call(arguments)));
    };
}

function add (n1, n2)
{
      return n1 + n2;
}

var curryAdd = curry(add ,2);
var result = curryAdd(3);

console.log(result);