javascript 函数（二）call,apply,bind

函数是工具封装\复用\执行的时机
函数中有3个内容: arguments\return\this
this的变化规则: 谁调用 this就是谁当没有明确的调用者时指向window 严格模式下调用者不明确时 this是undefined

call\apply\bind
函数拥有三个方法其中 call apply是ES5之前就存在的 bind方法是ES5中新增
这三个方法都一个特点:改变函数的this指向

call ()

1 立即执行调用它的函数
2 改变this指向 call的第一个参数就是函数中的this
3 原函数所需的参数按照顺序传递给call 从第二个参数开始传递(因为第一个参数位置被占据,往后推一位)

var obj = {
        name: "aaa",
        run: function(a, b) {
            console.log(this);
            console.log(a + b);
        }
    }
var run = obj.run;
obj.run(); // obj
run(); // window
run.call(null, 1, 2);

类数组对象转数组的快捷方式

 var lis = document.getElementsByTagName("li");
 //普通方式
 var arr = [];
 for (var i = 0; i < lis.length; i++) {
     arr[i] = lis[i]
 }
// 快捷方式
 var arr = [].slice.call(lis);
// 自此之后 arr 就是由lis内的成员组成的数组 可以调用数组的方法

apply()

1 立即执行调用它的函数
2 改变this指向 apply的第一个参数就是函数中的this
3 原函数所需的参数按照顺序放在一个数组中数组放在apply的第二个参数位

function fun(a, b) {
    console.log(this);
    console.log(a, b)
}

fun.call({name: "张三"}, 1, 2);
fun.apply({name: "张三"}, [2, 1]);

bind()

bind是ES5中新增的方法
因为call和apply都会立即执行函数于是出现了bind方法可以在函数定义的时候改变this

function fun() {
        console.log(this, arguments);
        console.log(arguments[0] + arguments[1]); // 5 + 6
    }
    var fun1 = fun.bind({}, 5); // bind接收任意个参数 第一个参数表示函数中的this 之后的每一个参数都是预定义参数 每当fun1执行的时候 都会传递这些参数
    fun1(6);

fun如果执行依旧遵循原规则所以 bind方法其实并没有改变原函数中的this 而是返回了一个新的函数当新函数执行的时候调用原函数并可以预传递参数

在返回的新函数中预传递的参数总是在新函数的参数之前.

来源：CSDN

作者：Shirley_0513

链接：https://blog.csdn.net/Shirley_0513/article/details/103959286

标签

bi工具