资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/Javascript this 的一些学习总结01【转自cnblogs的JKhuang】

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

Thanatos / 1116人阅读

摘要：函数上下文中的值是函数调用者提供并且由当前调用表达式的形式而定的。然而，由于对于来说没有任何意义，因此会隐式转换为全局对象。这里注意到四个表达式中，只有第一个表达式是指向对象的，而其他三个表达式则执行。

摘要

相信有C++、C#或Java等编程经验的各位，对于this关键字再熟悉不过了。由于Javascript是一种面向对象的编程语言，它和C++、C#或Java一样都包含this关键字，接下来我们将向大家介绍Javascript中的this关键字。

正文

由于许多面向对象的编程语言都包含this关键字，我们会很自然地把this和面向对象的编程方式联系在一起，this通常指向利用构造器新创建出来的对象。而在ECMAScript中，this不仅仅只用来表示创建出来的对象，也是执行上下文的一个属性：

activeExecutionContext = {
  // Variable object.
  VO: {...},
  this: thisValue
};

全局代码中的this

// Global scope
// The implicit property of 
// the global object
foo1 = "abc";
alert(foo1); // abc
 
// The explicit property of 
// the global object
this.foo2 = "def";
alert(foo2); // def

// The implicit property of 
// the global object
var foo3 = "ijk";
alert(foo3); // ijk

前面我们通过显式和隐式定义了全局属性foo1、foo2和foo3，由于this在全局上下文中，所以它的值是全局对象本身（在浏览器中是window object）；接下来我们将介绍函数中的this。

函数中的this

当this在函数代码中，情况就复杂多了，并且会引发很多的问题。

函数代码中this值的第一个特性（同时也是最主要的特性）就是：它并非静态的绑定在函数上。

正如此前提到的，this的值是在进入执行上下文（Excution context）的阶段确定的，并且在函数代码中的话，其值每次都不尽相同。

然而，一旦进入执行代码阶段，其值就不能改变了。如果要想给this赋一个新的值是不可能的，因为在那时this根本就不是变量了。

接下来，我们通过具体的例子说明函数中的this。

首先我们定义两个对象foo和person，foo包含一个属性name，而person包含属性name和方法say()，具体的定义如下：

// Defines foo object.
var foo = {
    name: "Foo"
};

// Defines person object.
var person = {
    name: "JK_Rush",
    say: function() {
        alert(this === person);
        alert("My name is " + this.name);
    }
};

person.say();  // My name is JK_Rush

// foo and person object refer to 
// the same function say
foo.say = person.say;

foo.say();    // My name is Foo.

通过上面的代码，我们发现调用person的say()方法时，this指向person对象，当通过赋值方式使得foo的say()方法指向peson中的say()方法时。我们调用foo的say()方法，发现this不是指向person对象，而不是指向foo对象，这究竟是什么原因呢？

首先，我们必须知道this的值在函数中是非静态的，它的值确定在函数调用时，具体代码执行前，this的值是由激活上下文代码的调用者决定的，比如说，调用函数的外层上下文；更重要的是，this的值是由调用表达式的形式决定的，所以说this并非静态的绑定在函数上。

由于this并非静态地绑定在函数上，那么我们是否可以在函数中动态地修改this的值呢？

// Defines foo object.
var foo = {
    name: "Foo"
};

// Defines person object.
var person = {
    name: "JK_Rush",
    say: function() {
        alert(this === person);
        this = foo;  // ReferenceError
        alert("My name is " + this.name);
    }
};

person.say();  // My name is JK_Rush

现在我们在方法say()中，动态地修改this的值，当我们重新执行以上代码，发现this的值引用错误。这是由于一旦进入执行代码阶段（函数调用时，具体代码执行前），this的值就确定了，所以不能改变了。

引用类型

前面我们提到this的值是由激活上下文代码的调用者决定的，更重要的是，this的值是由调用表达式的形式决定的；那么表达式的形式是如何影响this的值呢？

首先，让我们介绍一个内部类型——引用类型，它的值可以用伪代码表示为一个拥有两个属性的对象分别是：base属性（属性所属的对象）以及该base对象中的propertyName属性：

// Reference type.
var valueOfReferenceType = {
  base: mybase,
  propertyName : "mybasepropertyName" 
};

引用类型的值只有可能是以下两种情况：

当处理一个标识符的时候

或者进行属性访问的时候

