改变函数内部的this指向

1，call()方法

call()方法可以改变函数内部this的指向，常用来做继承

<script>
    function Father(name,age,sex) {
        this.uname = name;
        this.age = age;
        this.sex = sex;
    }
    
    function Son(name,age,sex) {
        Father.call(this,name,age,sex)
    }
        
    let son = new Son('孩子','18','男');
    console.log(son);
</script>

 

在上面的例子中，Son的this通过call()方法，指向了Father里面的this，并传入参数，可以使用Father的属性和方法，所以，常用来做继承

2，apply()方法

<script>
    let objs = {
        name:'张三',
        age:'18',
        sex:'男',
    }
    
    function fn(prop) {
        console.log(this);//此时this指向window.
        console.log(prop);
    }
    fn();
    fn.apply(objs,['hhhhhh']);//传递的参数必须是数组(伪数组)形式
</script>

 

apply()方法同样可以改变函数内部的this指向，与call()不同的是，传递的参数必须为数组形式

所以，我们可以用apply()方法取数组的最大最小值

 

<script>
    let arr = [11,22,33,4,55,555,6];
    let max = Math.max.apply(Math,arr);//Math是调用者，所以此时this为Math
    let min = Math.min.apply(Math,arr);
    console.log(max,min);

    console.log(Math.max(...arr));//扩展运算符的效果一样
    console.log(Math.min(...arr));
</script>

 

 3，bind()方法

<script>
   let objs = {
        name:'张三',
        age:'18',
        sex:'男',
    }
    
    function fn(prop) {
        console.log(this);//此时this指向window.
        console.log(prop);
    }
    fn();
    let f = fn.bind(objs,'hhhhh');//bind()方法不会直接调用函数，但是也能改变其this指向
    f();//bind()返回的是函数，所以用变量f调用
</script>

 

总结：相同的：三个方法都可以改变函数内部的this指向

不同点：1，call()和apply()方法会直接调用函数，而bind()方法不会调用函数；2，apply()方法传入的参数必须为数组形式，call()和bind()参数为字符串

应用场景：1，call()常被用与继承；2，apply()方法常用于数组对象，如：数组的最大最小值；3，bind()方法常用于一些不调用函数，但是也想改变其this指向，比如改变定时器内部的this指向