this全面解析

  • this的绑定规则总共有下面5种。

    • 1、默认绑定(严格/非严格模式)
    • 2、隐式绑定
    • 3、显式绑定
    • 4、new绑定
    • 5、箭头函数绑定

    1 调用位置

    调用位置就是函数在代码中被调用的位置(而不是声明的位置)。

    查找方法:

    • 分析调用栈:调用位置就是当前正在执行的函数的前一个调用

      function baz() {
          // 当前调用栈是:baz
          // 因此,当前调用位置是全局作用域
          
          console.log( "baz" );
          bar(); // <-- bar的调用位置
      }
      
      function bar() {
          // 当前调用栈是:baz -
  • 之前文章详细介绍了 this 的使用,不了解的查看【进阶3-1期】。

    call() 和 apply()

    call() 方法调用一个函数, 其具有一个指定的 this 值和分别地提供的参数(参数的列表)。

    call()apply()的区别在于,call()方法接受的是若干个参数的列表,而apply()方法接受的是一个包含多个参数的数组

    举个例子:

    var func = function(arg1, arg2) {
         ...
    };
    
    func.call(this, arg1, arg2); // 使用 call,参数列表
    func.apply(this, [arg1, arg2]
  • 定义

    new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。 ——(来自于MDN)

    举个栗子

    function Car(color) {
        this.color = color;
    }
    Car.prototype.start = function() {
        console.log(this.color + " car start");
    }
    
    var car = new Car("black");
    car.color; // 访问构造函数里的属性
    // black
    
    car.start(); // 访问原型里的属性
    // black car start

    可以

  • bind()

    bind() 方法会创建一个新函数,当这个新函数被调用时,它的 this 值是传递给 bind() 的第一个参数,传入bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。bind返回的绑定函数也能使用 new 操作符创建对象:这种行为就像把原函数当成构造器,提供的 this 值被忽略,同时调用时的参数被提供给模拟函数。(来自参考1)

    语法:fun.bind(thisArg[, arg1[, arg2[, ...]]])

    bind 方法与 call / apply 最大的不同就是前者返回一个绑定上下文的函数,而后两者是直接执行了函

  • 本期的主题是this全面解析,本计划一共28期,每期重点攻克一个面试重难点,如果你还不了解本进阶计划,文末点击查看全部文章。

    如果觉得本系列不错,欢迎点赞、评论、转发,您的支持就是我坚持的最大动力。


    上篇文章详细的分析了各种this的情况,看过之后对this的概念就很清晰了,没看过的去看看。

    我们知道this绑定规则一共有5种情况:

    • 1、默认绑定(严格/非严格模式)
    • 2、隐式绑定
    • 3、显式绑定
    • 4、new绑定
    • 5、箭头函数绑定

    其实大部分情况下可以用一句话来概括,this总是指向调用该函数的对象

    但是对于箭头函数并不是这样,是根据外层(函数或者全局)作用域(词法作用域)来决定this。