理解 JavaScript 中的 this

前言

理解this是我们要深入理解 JavaScript 中必不可少的一个步骤,同时只有理解了 this,你才能更加清晰地写出与自己预期一致的 JavaScript 代码。

本文是这系列的第三篇,往期文章:

  1. 理解 JavaScript 中的作用域
  2. 理解 JavaScript 中的闭包

什么是 this

消除误解

在解释什么是this之前,需要先纠正大部分人对this的误解,常见的误解有:

  1. 指向函数自身。
  2. 指向它所在的作用域。

关于为何会误解的原因这里不多讲,这里只给出结论,有兴趣可以自行查询资料。

this 在任何情况下都不指向函数的词法作用域。你不能使用 this 来引用一个词法作用域内部的东西。

this 到底是什么

排除了一些错误理解之后,我们来看看 this到底是一种什么样的机制。

this是在运行时(runtime)进行绑定的,而不是在编写时绑定的,它的上下文(对象)取决于函数调用时的各种条件。this的绑定和函数声明的位置没有任何关系,只取决于函数的调用方式

当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在函数执行的过程中用到。( PS:所以this并不等价于执行上下文)

this 全面解析

前面 我们排除了一些对于 this的错误理解并且明白了每个函数的this是在调用时被绑定的,完全取决于函数的调用位置。

调用位置

通常来说,寻找调用位置就是寻找“函数被调用的位置“,其中最重要的是要分析调用栈(就是为了到达当前执行位置所调用的所有函数)。我们关心的调用位置就在当前正在执行的函数的前一个调用中。

下面我们来看看到底什么是调用栈和调用位置:

function foo(){
    // 当前调用栈是:foo
    // 因此,当前调用位置是全局作用域
    console.log("foo");
    bar(); // <-- bar 的调用位置
}
function bar(){
    // 当前调用栈是 foo -> bar
    console.log("bar");
}
foo(); // <-- foo 的调用位置

你可以把调用栈想象成一个函数调用链, 就像我们在前面代码段的注释中所写的一样。但是这种方法非常麻烦并且容易出错。 另一个查看调用栈的方法是使用浏览器的调试工具。 绝大多数现代桌面浏览器都内置了开发者工具,其中包含 JavaScript 调试器。

绑定规则

在找到调用位置后,则需要判定代码属于下面四种绑定规则中的哪一种,然后才能对this进行绑定。 注意: this绑定的是上下文对象,并不是函数自身也不是函数的词法作用域

默认绑定

这是最常见的函数调用类型:独立函数调用

对函数直接使用而不带任何修饰的函数引用进行调用,简单点一个函数直接是func()这样调用,不同于通过对象属性调用例如obj.func(),也没有通过 new 关键字new Function(),也没有通过applycallbind强制改变this指向。

当被用作独立函数调用时(不论这个函数在哪被调用,不管全局还是其他函数内),this默认指向到Window。(注意:在严格模式下this不再默认指向全局,而是undefined)。

示例代码:

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

隐式绑定

函数被某个对象拥有或者包含,也就是函数被作为对象的属性所引用,例如obj.func(),此时this会绑定到该对象上,这就是隐式绑定。

示例代码:

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

隐式丢失

大部分的this绑定问题就是被“隐式绑定”的函数会丢失绑定对象,也就是说它会应用“默认绑定”,从而把this绑定到Windowundefined上,这取决于是否是严格模式。

最常见的情况就是把对象方法作为回调函数进行传递时:

var obj = {
    name : "obj",
    foo : function(){
        console.log(this.name);
    }
}
var name = "window";
setTimeout(obj.foo,1000); // 一秒后输出 window

显式绑定

我们可以通过applycallbind方法来显示地修改this的指向。

关于这三个方法的定义(它们第一个参数都是接受this的绑定对象):

  1. apply:调用函数,第二个参数传入一个参数数组。
  2. call:调用函数,其余参数正常传递。
  3. bind:返回一个已经绑定this的函数,其余参数正常传递。

比如我们可以使用bind方法解决上一节“隐式丢失”中的例子:

var obj = {
    name : "obj",
    foo : function(){
        console.log(this.name);
    }
}
var name = "window";
setTimeout(obj.foo.bind(obj),1000); // 一秒后输出 obj

