JavaScript 函数调用


JavaScript 函数有 4 种调用方式。

每种方式的不同方式在于 this 的初始化。


this 关键字

一般而言,在Javascript中,this指向函数执行时的当前对象。

注意 this 是保留关键字,你不能修改 this 的值。

调用 JavaScript 函数

在之前的章节中我们已经学会了如何创建函数。

函数中的代码在函数被调用后执行。


作为一个函数调用

实例

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

尝试一下 »

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

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

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

myFunction() 和 window.myFunction() 是一样的:

实例

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

尝试一下 »

这是调用 JavaScript 函数常用的方法, 但不是良好的编程习惯 
全局变量,方法或函数容易造成命名冲突的bug。

全局对象

当函数没有被自身的对象调用时, this 的值就会变成全局对象。

在 web 浏览器中全局对象是浏览器窗口(window 对象)。

该实例返回 this 的值是 window 对象:

实例

function myFunction() { return this;}myFunction(); // 返回 window 对象

尝试一下 »

函数作为全局对象调用,会使 this 的值成为全局对象。
使用 window 对象作为一个变量容易造成程序崩溃。

函数作为方法调用

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

以下实例创建了一个对象 (myObject), 对象有两个属性 (firstName 和 lastName), 及一个方法 (fullName):

实例

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

尝试一下 »

fullName 方法是一个函数。函数属于对象。 myObject 是函数的所有者。

this对象,拥有 JavaScript 代码。实例中 this 的值为 myObject 对象。

测试以下!修改 fullName 方法并返回 this 值:

实例

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

尝试一下 »

函数作为对象方法调用,会使得 this 的值成为对象本身。

使用构造函数调用函数

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

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

实例

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

尝试一下 »

构造函数的调用会创建一个新的对象。新对象会继承构造函数的属性和方法。

构造函数中 this 关键字没有任何的值。
this 的值在函数调用实例化对象(new object)时创建。

作为函数方法调用函数

在 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, 它将使用全局对象替代。

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

笔记列表

  1. WooKong

    yua***iaosong@hotmail.com

    参考地址

    this 是 JavaScript 语言的一个关键字。

    它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。比如:

    function test() {this.x = 1;
    }

    随着函数使用场合的不同,this 的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象。

    WooKong

    WooKong

    yua***iaosong@hotmail.com

    参考地址

    7个月前 (05-26)

JavaScript(三十九)相关推荐

  1. JavaScript学习(三十九)—对象中内容的操作

    JavaScript学习(三十九)-对象中内容的操作 一.对象中内容的操作:增.删.改.查 (一).增:给对象添加属性或者方法 1)方式1:对象名称.属性名=属性值: 2)方式2:对象名称['属性名' ...

  2. 初识JavaScript (十九)

    初识JavaScript (十九) 1 正则的分组 2 正则的exec方法 3 正则的贪婪和懒惰模式 4 正则练习 5 算法-数组去重indexOf 6 算法-数组去重-splice 7 算法-数组去 ...

  3. 小满Vue3第三十九章(Vue开发桌面程序Electron)

    建议视频教程小满Vue3(第三十九章 electron桌面程序)_哔哩哔哩_bilibili Electron官网Electron | Build cross-platform desktop app ...

  4. NeHe OpenGL第三十九课:物理模拟

    NeHe OpenGL第三十九课:物理模拟 物理模拟简介: 还记得高中的物理吧,直线运动,自由落体运动,弹簧.在这一课里,我们将创造这一切.   物理模拟介绍 如果你很熟悉物理规律,并且想实现它,这篇 ...

  5. Python编程基础:第三十九节 面向对象编程Object Oriented Programming

    第三十九节 面向对象编程Object Oriented Programming 前言 实践 前言 到目前为止我们都是函数式编程,也即将每一个功能块写为一个函数.其实还有一种更常用的编程方式被称为面向对 ...

  6. javaweb学习总结(三十九)——数据库连接池

    javaweb学习总结(三十九)--数据库连接池 一.应用程序直接获取数据库连接的缺点 用户每次请求都需要向数据库获得链接,而数据库创建连接通常需要消耗相对较大的资源,创建时间也较长.假设网站一天10 ...

  7. 三十九、Java集合中的HashSet和TreeSet

    @Author:Runsen @Date:2020/6/6 作者介绍:Runsen目前大三下学期,专业化学工程与工艺,大学沉迷日语,Python, Java和一系列数据分析软件.导致翘课严重,专业排名 ...

  8. WPF,Silverlight与XAML读书笔记第三十九 - 可视化效果之3D图形

    原文:WPF,Silverlight与XAML读书笔记第三十九 - 可视化效果之3D图形 说明:本系列基本上是<WPF揭秘>的读书笔记.在结构安排与文章内容上参照<WPF揭秘> ...

  9. 【零基础学Java】—List集合(三十九)

    [零基础学Java]-List集合(三十九) java.util.list接口 extends Collection接口 list接口的特点: 1.有序的集合,存储元素和取出元素的顺序是一致的(存储1 ...

最新文章

  1. c语言实现将两个文件复制到一个文件里_Python中复制文件的9种方法
  2. Python 进度条 tqdm
  3. Thrift实现C#调用Java开发步骤详解
  4. 三维点云学习(3)4-Expectation-Maximization (EM)
  5. 7-2 查找指定字符 (15 分)
  6. 区块链开发(一)搭建基于以太坊go-ethereum的私有链环境
  7. python分类识别_Python构建图像分类识别器的方法
  8. lenovo L480 进入bios_利用微星主板自带的 M-Flash BIOS工具升级BIOS
  9. C#生成随机姓名 单姓 复姓
  10. 微信小程序云开发--数据库使用
  11. html语言中标记h1代表什么意思,html中h1是什么意思
  12. TIA博途中CPU固件版本和实际PLC不同时如何进行程序的下载?
  13. Luajit作者给的Lua源码的阅读顺序
  14. NET 里序列化可概念。
  15. 制造业的业务流程管理BPM
  16. html制作图像画廊,创建 Web 照片画廊 (Photoshop)
  17. 计算机三维建模概述论文,基于视觉的三维场景建模研究与实现-计算机科学与技术专业毕业论文.docx...
  18. angular2 简述
  19. CTF题记——暑假计划第一周
  20. 华南主板bios怎么恢复出厂设置_华擎主板bios怎么恢复出厂设置

热门文章

  1. python货币转换编程_Python实现制度转换(货币,温度,长度)
  2. 【微信小程序】电商移动前端API文档
  3. 机票预订信息系统——数据库系统设计
  4. 永久勘误 微软等面试100题系列,答案V0 4版 第41-60题答案
  5. 佛系码农~手把手教你如何绘制一辆会跑车
  6. 黑莓z10 android,重生还是毁灭——黑莓Z10使用评测
  7. 教你删除鼠标右键菜单,清理“新建”菜单的方法!
  8. cif和cip的区别_贸易术语CIF和CIP的区别
  9. CMS是什么?好的网站后台有什么特质?
  10. 技嘉x58支持服务器Cpu,问鼎板皇 技嘉Extreme版X58深度测试