3种函数定义方式:

1、使用关键字 function 来声明并定义函数

function myFunction(a, b) {
return a * b;
}

调用函数:

var x = myFunction(4, 3);

2、使用关键字 function 来定义匿名函数

function (a, b) {return a * b}

匿名函数可赋值给变量或者自调用。

匿名函数赋值给变量:

var myFunction = function (a, b) {return a * b};

var x = myFunction(4, 3);

匿名函数自调用:

(function (a, b) {
return a * b;
})(4,3);

3、使用 Function() 构造函数来定义函数

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

调用函数:

var x = myFunction(4, 3);

注意:

提升(Hoisting)是 JavaScript 默认将当前作用域中的变量声明与函数声明提升到前面去的的行为。

上述3种函数定义方式中第一种方式声明了函数,因此,函数可以在声明之前调用:

myFunction(5);

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

4 种函数调用方式:

函数调用方式的区别在于调用函数时 this 的初始化不同。

this 是 JavaScript 语言的一个关键字,它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。

函数使用的场合不同,this 的值也不同。但是有一个原则:this 代表的是调用函数的那个对象。

1、作为全局函数(全局对象方法)被调用

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

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

在浏览器中的全局对象是浏览器窗口(window 对象),以上函数会自动变为 window 对象的方法。myFunction() 和 window.myFunction() 是一样的。

函数作为全局函数被调用时,this 的值为全局对象。

注意:全局变量、方法或函数容易造成命名冲突的bug,而且使用 window 对象作为一个变量容易造成程序崩溃。

2、作为对象方法被调用

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

fullName 函数是一个对象方法,属于myObject对象。

函数作为对象方法被调用时,this 的值为它所属的对象。

var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this;
}
}
myObject.fullName(); // 返回 [object Object] (所有者对象)

3、作为构造函数被调用

在 JavaScript 中,构造函数用于创建新的对象。调用构造函数需要在前面添加 new 关键字。

// 构造函数
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
} // 调用构造函数创建新的对象
var x = new myFunction("John","Doe");
x.firstName; // 返回 "John"

新对象会继承构造函数的属性和方法。

构造函数中的 this 关键字没有任何的值。

函数作为构造函数被调用时,this 的值为构造函数所实例化的对象。

4、使用函数方法调用

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

call()apply() 是预定义的函数方法,我们可以使用这两个方法来调用函数。

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

call() 和 apply() 两个方法的第一个参数都是对象(函数运行的作用域)。

两者的区别在于第二个参数: apply传入的是一个参数数组或 arguments 对象;而call传入的是一个参数(从第二个参数开始传入参数列表)。

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

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

通过 call() 或 apply() 方法你可以设置 this 的值,且作为已存在对象的新方法调用。

参考:http://www.runoob.com/js/js-function-definition.html

