iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >如何理解JavaScript中的this
  • 692
分享到

如何理解JavaScript中的this

2024-04-02 19:04:59 692人浏览 薄情痞子
摘要

今天就跟大家聊聊有关如何理解javascript中的this,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。 JavaSc

今天就跟大家聊聊有关如何理解javascript中的this,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

this是什么?

指向函数本身?

光从字面意思上来看,很容易让人觉得this就是指向函数本身,事实上真是这样吗?我们可以看一个例子。

function foo() {
    this.count = this.count ? this.count + 1 : 1;
}

for (let i = 0; i < 5; i++) {
    foo();
}
console.log(foo.count); // undefined

可以看到,foo.count输出的并不是我们期待的5,而是一开始赋值的0。也就是说this其实并没有指向函数本身

指向作用域?

还有一种比较常见的误解是,this指向了函数的作用域。

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

foo(); // undefined

这段代码中,bar在foo中运行,输出this.a得到的却是undefined。也就是说this也不是指向函数的作用域的

这也不是,那也不是,this到底是什么呢?在函数执行过程中,会创建一个执行上下文(一个记录),this就是这个上下文中的一个属性,在执行过程中用到。而this的指向则是取决于函数在哪里被调用。

this的绑定规则

this的绑定有四条可以遵循的规则,下面将一一介绍。

1.默认绑定

独立函数调用,非严格模式下,指向window;严格模式下指向undefined。 这里说的独立函数可以理解成除开后面三种情况的一般函数调用。

// 非严格模式
var name = 'Willem';
function foo() {
    console.log(this.name);
}
foo(); // Willem

// 执行时启用严格模式
(function() {
    'use strict';
    foo(); // Willem
    bar(); // Cannot read property 'name' of undefined
})();

// 函数体使用严格模式
function bar() {
    'use strict';
    console.log(this.name);
}

上述代码中,分别在普通环境中输出Willem,说明指向的确实是window对象。需要特别注意的一点是:严格模式下指向undefined指的是函数体内启用了严格模式,而不是调用时。

2. 隐式绑定

隐式绑定说的是,在函数执行时,是否被某个对象拥有或包含。换句话说,在函数运行时,是否是作为某个对象的属性的方式运行的,这样说还是不是很清楚,来个栗子:

function foo() {
    console.log(this.a);
}
var a = 1;
var obj = {
    a: 2,
    foo
};
obj.foo(); // 2
var obj2 = {
    a: 3,
    obj
};
obj2.obj.foo(); // 2

示例中,foo被当做了obj的一个属性进行执行,此时obj作为了函数的上下文,此时this指向了obj,this.a等价于obj.a。在对象属性链式的调用中,只有最后一层会对调用位置产生影响,也就是说最后一层会影响this指向。

有很多前端的小伙伴面试时或许还见过这样的题:

function foo() {
    console.log(this.a);
}
var a = 1;
var obj = {
    a: 2,
    foo
};
var bar = obj.foo;
bar(); // 1

这是隐式绑定最常见的一个问题,隐式丢失:被隐式绑定的函数会丢失绑定对象。虽然bar是对obj.foo的一个引用,但实际上引用的还是foo函数本身,bar函数就是一个独立函数的调用,参考第一条,此时this指向了window|undefined

还有一种经典的回调函数的this指向问题也是隐式丢失。

function foo() {
    console.log(this.a);
}
function doFoo(fn) {
    fn();
}
var a = 1;
var obj = {
    a: 2,
    foo
};
doFoo(obj.foo); // 1

小结:在隐式绑定中,赋值的情况下(回调是隐式赋值)需要特别注意隐式丢失的问题 。

3. 显示绑定

JavaScript中的Function提供了两个方法callapply,传入的第一个参数是一个对象,会把this绑定到这个对象。如果是传入的是一个原始值(字符串、数字、布尔),会被转换成它的对象形式(new String(), new Boolean(), new Number())。

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

虽然我们可以使用callapply显式指定this的指向,但是还是会存在丢失绑定的问题。可以通过所谓的硬绑定(bind函数)来解决,这里就不过多赘述了。

4. new

最后要介绍的是使用new来做this的绑定的修改,有手动实现过new的童鞋应该比较清楚,js中的new和其他语言的new完全不同。
new的执行过程:

  1. 创建一个空对象

  2. 当前空对象执行原型对接

  3. 返回函数执行结果或者当前这个空对象

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

var bar = new Foo(2);
bar.a; // 2

