改变函数内部的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指向

 

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页