浅析JavaScript函数的调用模式

 更新时间:2016年08月10日 11:09:58   作者:Cyclone77  
这篇文章主要为大家详细介绍了JavaScript函数的调用模式,包括方法调用模式,构造器调用模式,apply/call调用模式,感兴趣的小伙伴们可以参考一下

我们说一个函数的调用模式是作为一个函数来调用,是要与其它三种调用模式做区分
函数其他的三种调用: 方法调用模式,构造器调用模式,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下的所有方法了。

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

相关文章

  • JS实现拖动滚动条评分的效果代码分享

    JS实现拖动滚动条评分的效果代码分享

    本文给大家基于js实现拖动滚动条评分效果,在项目开发中经常可以用到的,大家可以更加需要适当的添加修改,对js评分效果感兴趣的朋友一起看看吧
    2016-09-09
  • JavaScript的防抖和节流一起来了解下

    JavaScript的防抖和节流一起来了解下

    这篇文章主要为大家详细介绍了JavaScript的防抖和节流,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • Javascript动态伸缩+淡出淡入

    Javascript动态伸缩+淡出淡入

    一种不错代码应用实例,大家可以根据这个代码,拓宽出更好的代码
    2009-02-02
  • js数组如何添加json数据及js数组与json的区别

    js数组如何添加json数据及js数组与json的区别

    在JSON中,有两种数据结构:对象和数组。本篇文章给大家介绍js数组如何添加json数据以及js数组和json的区别,涉及到js json数组添加相关知识,感兴趣的朋友可以参考下本篇文章
    2015-10-10
  • Javascript&DHTML基础知识

    Javascript&DHTML基础知识

    首先请下载JScript.chm这本手册,无论新手老手,有一本手册是免不了的,特别是对于新手,如果你没有空翻犀牛书,那么这本手册将是你了解这门语言的首选。下面所讲的大多数,手册上可以没有提及,或提及很少的内容。
    2008-07-07
  • OpenCV.js实现乔丹动图素描效果图文教程

    OpenCV.js实现乔丹动图素描效果图文教程

    这篇文章主要为大家介绍了OpenCV.js实现乔丹动图素描效果的图文教程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 控制页面按钮在后台执行期间不重复提交的JS方法

    控制页面按钮在后台执行期间不重复提交的JS方法

    下面的代码可以避免这种情况的发生,要等第一次执行完返回数据到前台后才能提交第二次。
    2013-06-06
  • 微信WeixinJSBridge API使用实例

    微信WeixinJSBridge API使用实例

    这篇文章主要介绍了微信WeixinJSBridge API使用实例,本文直接给出HTML代码,代码中包含了很多实用功能,如图片预览、分享到微博、隐藏右上角按钮、获取网络状态、发起公众号微信支付等内容,需要的朋友可以参考下
    2015-05-05
  • JS文本获得焦点清除文本文字的示例代码

    JS文本获得焦点清除文本文字的示例代码

    本篇文章主要是对JS文本获得焦点清除文本文字的示例代码进行介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • 用JavaScript事件串连执行多个处理过程的方法

    用JavaScript事件串连执行多个处理过程的方法

    用JavaScript事件串连执行多个处理过程的方法...
    2007-03-03

最新评论