使用 new 来调用函数时,我们会构造一个新对象并把它绑定到 函数调用中的 this上。

优先级

最后简单说一下优先级的关系:new > 显示绑定 > 隐式绑定 > 默认绑定。

看完上述内容,你们对如何理解JavaScript中的this有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注编程网node.js频道,感谢大家的支持。

--结束END--

本文标题: 如何理解JavaScript中的this

本文链接: https://www.lsjlt.com/news/81902.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何理解JavaScript中的this
    今天就跟大家聊聊有关如何理解JavaScript中的this,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。 JavaSc...
    99+
    2024-04-02
  • JavaScript中如何深入理解this
    JavaScript中如何深入理解this,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。定义this是函数运行时自动生成的内部对象,即调用函数...
    99+
    2024-04-02
  • JavaScript中如何使用this
    这篇文章主要介绍JavaScript中如何使用this,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!本文我们介绍下js中this的用法。由上图可得,默认this指向window,而在...
    99+
    2024-04-02
  • 怎么理解并掌握JavaScript中的this
    这篇文章主要介绍“怎么理解并掌握JavaScript中的this”,在日常操作中,相信很多人在怎么理解并掌握JavaScript中的this问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望...
    99+
    2024-04-02
  • 如何理解JavaScript函数this指向问题
    这篇文章给大家介绍如何理解JavaScript函数this指向问题,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。一、 函数内 this 的指向这些 this的指向,是当调用函数的时候确定的。 调用方式的不同决...
    99+
    2023-06-21
  • JavaScript中的this工作原理
    这篇文章主要介绍“JavaScript中的this工作原理”,在日常操作中,相信很多人在JavaScript中的this工作原理问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”...
    99+
    2024-04-02
  • javascript的this指向怎么理解
    本文小编为大家详细介绍“javascript的this指向怎么理解”,内容详细,步骤清晰,细节处理妥当,希望这篇“javascript的this指向怎么理解”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深...
    99+
    2024-04-02
  • JavaScript中this的原理是什么
    本篇文章为大家展示了JavaScript中this的原理是什么,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。 一、this原理this是JavaScrip...
    99+
    2024-04-02
  • JavaScript中this指向问题怎么理解
    这篇文章主要介绍“JavaScript中this指向问题怎么理解”,在日常操作中,相信很多人在JavaScript中this指向问题怎么理解问题上存在疑惑,小编查阅了各式资料,...
    99+
    2024-04-02
  • JavaScript中this指针指向怎么理解
    这篇“JavaScript中this指针指向怎么理解”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“JavaScript中th...
    99+
    2023-07-04
  • JavaScript this绑定与this指向问题如何解决
    本篇内容主要讲解“JavaScript this绑定与this指向问题如何解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript this绑定与this指向问...
    99+
    2023-07-05
  • Javascript如何使用this
    这篇文章给大家分享的是有关Javascript如何使用this的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。this是Javascript语言的一个关键字。它代表函数运行时,自动...
    99+
    2024-04-02
  • 详解JavaScript中的this硬绑定
    目录一、this显示绑定二、硬绑定一、this显示绑定 this显示绑定,顾名思义,它有别于this的隐式绑定,而隐式绑定必须要求一个对象内部包含一个指向某个函数的属性(或者某个对象...
    99+
    2024-04-02
  • JavaScript中this对象如何使用
    这篇文章给大家介绍JavaScript中this对象如何使用,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。this对象是在函数运行时,基于函数的执行环境绑定的。其实这句话的本质就是,谁...
    99+
    2024-04-02
  • 怎么理解并掌握JavaScript中的this关键字
    这篇文章主要讲解了“怎么理解并掌握JavaScript中的this关键字”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么理解并掌握JavaScript中的...
    99+
    2024-04-02
  • 如何理解JavaScript中的Generators
    如何理解JavaScript中的Generators,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。 JavaS...
    99+
    2024-04-02
  • 如何理解JavaScript中的jQuery
    这篇文章给大家介绍如何理解JavaScript中的jQuery,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。元素操作· 创建一个元素var div =&n...
    99+
    2024-04-02
  • 如何理解JavaScript中的CSP
    如何理解JavaScript中的CSP,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。Communicating Sequential Pr...
    99+
    2024-04-02
  • 如何理解javascript中的window.$
    本篇文章为大家展示了如何理解javascript中的window.$,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。javascript...
    99+
    2024-04-02
  • 如何理解JavaScript中的Promise
    如何理解JavaScript中的Promise,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。pr...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作