JavaScript 中函数的定义和调用的更多相关文章

  1. JavaScript中函数的定义

    JavaScript中函数的定义 制作人:全心全意 在JavaScript中,函数是由关键字function.函数名加一组参数以及置于大括号中需要执行的一段代码定义的.定义函数的基本语法格式如下: f ...

  2. JavaScript中函数的定义!

    JavaScript中函数的定义! 1 自定义函数(命名函数) function fun() {}; 2 函数表达式(匿名函数) var fun = function () {}; 3 利用 new ...

  3. Javascript中函数的四种调用方式

    一.Javascript中函数的几个基本知识点: 1.函数的名字只是一个指向函数的指针,所以即使在不同的执行环境,即不同对象调用这个函数,这个函数指向的仍然是同一个函数. 2.函数中有两个特殊的内部属 ...

  4. python中函数的定义及调用

    python中函数的定义及使用方法 1.函数的概念:函数是将具有独立功能的代码块组织为一个整体,使其具有特殊功能的代码集; 2.函数的作用:使用函数可以加强代码的复用性,提高程序编写的效率; 3.函数 ...

  5. javascript中函数的闭包自调用

    话不多说, 直接上代码 // 定义一个变量outerParam, 然后使用一个闭包函数给该变量初始化var outerParam = (function testClosure(param) { // ...

  6. python中函数的定义与调用

    1.为什么要用函数? (1)代码重复太多(2)可读性差 使用函数的好处: (1)代码重用 (2)保持一致性,易维护 (2)可扩展性 2.初始函数定义与调用     函数的定义 def test(x): ...

  7. javascript中函数的四种调用模式详解

    介绍函数四种调用模式前,我们先来了解一下函数和方法的概念,其实函数和方法本质是一样,就是称呼不一样而已.函数:如果一个函数与任何对象关系,就称该函数为函数.方法:如果一个函数作为一个对象属性存在,我们 ...

  8. JavaScript中 函数的创建和调用

    基础概念:定义函数的方式   一般定义函数有两种方式:    1:函数的声明    2:函数表达式 参考资料:https://blog.csdn.net/xixiruyiruyi/article/de ...

  9. JavaScript中函数的调用

    JavaScript中函数的调用 制作人:全心全意 在JavaScript中,函数定义后并不会自动执行,要执行一个函数需要在特定的位置调用该函数,调用函数需要创建调用语句,调用语句包含函数名称和参数. ...

随机推荐

  1. mongoDB的常用语法

    安装: 到mongodb官网下载安装包或者压缩包:https://www.mongodb.com/download-center?jmp=nav 1.如果是msi包的话则点击按步骤安装,如果是压缩包的 ...

  2. Eclipse常用快捷键(持续更新)

    编辑相关快捷键 Eclipse的编辑功能非常强大,掌握了Eclipse快捷键功能,能够大大提高开发效率.Eclipse中有如下一些和编辑相关的快捷键. 1.[Ctrl+O] 显示类中方法和属性的大纲, ...

  3. MyBatis保存完整日期的解决方法

    在用mybatis时,对mysql数据库是datatime字段添加值是,发现添加成功后查看数据库字段值是,只有年月日有值,时分秒则为0来表示的,更改为java.sql.date,time等也不行,如果 ...

  4. 使用Apache HttpClient 4.5设置超时时间

    使用HttpClient,一般都需要设置连接超时时间和获取数据超时时间.这两个参数很重要,目的是为了防止访问其他http服务时,由于超时导致自己的应用受影响. 4.5版本中,这两个参数的设置都抽象到了 ...

  5. vue04-动画、组件

    一.vue中使用动画 文档:https://cn.vuejs.org/v2/guide/transitions.html 1. Vue 中的过渡动画 <!DOCTYPE html> < ...

  6. ES6读书笔记(三)

    前言 前段时间整理了ES6的读书笔记:<ES6读书笔记(一)>,<ES6读书笔记(二)>,现在为第三篇,本篇内容包括: 一.Promise 二.Iterator和for of循 ...

  7. iOS 封装一个带复制功能的UILabel

    我们发现UILabel不在为我们提供长按弹出复制等操作了, 我们来继承UILabel自己写一个带复制功能的UILabel. 代码: #import "CopyLabel.h" @i ...

  8. Spring MVC中如何解决POST请求中文乱码问题,GET的又如何处理呢

    在web.xml中配置过滤器 GET请求乱码解决: 在Tomcat中service.xml中

  9. HTML5视频播放练习:鼠标经过视频播放,鼠标移除停止播放,再次经过继续播放。

    随着HTML5的广泛应用,在一些网站中,经常看到有些预览的短视频预览,鼠标经过就会播放,移除就会停止播放,再次移进去就会继续播放. 自己也研究着做一个比较简单的类似的练习. 视频可以自己到包图网下载, ...

  10. pci枚举初始化部分(2)

    1.2.8判断pcie设备是否支持雷电技术 Intel具有一种基于Thunderbolt技术的PCIE变体,它结合了DisplayPort和PCIe协议,与Mini DisplayPort兼容. Th ...