深入理解JavaScript函数及其模式(一)
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
前言:很久没有写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函数及其模式(二)
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |