JavaScript 之 this 指向问题

Alan 发布于2019-08-19 17:17 / 379人阅读

摘要：一等公民对象函数在提指向问题之前，肯定是有必要说明一等公民对象，既然是对象，那么就能像普通的值一样传递。在普通浏览器中指向的是在中指向的是全局对象全局环境中或者模块环境中。即指向或者的第一个参数。第二条规则，指向的不是原文链接

1. 一等公民对象——函数

在提this指向问题之前，肯定是有必要说明一等公民对象function ，既然function是对象，那么就能像普通的值一样传递。嗯，在匿名函数中，这样的做法是非常常见的。

函数会在代码的运行前进行解析，这就保证了函数存在于当前上下文的任意一个地方，即在函数定义的前面去调用也是正确的。

foo();

function foo () {};

函数是一个对象，所以我们常常会看见把一个匿名的函数给一个值。

var foo = function () {};

赋值语句只有在执行的时候才会运行，也就是说所看到的var foo = 1 是分为两部分的：

var foo;
...
foo = 1;
...

所以可能会出现下面的问题

foo;     //undefined
foo();   //TypeError
var foo = function () {
  console.log(1);
}

因为他和下面的写法是一样的

var foo;

foo;

foo();

foo = function () {
  console.log(1);
}

正常的，我们这样写是没有问题的

foo;   // undefined 

var foo = function () {
  console.log(1);
}

foo(); // 1

2. this指向问题

javascript中的this和一般语言中的this是有点区别的，在不同的情况下，指向也有所不同：

1.全局范围内

指向的是全局对象。在普通浏览器中指向的是window, 在Node中指向的是全局对象global（全局环境中）或者module.exports(模块环境中)。

2.函数调用中

在普通的函数调用中，this依旧指向全局对象。（这个设计似乎并没有什么作用，应该是一个错误的设计。并且在很多的情况下不注意都会引来很多的麻烦）

Foo.method = function () {
  function test () {
      //这里的this指向的不是Foo.而是全局对象
  }        
}

一般我们会创建一个局部的变量去指代上一层的对象

Foo.method = function () {
  that = this;   //按照下面一条规则，这儿的this指向的是Foo
  function (test) {
    // that
  }
}

3.方法调用中

指向调用它的对象

4.调用构造函数

指向新创建的对象

5.显式设置this

指向显式指向的对象。即指向call或者apply的第一个参数。

注意：

像下面这样对方法进行赋值的时候，函数内this的指向也不是赋值时所调用方法的对象。

var test = Obj.method();

test(); // 第二条规则，this指向的不是Obj

原文链接：http://life.rccoder.net/javascript/1210.html

GPU云服务器云服务器改变this指向 this的指向 javascript的this javaScript中的this

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

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

javascript技术难点（三）之this、new、apply和call详解

摘要：第四点也要着重讲下，记住构造函数被操作，要让正常作用最好不能在构造函数里 4) this、new、call和apply的相关问题讲解this指针的原理是个很复杂的问题，如果我们从javascript里this的实现机制来说明this，很多朋友可能会越来越糊涂，因此本篇打算换一个思路从应用的角度来讲解this指针，从这个角度理解this指针更加有现实意义。下面我们看看在ja...

ghnor 2019-08-21 10:27 评论0 收藏0
JavaScript深入之bind的模拟实现

摘要：也就是说当返回的函数作为构造函数的时候，时指定的值会失效，但传入的参数依然生效。构造函数效果的优化实现但是在这个写法中，我们直接将，我们直接修改的时候，也会直接修改函数的。 JavaScript深入系列第十一篇，通过bind函数的模拟实现，带大家真正了解bind的特性 bind 一句话介绍 bind: bind() 方法会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数...

FingerLiu 2019-08-20 16:15 评论0 收藏0
学习JavaScript之this,call,apply

摘要：在全局对象中调用，自然读取的是全局对象的值构造器调用说明作为构造器调用时，指向返回的这个对象。最直观的表现就是，去看一些优秀框架的源代码时，不再是被绕的晕乎乎的。学习起因：在之前的JavaScript学习中，this,call,apply总是让我感到迷惑，但是他们的运用又非常的广泛。遂专门花了一天，来弄懂JavaScript的this,call,apply。中途参考的书籍也很多，以...

wenhai.he 2019-08-19 17:30 评论0 收藏0
深入理解 Javascript 之 this

摘要：深入浅出的理解问题的由来写法一写法二虽然和指向同一个函数，但是执行结果可能不一样。该变量由运行环境提供。所以，就出现了，它的设计目的就是在函数体内部，指代函数当前的运行环境。深入浅出this的理解问题的由来 var obj = { foo: function(){} } var foo = obj.foo; // 写法一 obj.foo(); // 写法二 foo...

OnlyMyRailgun 2019-08-23 10:54 评论0 收藏0
JavaScript阴沟里翻船之运算符优先级

摘要：操作符的两种形态其实在的操作符描述中，语法是你会发现被中括号所包围也就意味着可缺省，因此，如果对于不含参数的构造函数而言与二者并无区别，那我们接着思考一个问题，对于前面返回函数的而言，当的时候为什么执行的是而不是呢。　首先欢迎大家关注我的Github博客，也算是对我的一点鼓励，毕竟写东西没法变现，坚持下去也是靠的是自己的热情和大家的鼓励。各位读者的Star是激励我前进的动力，请不要吝...

selfimpr 2019-08-23 13:41 评论0 收藏0