22this关键字

概述

this是什么

this文键字是Javascript中最复杂的机制之ー。它是一个很特别的关键字,被自动定义在所有函数的作用域中。但是即使是非常有经验的 Javascript开发者也很难说清它到底指向什么。

实际上, Javascript中this的机制井没有那么先进,但是开发者往往会把理解过程复杂化。亳不夸张地说,不理解它的含义,大部分开发任务都无法完成。

this都有一个共同点,它总是返回一个对象。简单说,this就是属性或方法“当前”所在的对象。

为什么使用this

this提供了一种更优雅的方式来隐式“传递”一个对象引用,因此可以将API设计得更加简洁井且易于复用。

随着使用模式越来越复杂,显式传递上下文对象会让代码变得越来越混乱,使用this则不会这样。

调用位置

想要了解this的绑定过程,首先要理解调用位置:调用位置就是函数在代码中被调用的位置(而不是声明的位置)

通常来说,寻找调用位置就是寻找“函数被调用的位置”。最重要的是要分析调用栈(就是为了到达当前执行位置所调用的所有函数

  1. 函数调用 var v = 100; // this 经常被定义在函数的作用域中 function fn() { // this总是要返回一个对象 console.log(this.v); //this指向哪个对象,不取决于定义的位置 } // this 指向哪个对象,取决于调用的位置 fn(); // 函数的调用 结果为:100(浏览器环境)
  1. 对象调用 var v = 100; // this 经常被定义在函数的作用域中 function fn() { // this总是要返回一个对象 console.log(this.v); //this指向哪个对象,不取决于定义的位置 } // 定义一个对象,将fn函数作为obj对象的方法 var obj = { v: 200, f: fn, }; obj.f(); //200
  1. 直接调用 var v = 100; // this 指向哪个对象,取决于调用的位置 console.log(this.v); // 100 (浏览器环境)

绑定规则

默认绑定

在一个函数体中使用this,当该函数被独立调用。可以把这条规则看作是无法应用其他规则时的默认规则。

function fn() {
  console.log(this.v); 
}
var v = 100;
fn(); //100

声明在全局作用域中的变量(比如var v=100)就是全局对象的一个同名属性。当调用fn()函数时,this.v被解析成了全局变量v

函数调用时应用了this的默认绑定,因此this指向全局对象。

隐式绑定

隐式绑定的规则需要考虑的是调用位置是否有上下文对象,或者说是否被某个对象拥有或者包含。当然,这种说法井不准确。

function fn() {
    console.log(this.v); 
}
var obj = {
    v: 200,
    f: fn,
};
obj.f(); //200

调用位置会使用obj上下文来引用函数,因此你可以说函数被调用时obj对象“拥有”或者“包含”它。

隐式丢失

隐式丢失是最常见的this绑定问题,指的就是被隐式绑定的函数会丢失绑定对象,也就是说它会应用默认绑定,从而把this绑定到全局对象。

// 定义一个全局变量
var v = 100;
// 定义一个函数
function fn() {
  console.log(this.v);
}
// 定义一个对象
var obj = {
  v: 200,
  f: fn, //对象的f()方法指向fn()函数
};
// 定义一个全局变量,并被赋值为对象obj的f()方法
var fun = obj.f;
// 将fun作为一个函数进行调用
fun(); //nodejs环境下为undefined;浏览器环境下是100

显式绑定

显式绑定就是明确在调用时,this所绑定的对象。 Javascript中提供了apply()方法和call()方法实现,这两个方法的第一个参数接收是一个对象,会把这个对象绑定到this,接着在调用函数时指定这个this。

// 定义一个全局变量
var v = 100;
// 定义一个函数
function fn() {
  console.log(this.v);
}
// 定义一个对象
var obj = {
  v: 200,
  f: fn, //对象的f()方法指向fn()函数
};
// 定义一个全局变量,并被赋值为对象obj的f()方法
var fun = obj.f;
// 将fun作为一个函数进行调用
fun.apply(obj);

new绑定

绑定例外

注意事项

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 八、jQuery的QQ音乐播放器

    自定义滚动条使用了一个jQuery插件jQuery custom content scroller。利用这个插件可以轻松设置滚动条样式。

    Dreamy.TZK
  • jQuery原理(DOM操作相关方法)

    删除所有的元素或指定元素。判断是否传入参数,如果传入参数,则删除指定元素,否则删除全部。

    Dreamy.TZK
  • Hexo博客之butterfly主题优雅魔改系列(持续更新)

    相信在这之前,大家肯定看过网上的各种魔改教程。但是这些魔改教程基本上千篇一律,都是一种方式,大量修改模板(主题源文件)。这种方式的好处就是简单快速且直接,缺点就...

    Dreamy.TZK
  • 关于 servlet 的这个问题,你能答对吗?

    今天首先来看个问题,用原生servlet实现的接口,大家看下控制台输出结果是什么?

    Java程序猿阿谷
  • JS 中 this 在各个场景下的指向

    很多时候, JS 中的 this 对于咱们的初学者很容易产生困惑不解。 this 的功能很强大,但需要一定付出才能慢慢理解它。

    前端小智@大迁世界
  • 这个问题你能答对吗?

    首先,还是给大家说声抱歉,由于微信限制,前两天抽奖的好友请求还没有全部通过验证,这两天都会通过并拉大家进抽奖群的,还请大家海涵。

    我的小碗汤
  • jsvascript—谜之this?

    版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

    空空云
  • java的this关键字理解

    1、java提供了一个this关键字,this关键字总是指向调用该方法的对象。根据this出现位置的不同,this作为对象的默认引用有两种情形。 a)、构造器中...

    别先生
  • ActiveMQ源码分析——消费消息

    请先查看上一篇分析生产消息源码的博客之后再查看本篇 先看看本博客把consumer端分析后完整的activemq流程图

    歪歪梯
  • threejs 场景切换 优化性能

    是实现2个场景的定时切换,由于是用在大屏系统,需要浏览器一直能正常运行,不能运行一段时间卡死

    tianyawhl

扫码关注云+社区

领取腾讯云代金券