Javascript调用函数方法的几种方式介绍

javascript语法灵活，同一个功能有五六种实现方式并不罕见，然后再加上有些反人类的原型继承和异步特性，就更让人一头雾水了。我经常搞不清楚call,apply之间的区别，今天就记录一下，以免再忘了。

在javascript中，方法可以通过以下几种方式执行：

1.func()，这是最直接最常见的调用方式，也符合一般人的思维逻辑，但是在某些情况下有一些不足，下面会解释。

2.(function(arg){})(window)，匿名方法调用，在构造命名空间时比较有用，后面的括号中的参数与匿名方法中的入参一一对应。

3.func.bind(sth)()，mozilla手册中提到bind是在ECMA-262 5th Edition中新增的一个特性，这里单独列出来作为一种调用方式是因为它弥补了直接调用中不能绑定作用域的缺陷。

4.func.call()，这是第二种调用方式，每个方法的原型中都定义了call方法，用来执行当前方法。

5.func.apply()，call的双胞胎兄弟。

func()

这是最常见的调用方式，在任何语言中随处可见。func(x, y)可以传入不同的参数。在某些语言，例如php，java中，这种调用足以解决一切问题。但是javascript是一门函数式语言，闭包的概念和一个奇怪的关键词this决定了这种调用方式的不足。this应该可以解释为当前代码段的作用域，会随着代码执行到不同的片段而改变，但是某些情况下我们不希望这个this被改变，例如绑定在某些dom上的事件，我们肯定不希望他们被调用的时候this被转移到了window对象上，但有时候确实如此，再比如下面的代码。

代码如下:

var a ={};
var func = function(x) {
    console.log(this);
};
a.onclick = function() {
    var x = 100;
    func(x);
};
a.onclick();

可以把a想象成页面中的一个链接，由于我们只是想将定义好的方法绑定到onclick事件上，而不是立刻调用它，而且这个方法拥有一个参数，所以我们需要用一个匿名方法将他包起来传递给a的onclick事件。这样就有了一个问题，func中的this变成了全局对象window，显然我们并不希望如此。这个时候，使用func()这种直接调用的方式就不行了，于是我们需要将func外的this绑定到func方法上。于是就有了bind,call,apply方法。

bind

bind的目的非常简单，返回一个绑定了this对象的相同方法。上面的代码修改一行就可以实现绑定this在a对象上目的。

代码如下:

var a ={};
var func = function(x) {
    console.log(this);
};
a.onclick = function() {
    var x = 100;
    func.bind(this)(x);  // bind here
};
a.onclick();

这样，onclick事件的this就不会像无头苍蝇一样到处乱跑啦。

call & apply

call和apply要放在一起讲，因为他们实在太像了。他们都支持多参数，而且第一个参数都是即将绑定的this对象，第二个参数则是他们的区别所在，call使用独立的参数作为调用方法的入参，apply使用一个数组作为入参。有的时候我们并不是不想改变this对象，而是想人为的将他绑定到别的对象上，这个时候call和apply是很好用的。（并不是说不能用bind，不过貌似bind出现的比较晚，可能浏览器兼容性不好）。举个栗子：

代码如下:

a = {
    func: function() {
              this.x += 1;
          },
    x: 0
};
b = {
    a: a,
    x: 20
};
for(var i = 0; i < 10; i++){
    b.a.func();
}
console.log(a.x);
console.log(b.x);

上面的a和b对象中都有x，我们希望func能针对性的修改对应的x，但是直接调用只可能修改func作用域中的x，也就是a.x。修改一下代码，就可以实现修改b.x目的

代码如下:

a = {
    func: function() {
              this.x += 1;
          },
    x: 0
};
b = {
    a: a,
    x: 20
};
for(var i = 0; i < 10; i++){
    b.a.func.call(b);  // bind this to b
}
console.log(a.x);
console.log(b.x);

这个栗子举得不好，有点牵强附会，而且这是一种很容易让人迷惑的代码风格，有适用的场景，但不是处处都可用。

赞 (0)

