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 相关文章推荐
js动态给table添加/删除tr的方法
Aug 02 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
Oct 09 Javascript
ie中js创建checkbox默认选中问题探讨
Oct 21 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 Javascript
原生js封装添加class,删除class的实例
Nov 06 Javascript
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
node.js利用socket.io实现多人在线匹配联机五子棋
May 31 Javascript
vue插件实现v-model功能
Sep 10 Javascript
微信小程序开发之tabbar图标和颜色的实现
Oct 17 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 Javascript
微信小程序保存多张图片的实现方法
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
天津市收音机工业发展史
2021/03/04 无线电
PHP 和 MySQL 基础教程(三)
2006/10/09 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
javascript的函数劫持浅析
2016/09/26 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
2017/07/27 Javascript
JSON数据中存在单个转义字符“\”的处理方法
2018/07/11 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
2019/11/12 Javascript
解决vue的router组件component在import时不能使用变量问题
2020/07/26 Javascript
React实现全选功能
2020/08/25 Javascript
js实现炫酷光感效果
2020/09/05 Javascript
解决vue打包 npm run build-test突然不动了的问题
2020/11/13 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
[03:42]2016国际邀请赛中国区预选赛首日现场玩家采访
2016/06/26 DOTA
python远程登录代码
2008/04/29 Python
python实现批量文件重命名
2019/10/31 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
Pycharm及python安装详细教程(图解)
2020/07/31 Python
Python selenium爬取微信公众号文章代码详解
2020/08/12 Python
提高python代码运行效率的一些建议
2020/09/29 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
邮政竞聘演讲稿
2014/09/03 职场文书
2014年幼儿园小班工作总结
2014/12/04 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
2015年采购员工作总结
2015/04/27 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
孝女彩金观后感
2015/06/10 职场文书
毕业酒会致辞
2015/07/29 职场文书
HR在给员工开具离职证明时,需要注意哪些问题?
2019/07/03 职场文书
提取视频中的音频 Python只需要三行代码!
2021/05/10 Python