javascript-Function类型整理

1.函数声明和函数表达式

先来看看什么样的是函数声明：

 

<script>
function() {
    alert("hello, world.");
};

function foo() {
    alert("hello, world.");
};
</script>

再来看看什么样的是函数表达式：

<script>
var foo = function() {
    alert("hello, world.");
};
</script>

下面这个就是先声明然后执行了这个函数：

<script>
(function() {
    alert("hello, world.");
})();
</script>

 

函数声明和函数表达式的区别：

函数声明，解析器会率先读取函数声明，并使其在执行任何代码之前可用；对于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解释执行。

console.log(typeof(fn)); // function
    fn('abc'); // abc


    console.log(typeof(fnx)); // undefined

    if(fnx)
        fnx('abc');  // will not execute
    else
        console.log('fnx is undefined'); // fnx is undefined

    // 函数语句
    function fn(str)
    {
        console.log(str);
    };

    // 表达式定义
    var fnx=function(str)
    {
        console.log(str+ ' from fnx');
    };

 

2. 函数内部属性

1）arguments,类数组对象，保存着传入函数的参数。这个对象有个callee的属性，它是一个指针，指向拥有这个arguments对象的函数。

//递归计算
var sum = function(n){
  if (n <= 0)                        
  return 1;
  else
    return n ＋arguments.callee(n - 1)
}

 

2）this,this引用的是函数据以操作的对象。

 

window.color = "red";
var 0 = {color : "blue"};
function sayColor(){
     alert(this.color);
}
sayColor();  //"red"
o.sayColor=sayColor;
o.sayColor(); // "blue"

 

3) caller,这个属性保存着调用当前函数的函数引用，如果在全局作用域中调用当前函数，它的值为null。

function callerDemo() {
    if ( arguments.caller) { 
        var a= callerDemo.caller.toString();
        alert(a); 
    } else { 
        alert("this is a top function"); 
    } 
} 
function handleCaller() { 
    callerDemo(); 
} 
handleCaller(); 
function calleeDemo() { 
    alert(arguments.callee); 
} 
calleeDemo(); 

 

3. 函数的属性

1）length：函数希望接收的命名函数个数

2）prototype

 

4.函数方法

apply()和call()。

他们的作用是在特定的作用域中调用函数，apply()接收两个参数，一个是函数运行的作用域(this)，另一个是参数数组，它可以是Array的实例也可以是arguments对象。
call()方法第一个参数与apply()方法相同，但传递给函数的参数必须列举出来

window.firstName = "diz";
window.lastName = "song";
var myObject = { firstName: "my", lastName: "Object" };
function HelloName() {
　　console.log("Hello " + this.firstName + " " + this.lastName, " glad to meet you!");
}
HelloName.call(window); //huo .call(this); //Hello diz song glad to meet you!
HelloName.call(myObject);  //Hello my Object glad to meet you!

 

function sum(num1, num2) {
return num1 + num2;
}
console.log(sum.call(window, 10, 10)); //20
console.log(sum.apply(window,[10,20])); //30 

我们发现apply()和call()的真正用武之地是能够扩充函数赖以运行的作用域，如果我们想用传统的方法实现，请见下面的代码：

window.firstName = "diz";
window.lastName = "song";
var myObject = { firstName: "my", lastName: "Object" };
function HelloName() {
console.log("Hello " + this.firstName + " " + this.lastName, " glad to meet you!");
}
HelloName(); //Hello diz song glad to meet you!
myObject.HelloName = HelloName;
myObject.HelloName(); //Hello my Object glad to meet you! 

bind()方法会创建一个函数实例，其this值会被绑定到传给bind()函数的值

window.color = "red";
var o = { color: "blue" };
function sayColor(){
alert(this.color);
}
var OSayColor = sayColor.bind(o);
OSayColor(); //blue 

sayColor()调用bind()方法，并传入o对象，返回了OSayColor()函数，在OSayColor()中，this的值就为o对象。