脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js函数的调用模式

浅析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下的所有方法了。

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

您可能感兴趣的文章:

相关文章

  • JavaScript模拟实现键盘打字效果

    JavaScript模拟实现键盘打字效果

    这篇文章主要介绍了JavaScript模拟实现键盘打字效果,本文直接给出实例代码,需要的朋友可以参考下
    2015-06-06
  • JS来动态的修改url实现对url的增删查改

    JS来动态的修改url实现对url的增删查改

    通过get方式提交post表单等方式来动态修改url存在诸多的不妥，因此，想到了通过JS来动态的修改url，来实现对url的增删查改
    2014-09-09
  • js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器

    js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器

    js获得指定控件光标的坐标，兼容IE,Chrome,火狐等多种主流浏览器，实现代码及调用代码如下，感兴趣的朋友可以参考下哈，希望对你有所帮助
    2013-05-05
  • js实现可旋转的立方体模型

    js实现可旋转的立方体模型

    这里给大家分享的是通过js脚本来控制页面中的正方体转动特效，用户可以点击按钮向右转动，也可以向下转动，结合自己的需求控制即可。效果非常棒，这里推荐给大家
    2016-10-10
  • 原生js实现放大镜组件

    原生js实现放大镜组件

    这篇文章主要为大家详细介绍了js实现放大镜组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-01-01
  • 关于js中removeEventListener取消事件监听的坑

    关于js中removeEventListener取消事件监听的坑

    许多入前端不久的人都会遇到removeEventListener无法清除监听的情况,下面这篇文章主要给大家介绍了关于js中removeEventListener取消事件监听的坑,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • 前端页面适配之postcss-px-to-viewport实现步骤

    前端页面适配之postcss-px-to-viewport实现步骤

    postcss-px-to-viewport是一个PostCSS插件,它可以将px单位转换为视口单位(vw、vh 或 vmin),这篇文章主要给大家介绍了关于前端页面适配之postcss-px-to-viewport的实现步骤,需要的朋友可以参考下
    2024-03-03
  • canvas实现动态小球重叠效果

    canvas实现动态小球重叠效果

    在javascript运动系列中，详细介绍了各种运动，其中就包括碰壁运动。但是，如果用canvas去实现，却是另一种思路。本文将详细介绍canvas动态小球重叠效果。下面跟着小编一起来看下吧
    2017-02-02
  • JavaScript面向对象之私有静态变量实例分析

    JavaScript面向对象之私有静态变量实例分析

    这篇文章主要介绍了JavaScript面向对象之私有静态变量,结合实例形式分析了私有静态变量的定义与使用方法,需要的朋友可以参考下
    2016-01-01
  • javascript获取select标签选中的值

    javascript获取select标签选中的值

    这篇文章主要介绍javascript获取select标签选中的值方法,比较实用，需要的朋友可以参考下。
    2016-06-06

最新评论