JavaScript学习总结——this对象

wzyplus 发布于2019-08-19 18:06 / 1888人阅读

摘要：全局环境在全局环境中使用，它会指向全局对象。作为构造函数调用中的构造函数很特殊，如果不使用调用，则和普通函数一样。作为又一项约定俗成的准则，构造函数以大写字母开头，提醒调用者使用正确的方式调用。

在JavaScript中，this关键字是动态绑定的，或称为运行期绑定，这极大地增强的我们程序的灵活性，同时也给初学者带来了很多困惑。本文总结了this的几个使用场景和常见误区。

全局环境

在全局环境中使用this，它会指向全局对象。在web游览器中，也就是window对象。

alert(this === window);    // true

函数调用

当作为普通函数被调用时，函数内部的的this也会指向全局对象。

var name = "window";

function sayName(){
    var name = "fun";
    alert(this.name);
}

sayName();    // "window"

作为对象的方法调用

当作为对象内部的方法被调用时，这里this指向这个方法所在的对象。

var name = "window";

var obj = {
  name: "obj",
  sayName: function(){
    alert(this.name);
  }
};

obj.sayName();    // "obj"

作为构造函数调用

JavaScript 中的构造函数很特殊，如果不使用 new 调用，则和普通函数一样。作为又一项约定俗成的准则，构造函数以大写字母开头，提醒调用者使用正确的方式调用。如果调用正确，this 绑定到新创建的对象上。

function Person(name){
    this.name = name,
    this.sayName = function(){
        alert(this.name);
    }
}

var person1 = new Person("daoko");
person1.sayName();    // "darko"

apply和call调用

apply和call是函数对象的的两个方法，它们可以修改函数执行的上下文环境，即this绑定的对象。apply和call的第一个参数就是this绑定的对象，若apply和call的参数为空，则默认调用全局对象。

var name = "window"

var obj = {
  name: "object"
}

function sayName(){
  alert(this.name);
}

sayName();    // 直接调用函数sayName
sayName.call(obj);    // 用call方法修改this的指向
sayName.call();    // 当call方法的参数为空时，默认调用全局对象

特殊情况 常见错误

我们首先来看这样一个栗子：

var name = "window";

var obj = {
  name: "obj",
  sayName: function(){
    var test = function(){
      alert(this.name);    // this绑定到全局对象上
    }
    test();
  }
}

obj.sayName();    // "window"

是不是和上面说的作为对象的方法调用情况很像，按照我们的理解此时的this应该指向obj对象，但是实际情况不是这样的，此时的this指向全局对象。

这属于 JavaScript 的设计缺陷，正确的设计方式是内部函数的 this 应该绑定到其外层函数对应的对象上，为了规避这一缺陷，我们可以使用变量替代的方法，约定俗成，该变量一般被命名为 that。在这个栗子中，这样我们创建了一个局部变量that来指向obj对象。

var name = "window";

var obj = {
  name: "obj",
  sayName: function(){
    var that = this;    // that指向对象obj
    var test = function(){
      alert(that.name);
    }
    test();
  }
}

obj.sayName();    // "obj"

方法的赋值表达式

当我们把一个对象的方法赋值给一个变量时，它的this会发生什么变化呢? 看个栗子:

var name = "window";

var obj = {
  name: "obj",
  sayName: function(){
    alert(this.name);
  }
}

var test = obj.sayName;
obj.sayName();    // "obj"
test();    // "window"

从上面这个栗子中我们可以看到，当把对象obj的方法赋值给一个新的变量test时，它的this指向发生了变化，test就向一个普通的函数一样被调用，此时指向全局对象。

GPU云服务器云服务器 javascript学习总结对象名this javascript的this javaScript中的this

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

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

Javascript this 的一些学习总结02【转自cnblogs的JKhuang】

摘要：发生这种情况的条件是当引用类型值的对象恰好为活跃对象。总结本文介绍中的使用，更重要的是帮助我们能更好地理解值在全局函数构造函数以及一些特例的情况中值的变化。然而，由于对于来说没有任何意义，因此会隐式转换为全局对象。接上一篇Javascript this 的一些学习总结02【转自cnblogs的JKhuang】引用类型以及this的null值对于前面提及的情形，还有例外的情况，当调...

suemi 2019-08-21 15:06 评论0 收藏0
javascript this的学习总结

摘要：例如通过，调用时强制把它的绑定到上。箭头函数问题箭头函数体内的对象就是定义时所在的对象，而不是使用时所在的对象，固定不变。刚入门javascript，关于this的学习，花了自己挺多的时间，做了比较多的功课，看了一篇又一篇的文章，也看了一些书籍，今天就结合看的那些东西总结下自己所学到的东西，方便留着以后回看，进一步的学习，这篇文章会不断的更新，不断的更新自己的想法，现在还是一个入门不...

A Loity 2019-08-21 17:32 评论0 收藏0
Javascript Context和Scope的学习总结02【转自cnblogs的JKhuang】

摘要：总结本博文通过介绍执行上下文和作用域的异同的使用以及变量对象，让我们加深对语言特性的理解。首先，我们介绍了执行上下文和的的关系，并且执行上下文是具有对象的然后，介绍了作用域使变量在作用域范围内可见，并且作用域是基于函数的。接上一篇Javascript Context和Scope的学习总结01【转自cnblogs的JKhuang】（可能是segmentfault对单篇文章发布字数有限制...

Aldous 2019-08-21 15:05 评论0 收藏0
Javascript Context和Scope的学习总结01【转自cnblogs的JKhuang】

摘要：正文执行环境也称为环境是中最为重要的一个概念。执行环境定义了变量或函数有权访问的其他数据，决定了它们各自的行为。简而言之，执行环境是基于对象的，而作用域是基于函数的。前述在我们学习Javascript过程中，常常会遇到作用域（Scope）和执行上下文（Context）等概念。其中，执行上下文与this关键字的关系密切。有面向对象编程经验的各位，对于this关键字再熟悉不过了，因此...

April 2019-08-21 15:06 评论0 收藏0
JavaScript学习总结（九）事件详解

摘要：布尔值表示捕获阶段调用事件处理程序，表示冒泡阶段通过对象的方法，也可以定义事件的回调函数。对象会被作为第一个参数传递给事件监听的回调函数。布尔默认值是，当设置成时用以取消事件的默认行为与中的相同。其实这篇文章挺早之前就写了，但是由于sf保存方面的bug，所以当时写了一大堆，结果没保存，觉得这个没写完是个不小的遗憾，今天正好有空，就给补充下了，也正好给我的javascript学习总结做...

LiveVideoStack 2019-08-21 10:21 评论0 收藏0