改变函数作用域（call、 apply 、bind）

最新推荐文章于 2022-05-23 19:51:37 发布

丸子嘻嘻

最新推荐文章于 2022-05-23 19:51:37 发布

阅读量1.5k

点赞数

本文链接：https://blog.youkuaiyun.com/TWFKXP/article/details/80508688

版权

本文详细解析了JavaScript中this的指向规则及不同情况下this的绑定方式，并介绍了如何使用call、apply和bind方法来改变this的指向。此外，还探讨了构造函数绑定与原型模式在实现对象继承中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

call、 apply 、bind

同异

1）第一个参数都是this的上下文

2）apply第二个参数是数组，call和bind后面都是参数列表

3） call和apply默认会自动执行，bind需要在后面加()来自动执行

4）bind是ES5语法，它是新创建一个函数，然后把它的上下文绑定到bind()括号中的参数上，然后将它返回。
this 的指向
this 永远指向最后调用它的那个对象，箭头函数则不是

        var name = "windowsName";
        var a = {
            name: "Cherry",
            fn: function () {
                console.log(name); // windowsName
                console.log(this.name); // Cherry
            }
        }
        a.fn();

fn 的内部的 this 是对象 a，因此 this.name 会找到该函数内的变量 name
而name 前面没有显示的函数调用，其实它是 window.name 因此就会找到函数外的变量 name

   var name = "windowsName"; 
   var a = { 
       name: "Cherry", 
       fn: function () { 
             console.log(this.name); // Cherry 
             } 
          } 
       var f = a.fn(); 
       f;

虽然将 a 对象的 fn 方法赋值给变量 f 了，但是没有调用，而，“this 永远指向最后调用它的那个对象”，所以最后是 window.f = window.a.fn() ,多层嵌套，只算最靠近方法的那层。所以 this 指向的是 a。

如何使用

        var name = 'hello';
        var a = {
            name: "Cherry",
            fn: function (a, b) {
                console.log(this.name+"：" +(a + b));
            }
        }
        var b = a.fn;
        // 前三个输出都是 Cherry： 3 
        b.bind(a, 1, 2)();
        b.apply(a,[1,2]);  
        b.call(a,1,2);
        b(); // hell0 NAN

第四个调用显示了使用 call、 aply 、bind 之后，运行时 的this 由 window 变为 a ,即 a.fn()，为而第四个任然是 window.fn()

箭头函数的 this 始终指向函数定义时的 this，而非执行时。箭头函数需要记着这句话：“箭头函数中没有 this 绑定，必须通过查找作用域链来决定其值，如果箭头函数被非箭头函数包含，则 this 绑定的是最近一层非箭头函数的 this，否则，this 为 undefined”。

构造函数绑定

使用call或apply方法，将父对象的构造函数绑定在子对象上

function Animal(){
　　　　this.species = "动物";
　　}
function Cat(name,color){
　　　　Animal.apply(this, arguments);
　　　　this.name = name;
　　　　this.color = color;
　　}
　　
　　var cat1 = new Cat("大毛","黄色");
　　alert(cat1.species); // 动物

prototype模式

让”猫”的prototype对象，指向一个Animal的实例，那么所有”猫”的实例，就能继承Animal了。

function Animal(){
　　　　this.species = "动物";
　　}
　function Cat(name,color){
　　　　this.name = name;
　　　　this.color = color;
　　}
　 alert(Cat.prototype.constructor.toString());
     // function Cat(name,color){
     //    this.name = name;
     //    this.color = color;
     // }   

      Cat.prototype = new Animal();
      var cat1 = new Cat('小H','小蓝色');
      alert(cat1.species);  // 动物
      alert(Cat.prototype.constructor.toString());
     //  function Animal(){
     // this.species = "动物";
     //  }

      Cat.prototype.constructor = Cat;          alert(Cat.prototype.constructor.toString());
     // function Cat(name,color){
     //    this.name = name;
     //    this.color = color;
     // }  
      alert(cat1.species); // 动物

分析

"Cat.prototype = new Animal();”
任何一个prototype对象都有一个constructor属性，指向它的构造函数.Cat.prototype.constructor是指向Cat的；加了这一行以后，Cat.prototype.constructor指向Animal。也就是说，这行删除了prototype 对象原先的值，然后赋予一个新值
这显然会导致继承链的紊乱（cat1明明是用构造函数Cat生成的），因此我们必须手动纠正，将Cat.prototype对象的constructor值改为Cat。"Cat.prototype.constructor = Cat"