深入理解JavaScript函数及其模式(一)

前言：很久没有写js代码了，为了提升自己对js的认识，编写高质量的js代码，最近在看JavaScript模式一书，结合自己的理解总结一些知识点。
作者：华子yjh

一、深入理解JavaScript中的函数

1、函数是(一等)对象

函数可以通过内置构造函数来创建：

var fn1 = function(){}
var fn2 = new function(){};

// 在以上两行代码中，第二行代码更能体现出函数是一个对象.

函数可以拥有属性

var fn = function(){}
fn.NUM = 100;
console.log(fn.NUM); // 100

// 上面代码中，fn增加了一个NUM的属性，而只有对象才拥有属性，因此函数也是对象，其实函数默认就有一个prototype属性

函数是对象还具体体现在: 函数可以作为参数传递给另一个函数，也可以作为函数返回值

function fn1 (callback) {
    // 执行脚本...

    // 执行回调函数
    callback();
}

function fn2 (callback) {
    // 执行脚本...

    // 返回回调函数
    return callback;
}

2、函数提供作用域

在JavaScript中，代码语句块不提供作用域，只有函数才提供作用域，意思就是函数中声明的局部变量，不能在函数外部访问。

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

var rt = add(2, 3);
console.log(rt); // 5
console.log(c); // 试图访问函数局部变量c，结果undefined

3、总结

对函数的理解，记住两句话：函数是一个对象，且提供作用域

 

二、函数模式

1、回调函数

回调函数这个较好理解，就是将一个函数作为参数传递给另外一个函数，我们就称这个传入的函数为回调函数

function fn1 (callback) {
    // 执行脚本...

    // 执行回调函数
    callback();
}

2、即时函数(也称自执行匿名函数)

即时函数的两种表达方式:

(function(){

}());

(function(){

})();

有的时候我们知道是这样写，但是为什么这么写，还是有些迷茫，现在我们来讨论一下吧，纯属个人理解，理解不正确，请指点：先从函数表达式开始，等号(=)右侧函数声明是作为表达式的一部分：

var fn1 = function fnName(){}; // 命名函数表达式

var fn2 = function(){}; // 匿名函数表达式

var fn3 = function(){}(); // 变量fn3指向一个函数返回值

函数执行就是在后面加一对括号，如：

var fn = function(){};

fn(); // 执行函数

function(){}(); // 理想情况下也可以这样写，但是js中没有这种写法，不能直接在函数声明的后面加上括号，这样写会报语法错误

思考原因：

var fn3 = function(){}(); // 正确

function(){}(); // 语法错误

// "function(){}()" 引号中的这种写法在表达式中不会出错，因此我们可以用一个括号包围它就可以了，JavaScript中的括号是执行的意思，它里面的代码作为表达式，并且优先执行；

// 因此我们可以这样写:

(function(){

}());

(function(){

})();

延续思考：

// 在JavaScript中，我们可以到处看到函数表达式的影子

// 函数作为参数传入另一个函数
function fnName (callback) {
    
}

// 函数赋值给一个对象属性
var obj = {
    method: function(){
        
    };
};

// 事件侦听器listener，异步调用
target.addEventListener(type, listener, useCapture);

// 超时调用
setTimeout(callback, delay);

 

三、未完待续

深入理解JavaScript函数及其模式(二)

 

转载请注明出处：博客园，华子yjh