你真的了解this指向吗？

liaorio 发布于2019-08-23 17:01 / 2887人阅读

摘要：前言相信很多人都对中的指向问题一知半解，所以今天就来详细看看它到底是怎么判断的。椎确来说是函数调用时是否有引用上下文对象。隐式绑定，上下文对象无上下文对象显示绑定这也是常用的的方式就不一一举例了。

前言

相信很多人都对JavaScript中的this指向问题一知半解，所以今天就来详细看看它到底是怎么判断的。

一. 先看几道题

  var length = 10;
    function fn() {
      console.log(this.length);
    }

  var obj = {
    length: 5,
    method: function(fn) {
      fn();
      arguments[0]();
    }
  };

  obj.method(fn, 1); // 10 2

  var name = "window";

  function f1() {
    var name = "f1";
    return function f2() {
      var name = "f2";
      console.log(this.name);
    }
  }

  var foo = f1();
  var bar = {
    name: "bar",
    foo: foo
  };

  foo(); // window
  bar.foo(); // bar

var name = "window";
  var bar = {
    name: "bar",
    foo: function () {
      var self = this;
      console.log(this.name);
      console.log(self.name);
      (function () {
        console.log(this.name);
        console.log(self.name);
      })()
    }
  };

  bar.foo(); // bar bar window bar

  var name = "window";

  function f1() {
    var name = "f1";
    return () => {
      var name = "f2";
      console.log(this.name);
    }
  }

  var foo = f1();
  var bar = {
    name: "bar",
    foo: foo
  };

  foo(); // window
  bar.foo(); // window

二. this绑定规则 1.绑定默认

当其他规则无法应用时将采用默人绑定

默认绑定将会绑定到全局对象

严格模式（strict mode）下不能讲全局对象用于默认绑定

function foo() {
    console.log(this === window);
  }
foo() // true

function bar() {
    "use strict";
    console.log(this === window);
    console.log(this);
  }
bar() // false undefined

2.隐式绑定

如果函数引用有上下文对象时，this将会绑定到这个对象。椎确来说是函数调用时是否有引用上下文对象。

  var name = "window";
    function foo() {
      console.log(this.name);
    }
  var obj = {
    name: "obj",
    foo: foo
  };
  obj.foo(); // obj 隐式绑定，上下文对象obj

  var bar = obj.foo;
  bar(); // window 无上下文对象

3.显示绑定

这也是常用的的方式：call、apply、bind 就不一一举例了。

  function foo() {
    console.log(this.name);
  }
  var obj = {
    name: "obj"
  };
  foo.call(obj) // obj

4.new绑定

  var a;
  function foo(a) {
    this.a = a
  }
  var bar = new foo(2);

  console.log(a); //undefined
  console.log(bar.a); // 2  this了bar

三.优先级

  var a;

  function foo(a) {
    this.a = a;
  }

  var obj = {
    foo: foo
  };
  var obj2 = {};

  console.log(a); // undefined

  obj.foo(1);
  console.log(obj.a); // 1

  obj.foo.call(obj2, 2);
  console.log(obj2.a); // 2

  var baz = obj.foo.bind(obj2);
  var bar = new baz(3);
  console.log(bar.a); // 3

从上面的代码可以看出优先级从高到低依次是：new绑定、显示绑定、隐式绑定、默认绑定。

GPU云服务器云服务器改变this指向 this的指向说说你所了解的人工智能外呼系统阿里云服务器你了解了吗

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103674.html

嗨，你真的懂this吗？

摘要：任何一个函数都可以使用来调用，因此其实并不存在构造函数，而只有对于函数的构造调用。不可以当作构造函数，也就是说，不可以使用命令，否则会抛出一个错误。 this关键字是JavaScript中最复杂的机制之一，是一个特别的关键字，被自动定义在所有函数的作用域中，但是相信很多JsvaScript开发者并不是非常清楚它究竟指向的是什么。听说你很懂this,是真的吗？请先回答第一个问题：如何准...

morgan 2019-08-23 16:18 评论0 收藏0
HashMap 你真的了解吗？

摘要：加载因子是哈希表在其容量自动增加之前可以达到多满的一种尺度。当哈希表中的条目数超出了加载因子与当前容量的乘积时，则要对该哈希表进行操作即重建内部数据结构，从而哈希表将具有大约两倍的桶数。 showImg(https://upload-images.jianshu.io/upload_images/4565148-98b22ba5ae7d9723.jpg?imageMogr2/auto-...

RdouTyping 2019-08-19 11:33 评论0 收藏0
JavasScript重难点知识

摘要：忍者级别的函数操作对于什么是匿名函数，这里就不做过多介绍了。我们需要知道的是，对于而言，匿名函数是一个很重要且具有逻辑性的特性。通常，匿名函数的使用情况是创建一个供以后使用的函数。 JS 中的递归递归, 递归基础, 斐波那契数列, 使用递归方式深拷贝, 自定义事件添加这一次，彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制，如果...

forsigner 2019-08-21 18:36 评论0 收藏0
理解引用

摘要：我会解释里面神秘的引用，一旦你理解了引用，你就会明白通过引用来了解的绑定是多么轻松，你也会发现读的规范容易得多了。二理论把引用定义成。看看运算符的说法这也就是为什么我们对一个无法解析的引用使用操作符的时候并不会报错。 Know thy reference (原文：know thy reference - kangax) 一、前言翻译好不是件容易的事儿，我尽量讲得通顺，一些术语会保留原...

curlyCheng 2019-08-19 17:58 评论0 收藏0
你真的了解RPC吗？

摘要：现微服务盛行，服务之间通信大概就两种方式和。下面两个列子来让你了解和的区别。列子一文章的增删改查。现微服务盛行，服务之间通信大概就两种方式Api和Rpc。下面两个列子来让你了解Api和Rpc的区别。列子一文章的增删改查。 Api 实现: Router::get(/article/{id},ArticleController@get); Router::post(/articl...

myeveryheart 2019-07-01 11:05 评论0 收藏0