new 绑定

使用 new 来调用函数,或者说发生构造函数调用时,会自动执行下面的操作:

  1. 创建(或者说构造)一个全新的对象。
  2. 这个新对象会被执行[[原型]]连接。
  3. 这个新对象会绑定到函数调用的this
  4. 如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象。

示例代码:

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

优先级

直接上结论:

new 绑定=显示绑定>隐式绑定>默认绑定

判断 this: 现在我们可以根据优先级来判断函数在某个调用位置应用的是哪条规则。可以按照下面的顺序来进行判断:

  1. 使用 new 绑定,this绑定的是新创建的对象。

    var bar = new foo();
    
  2. 通过call之类的显式绑定,this绑定的是指定的对象。
    var bar = foo.call(obj2);
    
  3. 在某个上下文对象中调用(隐式绑定),this 绑定的是那个上下文对象。
    var bar = obj1.foo();
    
  4. 如果都不是的话,使用默认绑定。this绑定到Windowundefined上,这取决于是否是严格模式。
    var bar = foo();
    

    对于正常的函数调用来说,理解了这些知识你就可以明白 this 的绑定原理了。

this 词法

ES6 中介绍了一种无法使用上面四条规则的特殊函数类型:箭头函数

箭头函数不使用 this 的四种标准规则,而是根据外层(函数或者全局)作用域来决定 this。(而传统的 this 与函数作用域没有任何关系,它只与调用位置的上下文对象有关)。

重要:

  • 箭头函数最常用于回调函数中,例如事件处理器或者定时器.
  • 箭头函数可以像bind 一样确保函数的this被绑定到指定对象
  • 箭头函数用更常见的词法作用域取代了传统的this机制。

示例代码:

var obj = {
    name : "obj",
    foo : function(){
        setTimeout(()=>{
            console.log(console.log(this.name)); // obj
        },1000);
    }
}
obj.foo();

这在 ES6 之前是这样解决的:

var obj = {
    name : "obj",
    foo : function(){
        var self = this;
        setTimeout(function(){
            console.log(console.log(self.name)); // obj
        },1000);
    }
}
obj.foo();

总结

总之如果要判断一个运行中函数的this绑定,就需要找到这个函数的直接调用位置。找到之后就可以顺序应用下面这四条规则来判断this的绑定对象。

  1. 由 new 调用?绑定到新创建的对象。
  2. 由 call 或者 apply(或者 bind)调用?绑定到指定的对象。
  3. 由上下文对象调用?绑定到那个上下文对象。
  4. 默认:在严格模式下绑定到undefined,否则绑定到全局对象。

ES6 中的箭头函数并不会使用四条标准的绑定规则,而是根据当前的词法作用域来决定 this,具体来说,箭头函数会继承外层函数调用的 this绑定(无论 this绑定到什么)。这其实和 ES6 之前代码中的 self = this 机制一样。

