JS 函数

简介: 函数定义在JavaScript中另一个基本概念是函数, 它允许你在一个代码块中存储一段用于处理单任务的代码,然后在任何你需要的时候用一个简短的命令来调用,而不是把相同的代码写很多次。

函数定义



在JavaScript中另一个基本概念是函数, 它允许你在一个代码块中存储一段用于处理单任务的代码,然后在任何你需要的时候用一个简短的命令来调用,而不是把相同的代码写很多次。


函数声明 (函数语句)


function name([param[, param[, ... param]]]) { statements }


函数表达式 (function expression)


您可以创建一个没有名称的函数(匿名函数):

function() {
  alert('hello');
}


这个函数叫做匿名函数 — 它没有函数名! 它也不会自己做任何事情。 你通常使用匿名函


数以及事件处理程序, 例如,如果单击相关按钮,以下操作将在函数内运行代码:


var myButton = document.querySelector('button');
myButton.onclick = function() {
  alert('hello');
}


你还可以将匿名函数分配为变量的值,例如:

var myGreeting = function() {
  alert('hello');
}


但这只会令人费解,所以不要这样做!创建方法时,最好坚持下列形式:

function myGreeting() {
  alert('hello');
}


上面的例子不以function开头。不以function开头的函数语句就是函数表达式定义。


匿名函数也称为函数表达式。函数表达式与函数声明有一些区别。函数声明会进行声


明提升(declaration hoisting),而函数表达式不会。


箭头函数表达式 (=>)


函数声明有一种特殊的语法 (详情请查阅function* statement ):


function* name([param[, param[, ...param]]]) { statements }


Function() 构造函数

var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);


注意: 不推荐使用 Function 构造函数创建函数,因为它需要的函数体作为字符串可能会


阻止一些JS引擎优化,也会引起其他问题。


函数提升(Hoisting)


在之前的教程中我们已经了解了 "hoisting(提升)"。


提升(Hoisting)是 JavaScript 默认将当前作用域提升到前面去的的行为。


提升(Hoisting)应用在变量的声明与函数的声明。


因此,函数可以在声明之前调用:

myFunction(5);
function myFunction(y) {
    return y * y;
}


自调用函数


函数表达式可以 "自调用"。


自调用表达式会自动调用。


如果表达式后面紧跟 () ,则会自动调用。


不能自调用声明的函数。


通过添加括号,来说明它是一个函数表达式:

(function () {
    var x = "Hello!!";      // 我调我自己
})();


JavaScript 函数参数



函数是对象


JavaScript 函数对参数的值没有进行任何的检查。


函数显式参数(Parameters)与隐式参数(Arguments)


  • 显式参数在函数定义时列出。


  • 函数隐式参数在函数调用时传递给函数真正的值。


JavaScript 函数调用



作为一个函数调用


该函数不属于任何对象。但是在 JavaScript 中它始终是默认的全局对象。


在 HTML 中默认的全局对象是 HTML 页面本身,所以函数是属于 HTML 页面。


在浏览器中的页面对象是浏览器窗口(window 对象)。以上函数会自动变为 window 对象的函数。


函数作为全局对象调用,会使 this 的值成为全局对象。

使用 window 对象作为一个变量容易造成程序崩溃。


函数作为方法调用


在 JavaScript 中你可以将函数定义为对象的方法。

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // 返回 "John Doe"


使用构造函数调用函数


如果函数调用前使用了 new 关键字, 则是调用了构造函数。


这看起来就像创建了新的函数,但实际上 JavaScript 函数是重新创建的对象:

// 构造函数:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}
// This    creates a new object
var x = new myFunction("John","Doe");
x.firstName;                             // 返回 "John"


作为函数方法调用函数


在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。


call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数,两个方法的第一个参数必须是对象本身。

function myFunction(a, b) {
    return a * b;
}
myObject = myFunction.call(myObject, 10, 2);     // 返回 20


function myFunction(a, b) {
    return a * b;
}
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray);  // 返回 20


两个方法都使用了对象本身作为第一个参数。 两者的区别在于第二个参数: apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。


在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值, 即使该参数不是一个对象。


在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。


JavaScript 闭包



JavaScript 变量可以是局部变量或全局变量。


私有变量可以用到闭包

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
add();
add();
add();
// 计数器为 3


这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。


计数器受匿名函数的作用域保护,只能通过 add 方法修改。


闭包是一种保护私有变量的机制,在函数执行时形成私有的作用域,保护里面的私有变量不受外界干扰。

直观的说就是形成一个不销毁的栈环境。




目录
相关文章
|
2月前
|
前端开发 JavaScript 开发者
揭秘JavaScript魔法三剑客:call、apply、bind,解锁函数新世界,你的前端之路因它们而精彩!
【8月更文挑战第23天】在 JavaScript 的世界里,`call`、`apply` 和 `bind` 这三个方法常常让新手感到困惑。它们都能改变函数执行时的上下文(即 `this` 的指向),但各有特点:`call` 接受一系列参数并直接调用函数;`apply` 则接收一个参数数组,在处理不确定数量的参数时特别有用;而 `bind` 不会立即执行函数,而是创建一个新版本的函数,其 `this` 上下文已被永久绑定。理解这三个方法能帮助开发者更好地运用函数式编程技巧,提升代码灵活性和可维护性。
29 0
|
7天前
|
JavaScript 前端开发 安全
JavaScript函数详解
JavaScript函数的详细解析,包括函数的定义和调用方式(如一般格式、匿名函数、构造函数、自调用函数、箭头函数和严格模式)、函数参数(arguments对象、可变参数、默认参数值)、闭包的概念和应用实例。
JavaScript函数详解
|
6天前
|
JavaScript 前端开发
JavaScript函数可以返回两个值
JavaScript函数可以返回两个值
|
1月前
|
JavaScript 前端开发
JavaScript基础知识-函数的返回值
关于JavaScript函数返回值的基础知识。
23 9
JavaScript基础知识-函数的返回值
|
6天前
|
自然语言处理 分布式计算 JavaScript
JavaScript函数
JavaScript函数
|
16天前
|
JSON JavaScript 前端开发
JavaScript第五天(函数,this,严格模式,高阶函数,闭包,递归,正则,ES6)高级
JavaScript第五天(函数,this,严格模式,高阶函数,闭包,递归,正则,ES6)高级
|
9天前
|
JSON JavaScript 数据格式
手写JS实现深拷贝函数
本文介绍了如何实现一个深拷贝函数`deepClone`,该函数可以处理对象和数组的深拷贝,确保拷贝后的对象与原始对象在内存中互不干扰。通过递归处理对象的键值对和数组的元素,实现了深度复制,同时保留了函数类型的值和基础类型的值。
15 3
|
1月前
|
JavaScript 前端开发
JavaScript基础知识-函数的参数
关于JavaScript函数参数基础知识的介绍。
18 4
JavaScript基础知识-函数的参数
|
6天前
|
缓存 JavaScript 前端开发
了解js基础知识中的作用域和闭包以及闭包的一些应用场景,浅析函数柯里化
该文章详细讲解了JavaScript中的作用域、闭包概念及其应用场景,并简要分析了函数柯里化的使用。
了解js基础知识中的作用域和闭包以及闭包的一些应用场景,浅析函数柯里化
|
9天前
|
前端开发 数据可视化 开发者
D3.js 内置的动画函数
D3.js 内置的动画函数
下一篇
无影云桌面