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

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

一、首先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

四、关于上下文context

0. context是函数中this的指向

1. 每个js函数都有与之对应的上下文,因为每当调用一个函数时,一个新的执行上下文就会被创建出来。并且将其压入到执行上下文堆栈的顶部。浏览器总是执行当前在堆栈顶部的上下文,一旦执行完毕,该上下文就会从堆栈顶部被弹出,然后,进入其下的上下文执行代码。

2. 可以通过call和apply和bind三个函数改变函数的上下文。

3. context表明当前函数被谁调用!

4. 上下文通常是取决于一个函数如何被调用

        A. 当函数作为对象的方法被调用时,this 被设置为调用方法的对象

        B. 当调用一个函数时通过new的操作符创建一个对象的实例。当以这种方式调用时,this 的值将被设置为新创建的实例

        C. 当调用一个未绑定函数,this 将被默认设置为 全局上下文(global context) 或window对象(如果在浏览器中)

转载于:https://my.oschina.net/u/3697586/blog/1549001

你可能感兴趣的:(js函数的间接调用call()、apply()和bind())