js函数的间接调用call()、apply()和bind()

最新推荐文章于 2024-05-11 21:19:51 发布

weixin_33861800

最新推荐文章于 2024-05-11 21:19:51 发布

阅读量148

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/3697586/blog/1549001

版权

2019独角兽企业重金招聘Python工程师标准>>>

一、首先JavaScript函数有五种调用方式

1. 函数正常调用

2. 作为对象方法(把这个函数写进对象属性中充当一个方法来用)

3. 通过new作为构造函数使用

4. 间接调用:call()、apply()和bind();

5. 自调用(function(){})();或者(function(){}())；

二、然后我们了解下五种方式通常会用在什么场景环境下：

1. 函数正常调用一般是为了快速写一个功能模块并保护作用域的时候常用。

2. 对象方法：毋庸置疑是一个封装的面相对象的思维

3. new作为构造函数是创建一个对象的方法之一

4. 自调用一般用于快速执行或者插件初始化。

5.至于call()、apply()和bind()呢？带着这个疑问我们去探讨一下：

1). 使用call和apply的第一个参数必须是一个对象
2). call第二个参数之后是一些列参数而apply必须是把这些参数组成一个数组传入。 3). bind方法只传入一个对象，把这个函数绑定在这个对象上！并返回一个新的函数！调用新的函数并传入参数，这个过程当做这个对象的这个方法来操作，而实参全部传入原函数。

var name = "张三";
    var obj = {name:"李四"};
    function myFunction(arg1,arg2) {
        console.log("\n"+this.name);
        console.log("\n"+arg1);
        console.log("\n"+arg2);
    }
    myFunction("我是参数1","我是参数2");  //张三
    myFunction.call(window,"我是参数1","我也是参数"); //张三

    //1 call方法
    myFunction.call(obj,"我也是参数1","我也是参数2"); //李四
    //apply方法
    myFunction.apply(obj,["我也是参数1","我也是参数2"]); //李四
    //bind方法
    var bindNewFun = myFunction.bind(obj);
    bindNewFun("我是bind参数1","我是bind参数2"); //李四

首先函数内部的this指向调用当前函数的对象，正常的函数调用f(x);===window.f(x);所以f(x)里的this指的是window。一般使用call、apply和bind函数传入一个新的对象，改变函数内部的this指向（从全局window转到传入的对象！），通过call、apply和bind传入的对象，在函数内部被this指向，就能访问这个对象了。不然直接调用函数的话，this会指向全局对象window。

三、call()、apply()和bind()三个函数从何而来？

1. 首选我们知道每个函数其实也是一个对象，既然是对象，那它就应该会有自己的属性和方法。就好比如每个函数创建时JavaScript都会给它自动创建一个属性property和方法toString()一样！当然也就还有我们的call()、apply()和bind()方法啦...

2. 实际来源：每个函数的原型是Function.prototype。所以这些方法是从函数原型来的！

Function.prototype.call()

Function.prototype.apply()

Function.prototype.bind()

console.log(Function.prototype.hasOwnProperty('bind')) //true
console.log(Function.prototype.hasOwnProperty('call')) //true
console.log(Function.prototype.hasOwnProperty('apply')) //true