Javascript中关于this绑定机制的解析-详解

冷不防 2022-10-15 09:55 178阅读 0赞

### 为什么要用this： ###

function identify() {
      console.log("Hello,I'm " + this.name);
    }
    let me = {
      name: "Kyle"
    };
    let you = {
      name: "Reader"
    };
    identify.call(me); // Hello,I'm Kyle
    identify.call(you); // Hello,I'm Reader

> 这个简单的栗子，可以在不同的对象中复用函数`identify`，不用针对每个对象编写一个新函数。

**this解决的问题:**

> this提供了一种更优雅的方法来隐式'传递'一个对象的引用，因此可以**将API设计得更加简洁并且易于复用**。

## 四种绑定规则： ##

### 默认绑定： ###

> **规则**：在非严格模式下，默认绑定的`this`指向全局对象，严格模式下`this`指向undefined

function foo() {
      console.log(this.a); // this指向全局对象
    }
    var a = 2;
    foo(); // 2
    function foo2() {
      "use strict"; // 严格模式this绑定到undefined
      console.log(this.a); 
    }
    foo2(); // TypeError:a undefined

默认绑定规则如上述栗子，书中还提到了一个微妙的细节：

function foo() {
      console.log(this.a); // foo函数不是严格模式 默认绑定全局对象
    }
    var a = 2;
    function foo2(){
      "use strict";
      foo(); // 严格模式下调用其他函数，不影响默认绑定
    }
    foo2(); // 2

> 所以：对于默认绑定来说，**决定this绑定对象的是函数体是否处于严格模式**，严格指向undefined，非严格指向全局对象。
> 
> 通常不会在代码中混用严格模式和非严格模式，所以这种情况很罕见，知道一下就可以了，避免某些变态的面试题挖坑。

### 隐式绑定： ###

> **规则**：函数在调用位置，是否有上下文对象，如果有，那么this就会隐式绑定到这个对象上。

function foo() {
          console.log(this.a);
        }
        var a = "Oops, global";
        let obj2 = {
          a: 2,
          foo: foo
        };
        let obj1 = {
          a: 22,
          obj2: obj2
        };
        obj2.foo(); // 2 this指向调用函数的对象
        obj1.obj2.foo(); // 2 this指向最后一层调用函数的对象
        
        // 隐式绑定丢失
        let bar = obj2.foo; // bar只是一个函数别名 是obj2.foo的一个引用
        bar(); // "Oops, global" - 指向全局

**隐式绑定丢失：**

> 隐式绑定丢失的问题：**实际上就是函数调用时，并没有上下文对象，只是对函数的引用**，所以会导致隐式绑定丢失。

同样的问题，还发生在传入回调函数中，这种情况更加常见，并且隐蔽，类似：

test(obj2.foo); // 传入函数的引用，调用时也是没有上下文对象。

### 显式绑定: ###

> 就像我们上面看到的，如果单纯使用隐式绑定肯定没有办法得到期望的绑定，幸好我们还可以**在某个对象上强制调用函数，从而将`this`绑定在这个对象上**。

**规则**：我们可以通过`apply`、`call`、`bind`将函数中的`this`绑定到指定对象上。

function foo() {
        console.log(this.a);
    }
    let obj = {
        a: 2
    };
    foo.call(obj); // 2

**传入的不是对象：**

> 如果你传入了一个原始值(字符串,布尔类型，数字类型)，来当做this的绑定对象，这个原始值转换成它的对象形式。
> 
> 如果你把`null`或者`undefined`作为this的绑定对象传入`call`/`apply`/`bind`，这些值会在调用时被忽略，实际应用的是默认绑定规则。

### new绑定： ###

> 书中提到：在js中，实际上并不存在所谓的'构造函数'，只有对于函数的'构造调用'。

**new的时候会做哪些事情：**

> 1.  **创建一个全新的对象**。
> 2.  这个新对象会被执行 \[\[Prototype\]\] 连接。
> 3.  **这个新对象会绑定到函数调用的this**。
> 4.  如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。

**规则**：使用构造调用的时候，this会自动绑定在new期间创建的对象上。

function foo(a) {
      this.a = a; // this绑定到bar上
    }
    let bar = new foo(2);
    console.log(bar.a); // 2