(转载于:https://www.v2ex.com/t/529532#reply1)

原文地址:https://www.cnblogs.com/MisterZZL/p/10416069.html

时间: 2025-01-05 00:48:23

理解 JavaScript 中的 this的相关文章

深入理解JavaScript中创建对象模式的演变(原型)

创建对象的模式多种多样,但是各种模式又有怎样的利弊呢?有没有一种最为完美的模式呢?下面我将就以下几个方面来分析创建对象的几种模式: Object构造函数和对象字面量方法 工厂模式 自定义构造函数模式 原型模式 组合使用自定义构造函数模式和原型模式 动态原型模式.寄生构造函数模式.稳妥构造函数模式 第一部分:Object构造函数和对象字面量方法 我之前在博文<javascript中对象字面量的理解>中讲到过这两种方法,如何大家不熟悉,可以点进去看一看回顾一下.它们的优点是用来创建单个的对象非常方

深入理解JavaScript中的属性和特性

深入理解JavaScript中的属性和特性? JavaScript中属性和特性是完全不同的两个概念,这里我将根据自己所学,来深入理解JavaScript中的属性和特性. 主要内容如下: 理解JavaScript中理解对象的本质.理解对象与类的关系.对象与引用类型的关系 对象属性如何进行分类 属性中特性的理解 第一部分:理解JavaScript中理解对象的本质.理解对象与类的关系.对象与引用类型的关系 对象的本质:ECMA-262把对象定义为:无序属性的集合,其属性可以包含基本值.对象或者函数.即

【干货理解】理解javascript中实现MVC的原理

理解javascript中的MVC MVC模式是软件工程中一种软件架构模式,一般把软件模式分为三部分,模型(Model)+视图(View)+控制器(Controller); 模型:模型用于封装与应用程序的业务逻辑相关的数据以及对数据处理的方法.模型有对数据直接访问的权利.模型不依赖 "视图" 和 "控制器", 也就是说 模型它不关心页面如何显示及如何被操作. 视图:视图层最主要的是监听模型层上的数据改变,并且实时的更新html页面.当然也包括一些事件的注册或者aja

JavaScript大杂烩6 - 理解JavaScript中的this

在JavaScript开发中,this是很常用的一个关键字,但同时也是一个很容易引入bug的一个关键字,在这里我们就专门总结一下页面中可能出现的this关键字(包括几种在其他页面文件中出现的this). JavaScript中的this关键字通常只使用在函数中,它指向当前函数的调用者,这是this关键字的本质,所有的使用方式都是围绕这个展开的,让我们来看一下在各种性质的函数中this的用法.1. 在对象的函数中使用this var person = { name: 'Frank', say: f

全面理解Javascript中Promise

全面理解Javascript中Promise 最近在学习Promise的时候,在网上收集了一些资料,发现很多的知识点不够系统,所以小编特意为大家整理了一些自认为 比较好的文章,供大家更好地学习js中非常有趣的Promise Promise概念 2015 年 6 月,ECMAScript 6 的正式版 终于发布了. ECMAScript 是 JavaScript 语言的国际标准,javascript 是 ECMAScript 的实现.ES6 的目标,是使得 JavaScript 语言可以用来编写大

转载 深入理解JavaScript中的this关键字

转载原地址: http://www.cnblogs.com/rainman/archive/2009/05/03/1448392.html 深入理解JavaScript中的this关键字 1. 一般用处 2. this.x 与 apply().call() 3. 无意义(诡异)的this用处 4. 事件监听函数中的this 5. 总结 在JavaScript中this变量是一个令人难以摸清的关键字,this可谓是非常强大,充分了解this的相关知识有助于我们在编写面向对象的JavaScript程

js架构设计模式——理解javascript中的MVVM开发模式

理解javascript中的MVVM开发模式 http://blog.csdn.net/slalx/article/details/7856769 MVVM的全称是Model View ViewModel,这种架构模式最初是由微软的MartinFowler作为微软软件的展现层设计模式的规范提出,它是MVC模式的衍生物,MVVM模式的关注点在能够支持事件驱动的UI开发平台,例如HTML5,[2][3] WindowsPresentation Foundation (WPF), Silverligh

理解javascript中的回调函数(callback)【转】

在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String.Array.Number.Object类的对象一样用于内置对象的管理.因为function实际上是一种对象,它可以"存储在变量中,通过参数传递给(别一个)函数(function),在函数内部创建,从函数中返回结果值". 因为function是内置对象,我们可以将它作为参数传递给另一个函数,延迟到函数中执行,甚至执行后将它返回.这是在JavaScript中使用回调函数的精髓.本篇文

深入理解javascript中的立即执行函数(function(){…})()

这篇文章主要介绍了深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是用(function(){-})()包住业务代码,使用jquery时比较常见,需要的朋友可以参考下http://www.jb51.net/article/50967.htm javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解. ( function()

深入理解javascript 中的 delete(转)

在这篇文章中作者从<JavaScript面向对象编程指南>一书中关于 delete 的错误讲起,详细讲述了关于 delete 操作的实现, 局限以及在不同浏览器和插件(这里指 firebug)中的表现. 下面翻译其中的主要部分. ...书中声称 “函数就像一个普通的变量那样——可以拷贝到不同变量,甚至被删除” 并附上了下面的代码片段作为说明: >>> var sum = function(a, b) {return a+b;}; >>> var add =