相关推荐

  • 浅谈js中子页面父页面方法 变量相互调用

    (1)子页面调用父页面的方法或者变量: window.parent.方法()或者变量名 window.parent相当于定位到父页面  之后的操作和在父页面中写代码一样写 window.parent.aa();//调取aa函数 window.parent.bb;//调取bb变量 例如:想在子页面中得到id为aaa的文本框的值 window.parent.$("#aaa").val();//这种写法的前提是引用了jquery window.parent.getElementById(&q

  • 基于js里调用函数时,函数名带括号和不带括号的区别

    示例代码: <span style="font-size:18px;">function hi(){ var a = 1; return function(){ console.log(a++); }; }; var aaa = hi(); var bbb = hi; </span> 如以上代码: aaa 是将 hi() 的运行结果赋值给它,即 return 返回的匿名函数,此时有一个闭包,则每次调用 aaa 时都访问的同一个 a,aaa() 第一次运行结果为

  • Objective-C 代码与Javascript 代码相互调用实例

    现在好的IOS 的 APP有时候会跟网页内容相关联,当然也是增加用户体验,及更好的,有效的体现APP 的功能. 由于本人在项目中会用到这部分功能,做下记录! JS调用OC 很多应用里面或多或少的调用了网页,来达到绚丽的效果,所谓的JS调用OC.....举个例子吧,网页上有个按钮 点击按钮跳转界面,跳转的动作由OC的代码实现. OC调用JS 还是举个例子,我们OC代码创建了输入框比如输入用户名,输入完成后显示在网页上,显示用户的用户名 一.利用webView的代理方法实现OC和JS的相互调用 创建

  • 一个Js文件函数中调用另一个Js文件函数的方法演示

    我们知道,在html中,利用<script language="javascript" type="text/javascript" src="./script.js"></script>引入的两个js是不可以相互调用的.那么该如何解决呢?当然,你可以将代码通通copy过来,也许你并不喜欢这样. 例如有这样一个html,里面有一个按钮,当按下时调用b.js文件中的方法b().而b()中又要调用a.js文件中的方法a().若

  • Android WebView的使用方法及与JS 相互调用

    Android WebView的使用方法及与JS 相互调用 1.添加网络权限 <uses-permission android:name="android.permission.INTERNET" /> 2.WebSettings 对访问页面进行设置. WebView mWebView = new WebView(this); WebSettings webSettings = mWebView .getSettings();//支持获取手势焦点,输入用户名.密码或其他 m

  • JavaScript中调用函数的4种方式代码实例

    1:方法调用模式 var myObj = {//对象字面量 param1: 1, param2: 2, sum: function (){ //this关键字只带当前的对象 return this.result = this.param1 + this.param2; } } myObj.sum(); //=>3 2:函数调用模式 var add = function(a, b){ return a + b; } //函数调用模式 add(1,2); //=>3 还可以 function ad

  • Android编程使用WebView实现与Javascript交互的方法【相互调用参数、传值】

    Android编程使用WebView实现与Javascript交互的方法【相互调用参数、传值】

    本文实例讲述了Android编程使用WebView实现与Javascript交互的方法.分享给大家供大家参考,具体如下: Android中可以使用WebView加载网页,同时Android端的Java代码可以与网页上的JavaScript代码之间相互调用. 效果图: (一)Android部分: 布局代码: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&qu

  • JS中使用apply方法通过不同数量的参数调用函数的方法

    apply()方法定义 函数的apply()方法和call方法作用相同,区别在于接收的参数的方式不同. apply()方法接收两个参数,一个是对象,一个是参数数组. apply()作用 1.用于延长函数的作用域 示例: var color='red'; var o={color:'blue'}; function sayColor(){ console.log(this.color); } sayColor();//"red" sayColor.apply(o);//"blu

  • Javascript调用函数方法的几种方式介绍

    javascript语法灵活,同一个功能有五六种实现方式并不罕见,然后再加上有些反人类的原型继承和异步特性,就更让人一头雾水了.我经常搞不清楚call,apply之间的区别,今天就记录一下,以免再忘了. 在javascript中,方法可以通过以下几种方式执行: 1.func(),这是最直接最常见的调用方式,也符合一般人的思维逻辑,但是在某些情况下有一些不足,下面会解释. 2.(function(arg){})(window),匿名方法调用,在构造命名空间时比较有用,后面的括号中的参数与匿名方法中

  • JavaScript访问CSS属性的几种方式介绍

    JavaScript访问CSS属性的方式总体说来有两种:"通过元素访问"."直接访问样式表".另外访问样式的时候有一个不可忽略的问题--运行时样式. 1.通过元素访问 既然是要通过元素访问样式表,那么就应该先确定是哪个元素.这是DOM的内容,在此先不多说.获取引用之后就可以通过 "引用.style.要访问的属性" ,来访问某个属性.举个例子,看如下代码. <pre name="code" class="html

  • javascript函数命名的三种方式及区别介绍

    javascript函数命名的三种方式及区别介绍 第一 复制代码 代码如下: function fn(val1,val2) { alert(val1+val2); } fn(1,2); 第二 复制代码 代码如下: var fn=function() { alert(val1+val2); } fn(1,2); 第三 复制代码 代码如下: var fn=new Function("alert(val1+val2)"); fn(1,2); 上面三种方式逻辑上是等价的,但是还是有点小区别:区

  • JavaScript模拟实现封装的三种方式及写法区别

    前  言   继承是使用一个子类继承另一个父类,那么子类可以自动拥有父类中的所有属性和方法,这个过程叫做继承!  JS中有很多实现继承的方法,今天我给大家介绍其中的三种吧. 1.在 Object类上增加一个扩展方法 //声明一个父类 function Person(name){ this.name=name; this.age=age; this.say=function(){ alert("我叫"+this.name); } } //声明一个子类 function Student()

  • JavaScript 声明私有变量的两种方式

    前言 JavaScript并不像别的语言,能使用关键字来声明私有变量. 我了解的JavaScript能用来声明私有变量的方式有两种,一种是使用闭包,一种是使用WeakMap. 闭包 闭包的描述有很多种,比如: 能访问其它函数作用域的函数: 内部函数访问外部函数作用域的桥梁: ...... 使用闭包构建私有变量的逻辑在于: 1.在外部函数中声明变量和内部函数: 2.使用内部函数访问或者修改变量值: 3.在外部函数内返回内部函数: function outside(){ let val = 123;

  • JavaScript中实现new的两种方式引发的探究

    JavaScript中实现new的两种方式引发的探究

    前言 当你 new 一个构造函数时发生了什么? "众所周知"的三步: 创建一个空对象,将它的引用赋给 this,继承函数的原型:通过 this 将属性和方法添加至这个对象:最后返回 this 指向的新对象,也就是实例. 一般来说在js中大概是这样的: function Mynew(parent,...rest){ let obj={}; obj.__proto__=parent.prototype; let res=parent.apply(obj,rest); return type

  • JavaScript常用截取字符串的三种方式用法区别实例解析

    stringObject.substring(start,stop) 用于提取字符串中介于两个指定下标之间的字符. start必需.一个非负的整数,规定要提取的子串的第一个字符在 stringObject 中的位置. stop可选.一个非负的整数,比要提取的子串的最后一个字符在 stringObject 中的位置多 1.如果省略该参数,那么返回的子串会一直到字符串的结尾. start从0开始 到stop(不包含stop)结束 不接受负的参数. stringObject.substr(start,

  • Spring boot调用Oracle存储过程的两种方式及完整代码

    前言 因工作需要将公司SSH项目改为Spingboot项目,将项目中部分需要调用存储过程的部分用entityManagerFactory.unwrap(SessionFactory.class).openSession()来获取Session实现后发现项目访问数据库超过十次就会挂掉,原因是Springboot连接池数量默认为10,猜测是每次访问数据库后连接未释放导致的,手动关闭session后问题解决. 解决问题的过程中又发现了另外两种调用方式: 直接用EntityManager的createS

  • JavaScript 生成唯一ID的几种方式

    可行方案 1.生成[0,1)的随机数的Math.random //我这次运行生成的是:0.5834165740043102 Math.random(); 2.获取当前时间戳Date.now //现在时间戳是1482645606622 Date.now(); 3.将10进制转换为其他进制的字符串 Number.toString //将1482645606622转换成二进制:10101100100110100100100001001000011011110 (1482645606622).toStr

  • 配置vue全局方法的两种方式实例

    目录 1,前言 2,第一种方式 3,第二种方式 总结 1,前言 在Vue项目开发中,肯定会有这样一个场景:在不同的组件页面用到同样的方法,比如格式化时间,文件下载,对象深拷贝,返回数据类型,复制文本等等.这时候我们就需要把常用函数抽离出来,提供给全局使用.那如何才能定义一个工具函数类,让我们在全局环境中都可以使用呢?请看下文分解. PS:本文vue为2.6.12 2,第一种方式 直接添加到Vue实例原型上 首先打开main.js,通过import引入定义的通用方法utils.js文件,然后使用V

随机推荐