JavaScript函数的4种调用方法实例分析


Posted in Javascript onMarch 05, 2019

本文实例讲述了JavaScript函数的4种调用方法。分享给大家供大家参考,具体如下:

JavaScript 函数有 4 种调用方式:

  • 1. 作为一个函数调用
  • 2. 函数作为方法调用
  • 3. 使用构造函数调用函数
  • 4. 作为函数方法调用函数

分述如下:

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

作为一个函数调用

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

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

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

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

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

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

函数作为方法调用

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

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
node.js中的fs.mkdirSync方法使用说明
Dec 17 Javascript
使用JS画图之点、线、面
Jan 12 Javascript
js实现简单秒表走动的时钟特效
Mar 25 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
vue.js入门教程之基础语法小结
Sep 01 Javascript
微信扫码支付零云插件版实例详解
Apr 26 Javascript
easyUI下拉列表点击事件使用方法
May 18 Javascript
基于express中路由规则及获取请求参数的方法
Mar 12 Javascript
微信小程序日历效果
Dec 29 Javascript
vue动态绑定style样式
Apr 20 Vue.js
微信小程序保存多张图片的实现方法
Mar 05 #Javascript
JS添加或删除HTML dom元素的方法实例分析
Mar 05 #Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 #Javascript
es6数据变更同步到视图层的方法
Mar 04 #Javascript
使用webpack构建应用的方法步骤
Mar 04 #Javascript
详解element-ui中form验证杂记
Mar 04 #Javascript
JS使用数组实现的队列功能示例
Mar 04 #Javascript
You might like
php的memcached客户端memcached
2011/06/14 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
javascript判断非数字的简单例子
2013/07/18 Javascript
javascript使用定时函数实现跳转到某个页面
2013/12/25 Javascript
js 触发select onchange事件代码
2014/03/20 Javascript
window.location.href IE下跳转失效的解决方法
2014/03/27 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
详解基于vue-router的动态权限控制实现方案
2017/09/28 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
JavaScript实现计算圆周率到小数点后100位的方法示例
2018/05/08 Javascript
JavaScript函数节流和函数去抖知识点学习
2018/07/31 Javascript
vue.js 中使用(...)运算符报错的解决方法
2018/08/09 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
小程序中英文混合排序问题解决
2019/08/02 Javascript
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
python的构建工具setup.py的方法使用示例
2017/10/23 Python
Django重装mysql后启动报错:No module named ‘MySQLdb’的解决方法
2018/04/22 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
解决webdriver.Chrome()报错:Message:'chromedriver' executable needs to be in Path
2019/06/12 Python
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
某个公司的Java笔面试题
2016/03/11 面试题
表彰大会主持词
2014/03/26 职场文书
高三励志标语
2014/06/05 职场文书
医学生求职信
2014/07/01 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书
毛主席纪念堂观后感
2015/06/17 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python