### this四种绑定规则的优先级 ###

如果在某个调用位置应用了多条规则，如何确定哪条规则生效？

obj.foo.call(obj2); // this指向obj2 显式绑定比隐式绑定优先级高。
        new obj.foo(); // thsi指向new新创建的对象 new绑定比隐式绑定优先级高。

显式绑定和new绑定无法直接比较(会报错),默认绑定是不应用其他规则之后的兜底绑定所以优先级最低，最后的结果是：

> **显式绑定 > 隐式绑定 > 默认绑定**
> 
> **new绑定 > 隐式绑定 > 默认绑定**

### 箭头函数的this指向不会使用上述的四条规则： ###

function foo() {
      return () => {
        console.log(this.a);
      };
    }
    let obj1 = {
      a: 2
    };
    let obj2 = {
      a: 22
    };
    let bar = foo.call(obj1); // foo this指向obj1
    bar.call(obj2); // 输出2 这里执行箭头函数 并试图绑定this指向到obj2

从上述栗子可以得出，箭头函数的this规则：

> 1.  **箭头函数中的`this`继承于它外面第一个不是箭头函数的函数的`this`指向**。
> 2.  **箭头函数的 this 一旦绑定了上下文，就不会被任何代码改变**。

发表评论取消回复

表情：

评论列表（有 0 条评论，178人围观）

还没有评论，来说两句吧...

相关阅读

相关 “this”绑定如何在 JavaScript 中工作

“this”绑定如何在 JavaScript 中工作本文译自：[How “This” Binding Works in JavaScript][How _This_ B

╰半夏微凉°/ 2024年03月27日 08:58/ 0 赞/ 105 阅读

相关 java中的构造函数、this、this()、super、super()、this动态绑定

文章目录 1、名词解释 2、简单实例演示 3、this的后期绑定实例 4、java动态绑定原理 1、名词解释

墨蓝/ 2023年10月08日 12:36/ 0 赞/ 100 阅读

相关 JavaScript的执行机制——this的详解

this的详解 1.JavaScript 中的 this 是什么 2.全局执行上下文中的 this 3.函数执行上下文中的 this 3.1

偏执的太偏执、/ 2022年10月15日 12:49/ 0 赞/ 227 阅读

相关 Javascript中关于this绑定机制的解析-详解

为什么要用this： function identify() { console.log("Hello,I'm " + this.name);

冷不防/ 2022年10月15日 09:55/ 0 赞/ 179 阅读

相关 JavaScript 中 this 的详解

this 的指向 this 是 js 中定义的关键字，它自动定义于每一个函数域内，但是它的指向却让人很迷惑。在实际应用中，this 的指向大致可以分为以下四种情况。原

缺乏、安全感/ 2022年06月17日 13:24/ 0 赞/ 223 阅读

相关 JavaScript中绑定事件的方式

1. 直接在HTML中绑定事件 <span id='myselect' οnclick="showMe(this)">myspan</span> js代码

浅浅的花香味﹌/ 2022年06月10日 09:36/ 0 赞/ 255 阅读

相关 PHP 中 self、static、$this 的区别 & 后期静态绑定详解

self、static 和 $this 的区别为了更好地理解 self、static 和 $this 的区别，先来看一个示例。 <?php class A {

Myth丶恋晨/ 2022年05月26日 21:09/ 0 赞/ 214 阅读

相关 Javascript 函数中This的绑定形式（转载）

目录 this的默认绑定 this的隐式绑定隐式绑定下，作为对象属性的函数，对于对象来说是独立的在一串对象属性链中，th

红太狼/ 2022年05月26日 10:11/ 0 赞/ 146 阅读

相关 JavaScript中this详解

1.函数预编译过程 this —> window 2.全局作用域里 this —> window 3.call/apply 可以改变函数运行时this指向 4.obj.f

矫情吗；*/ 2022年03月14日 14:08/ 0 赞/ 252 阅读

相关总结JavaScript中this绑定方式

this在默认的绑定非严格模式下指向window，严格模式下指向undefined，比如下面的函数foo在非严格模式下

小灰灰/ 2020年04月21日 05:56/ 0 赞/ 933 阅读