标识符其实就是变量名、函数名、函数参数名以及全局对象的未受限的属性。

// Declares varible.
var foo = 23;

// Declares a function
function say() {
    // Your code.
}

中间过程中，对应的引用类型如下：

// Reference type.
var fooReference = {
  base: global,
  propertyName: "foo"
};
 
var sayReference = {
  base: global,
  propertyName: "say"
};

我们知道Javascript中属性访问有两种方式：点符号和中括号符号：

// Invokes the say method.
foo.say();
foo["say"]();

由于say()方法是标识符，所以它对应于foo对象引用类型如下：

// Reference type.
var fooSayReference = {
  base: foo,
  propertyName: "say"
};

我们发现say()方法的base属性值为foo对象，那么它对应的this属性也将指向foo对象。

假设，我们直接调用say()方法，它对应的引用类型如下：

// Reference type.
var sayReference = {
  base: global,
  propertyName: "say"
};

由于say()方法的base属性值为global（通常来说是window object），那么它对应的this属性也将指向global。

函数上下文中this的值是函数调用者提供并且由当前调用表达式的形式而定的。如果在调用括号()的左边有引用类型的值，那么this的值就会设置为该引用类型值的base对象。 所有其他情况下（非引用类型），this的值总是null。然而，由于null对于this来说没有任何意义，因此会隐式转换为全局对象。

函数调用以及非引用类型

前面我们提到，当调用括号左侧为非引用类型的时，this的值会设置为null，并最终隐式转换为全局对象。

现在我们定义了一个匿名自执行函数，具体实现如下：

// Declares anonymous function
(function () {
  alert(this); // null => global
})();

由于括号()左边的匿名函数是非引用类型对象（它既不是标识符也不属于属性访问），因此，this的值设置为全局对象。

// Declares object.
var foo = {
  bar: function () {
    alert(this);
  }
};
 
(foo.bar)();          // foo.
(foo.bar = foo.bar)(); // global?
(false || foo.bar)();  // global?
(foo.bar, foo.bar)();  // global

这里注意到四个表达式中，只有第一个表达式this是指向foo对象的，而其他三个表达式则执行global。

现在我们又有疑问了：为什么属性访问，但是最终this的值不是引用类型对象而是全局对象呢？

我们注意到表达式二是赋值（assignment operator），与表达式一组操作符不同的是，它会触发调用GetValue方法（参见11.13.1中的第三步）。 最后返回的时候就是一个函数对象了（而不是引用类型的值了），这就意味着this的值会设置为null，最终会变成全局对象。

第三和第四种情况也是类似的——逗号操作符和OR逻辑表达式都会触发调用GetValue方法，于是相应地就会丢失原先的引用类型值，变成了函数类型，this的值就变成了全局对象了。

海外云主机 GPU服务器 vps日常维护中的一些要点总结 javascript的this 深度学习的一些应用 javascript学习总结

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

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

相关文章

  • Javascript Context和Scope的学习总结02【转自cnblogs的JKhuang】

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

    Aldous 评论0 收藏0

  • Javascript Context和Scope的学习总结01【转自cnblogs的JKhuang】

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

    April 评论0 收藏0

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

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

    suemi 评论0 收藏0

  • 谈谈javascript插件的写法

    插件顾名思义就是能在一个页面多处使用, 各自按自己的参数配置运行, 并且相互不会冲突.会写javascript插件是进阶js高级的必经之路, 也是自己所学知识的一个典型的综合运用. 如果你还没头绪, 无从下手的话, 不用着急, 今天我们就一起来探讨一下插件的一般写法.所需技能： 1.面向对象用法 2.闭包的理解 3.变量作用域的理解 以一个tab选项卡的为例: 第一步: 我们需要写html结...

    lakeside 评论0 收藏0

  • 深入理解JavaScript系列3:全面解析Module模式

    摘要：总结上面的大部分方式都可以互相组合使用的，一般来说如果要设计系统，可能会用到松耦合扩展，私有状态和子模块这样的方式。 简介 Module模式是JavaScript编程中一个非常通用的模式，一般情况下，大家都知道基本用法，本文尝试着给大家更多该模式的高级使用方式。 首先我们来看看Module模式的基本特征： 模块化，可重用 封装了变量和function，和全局的namaspace不接触...

    付伦 评论0 收藏0

发表评论

登陆后可评论

0条评论

Thanatos

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<