js中bind、apply、call简单使用

近来发现js基础不是很好，其实菜的要命（·… 。…·），先来回顾下js的bind、apply和call吧。

bind()方法会创建一个新函数，当这个新函数被调用时，他的this值是传递给bind的第一个参数；

新函数的参数是bind()的其他参数和其原本的参数当绑定的；

函数被调用时，thisArg 作为原函数运行时的this指向；

但是使用new操作符调用函数时该参数无效

 function fn(a, b, c, d, e) {
        console.log(a, b, c, d, e)
        return this.s + a + b + c
    }

    var _fn = fn.bind({
        s: 0
    }, 10, 11, 12); //{s:0}为函数_fn运行时的this指向 ；10 11 12作为函数的第一第二第三个参数
    var ans = _fn(30, 1, 2, 3); //30 作为第四个参数,以此类推  多余的参数无效
    console.log(ans, "===51===")

来一个简单栗子：每隔一秒在控制台打印 1-5

方法一：

   for (var i = 1; i <= 5; i++) {
         //立即调用
         ! function(a) {
             setTimeout(function() {
                 console.log(a);
             }, i * 1000);
         }(i);
    }

方法二：

使用let

    for (let i = 1; i <= 5; i++) {
        // let方式
        setTimeout(function() {
            console.log(i);
        }, i * 1000);
    }

方法三：

使用bind方法

    for (var i = 1; i <= 5; i++) {
        setTimeout(console.log.bind(console, i), i * 1000)
    }

apply和call调用模式：即ObjA.apply(ObjB,args[])或者ObjA.call(ObjB,arg1,arg2...)。

函数调用时，除了接收形式参数外，还会接收this和arguments。其中this为函数对象上下文，arguments为实际参数。

apply和call实现同样的功能，即切换函数对象的上下文(this指向的引用)，区别在于形式参数不一样。apply为arguments或者数组，

call为以逗号隔开多个单独形式参数。

    fun.apply(thisArg,[1,2,3,4])

    fun.call(this.arg,1,2,3,4)

来一个简单栗子：通过apply和call实现扩展和继承

   function Animal(name, age) {
        this.name = name;
        this.age = age;
        this.showName = function() {
            alert(this.name + this.age)
        }
    }

    function Cat(name) {
        Animal.call(this, name)
    }

    function Dog(name, age, sex) {
        Animal.apply(this, [name, age, sex])
    }

    var cat = new Cat('这是一个小黑猫') //
    cat.showName()

    var dog = new Dog('这是一只小狗子', 23, 'nv')
    dog.showName()