JavaScript中改变this指向call/apply/bind方法

最新推荐文章于 2024-02-26 17:18:19 发布

刘远山

最新推荐文章于 2024-02-26 17:18:19 发布

阅读量157

点赞数

分类专栏：前端专题学习汇总

本文链接：https://blog.csdn.net/weixin_39218464/article/details/108961965

版权

前端专题学习汇总专栏收录该内容

67 篇文章 1 订阅

订阅专栏

这篇博客探讨了JavaScript中call、apply和bind方法如何改变函数内部的this指向，并通过实例展示了如何在不同对象间使用这些方法。此外，还介绍了如何利用这些方法在对象构造过程中复用代码，例如在Body、Head和Arms函数中通过call方法实现Person对象的初始化。

摘要由CSDN通过智能技术生成

实例


<script>
    //call和apply，都是可以改变this的指向
    /*var obj1 = {
        width: 30,
        height: 50,
        getArear: function() {
            console.log(this.width*this.height);
        },
        getCube: function(w,h,l){
            console.log(this.name+ "体积为"+ w*h*l);
        }
    }
    obj1.getArear();
    var obj2 = {
        width: 20,
        height: 40,
        name:"obj2"
    }
     var obj3 = {
         width:20,
         height:40,
         name:"obj3"
     }
    /!*obj2.__proto__ = obj1;
    obj2.getArear();*!/
    console.log(obj2);
    obj1.getArear.call(obj2);//使用obj2替换了obj1中的getArear中的this
    obj1.getCube(3,4,5);
    obj1.getCube.call(obj2,2,3,4);//如果有参数的话则直接将参数写在后面的参数列表
    obj1.getCube.apply(obj3, [2,5,8]);//apply方法和call方法唯一区别在于参数的写法，apply必须将参数写成数组的写法
    //bind()方法，将生成一个新的函数，该函数也可以改变其中this指向，必须执行才可以
    obj1.getCube.bind(obj3, 2,5,10)();//参数是按照Call的写法
    var f = obj1.getCube.bind(obj2, 4,5,8);
    f();*/

    //------实例
    function Body(weight){
        this.weight = weight;
    }
    function Head(hairColor){
        this.hairColor = hairColor;
        this.changeHairColor = function(color){
            this.hairColor = color;
        }
    }
    function Arms(armsLen){
        this.armsLen = armsLen;
    }
    function Person(obj){
        this.name = obj.name;
        Body.call(this, obj.weight);
        Head.call(this, obj.hairColor);
        Arms.call(this, obj.armsLen);
        this.eat = function(){
            console.log(this.name + " is eating")
            this.weight++;
            console.log(this.weight);
        }
    }
    var p1 = new Person({
        name:"张三",
        weight:100,
        hairColor:"red",
        armsLen:60
    })
    console.log(p1);    
    p1.eat();
    p1.changeHairColor("black");
    console.log(p1);
</script>