浅析JavaScript函数的调用模式


Posted in Javascript onAugust 10, 2016

我们说一个函数的调用模式是作为一个函数来调用,是要与其它三种调用模式做区分
函数其他的三种调用: 方法调用模式,构造器调用模式,apply/call调用模式。 

方法的调用模式: 

var obj={
 fun1: function(){
  //方法内容
  this; //指的是window
 }
}

obj.fun1() //方法的调用

构造器的调用: 

function Person(name, age, job){
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayName = function(){
  alert(this.name);
 };
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

apply/call调用模式: 

function cat(){}
cat.prototype = {
 food: "fish",
 say: function(){
  alert("I love " + this.food);
 }
};

var blackCat = new cat; 
blackCat.say();

这里如果没有显性的return语句,这个新的对象则会被隐式的return,并成为这个构造器的值。 也就是说这里可以等价于: var blackCat = new cat();
但是如果我们有一个对象 

var whiteDog = {
 food: "bone"
};

我们不想对它重新定义say方法,那么我们可以通过call或apply用blackCat的say方法:
 blackCat.say.call(whiteDog);
所以,可以看出call和apply是为了动态改变this而出现的,当一个object没有某个方法,但是其他的有,我们可以借助call或apply用其它对象的方法来操作。 

用的比较多的,通过document.getElementsByTagName选择的dom 节点是一种类似array的array(arguments等等)。它不能应用Array下的push,pop等方法。我们可以通过:
var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));
这样domNodes就可以应用Array下的所有方法了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 面向对象编程基础 多态
Aug 21 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
Jan 03 Javascript
JavaScript控制网页层收起和展开效果的方法
Apr 15 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
Aug 05 Javascript
JavaScript对象数组的排序处理方法
Oct 21 Javascript
纯javascript移动优先的幻灯片效果
Nov 02 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
javascript每日必学之循环
Feb 19 Javascript
100多个基础常用JS函数和语法集合大全
Feb 16 Javascript
详解如何让Express支持async/await
Oct 09 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
Feb 08 Javascript
node.js ws模块搭建websocket服务端的方法示例
Apr 25 Javascript
JavaScript实现刷新不重记的倒计时
Aug 10 #Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 #Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 #Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 #Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 #Javascript
JS控制静态页面传递参数并获取参数应用
Aug 10 #Javascript
基于JavaScript实现树形下拉框
Aug 10 #Javascript
You might like
php中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
ThinkPHP表单自动提交验证实例教程
2014/07/18 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
php获取客户端电脑屏幕参数的方法
2015/01/09 PHP
php实现获取文件mime类型的方法
2015/02/11 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
javascript框架设计读书笔记之种子模块
2014/12/02 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
JS 实现百度搜索功能
2018/02/01 Javascript
JS简单获取并修改input文本框内容的方法示例
2018/04/08 Javascript
webpack中如何使用雪碧图的示例代码
2018/11/11 Javascript
vue使用axios上传文件(FormData)的方法
2019/04/14 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
2019/07/29 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
Python多线程下载文件的方法
2015/07/10 Python
Python pass详细介绍及实例代码
2016/11/24 Python
python实现感知器
2017/12/19 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
揭牌仪式主持词
2014/03/19 职场文书
小班评语大全
2014/05/04 职场文书
多媒体编辑专业毕业生求职信
2014/06/13 职场文书
2014年团总支工作总结
2014/11/21 职场文书
2014年教务处工作总结
2014/12/03 职场文书
2016年党建工作简报
2015/11/26 职场文书
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js
利用python做数据拟合详情
2021/11/17 Python