你可能不知道的JavaScript之this指向详解

目录
  • 前言
  • 默认绑定,全局对象
  • 点石成金,隐式绑定
  • 隐式绑定丢失
  • 指腹为婚,显式绑定
  • 内有乾坤,new 绑定
  • 军令如山,箭头函数
  • this 绑定优先级
  • 总结
  • 相关文献
  • 引用链接

前言

JavaScript 对 this 指向 话题 的理解是永不过时的,鉴于 JavaScript 中 this 风骚的运作方式,本文将试图将其拆解分析,烹饪再食用~。

this is all about context.,大概意思就是:this 与当前执行上下文相关。

this 说白了就是找离自己最近的对象,即拥有当前上下文(context)的对象(context object)。

换句话说,this 与函数被调用时,调用函数的对象有关。

默认绑定,全局对象

正所谓近水楼台先得月,全局对象作为对遥远的对象是作为备胎的存在,为语言边界护城河做兜底。

一般情况下,this 指向全局对象则属于默认绑定。那么什么是默认绑定呢?

this 默认绑定,通俗地可理解为函数被调用时无任何调用前缀对象的情景,由于函数调用时无调用前缀对象或函数无特定绑定,所以非严格模式下此时 this 会指向全局对象。

在非严格模式下,不同终端的全局变量对象有所区别:

• 在浏览器端,this 指向 Window 对象;

• 在 Nodejs 环境,this 指向 global 对象;

• 在函数环境,this 指向 绑定当前函数的作用域;

在严格模式下:

• 在 use strict 环境, this 指向 undefined;

在非严格模式下

{
  /* 在非严格模式下,this默认绑定 */
  console.log('window global this: ', this); // window
  function fnOuter() {
    console.log('fnOuter: ', this); // window
  }
  function windowThis() {
    console.log('windowThis: ', this); // window
    function fnInner() {
      console.log('fnInner: ', this); // window
      fnOuter();
    }
    fnInner();
  }
  windowThis();
}

上述栗子中,无论函数声明在哪,在哪调用,由于函数调用时前面并未指定任何对象,这种情况下 this 均指向全局对象 window。

但须注意的是,在严格模式下,默认绑定下的 this 会指向 undefined。

在严格模式下,再来看几个栗子,然后在心中记下答案

{
  /* 在非严格模式下,this默认绑定 */
  var mode = '在非严格模式下,this默认绑定';
  function windowThis() {
    console.log('windowThis: ', this);
    console.log('windowThis: ', this.mode);
    function fnInner() {
      console.log('fnInner: ', this);
      console.log('fnInner: ', this.mode);
    }
    fnInner();
  }

  function windowStrictThis() {
    'use strict';
    windowThis();

    function fnInner() {
      console.log('windowStrictThis: ', this);
      console.log('windowStrictThis: ', this.mode);
    }
    fnInner();
  }
  windowStrictThis();
}

建议得出答案再看下文,

一起来倒数吧,“花栗鼠。。。。。。”。

时间: 2022-05-08

js中的this的指向问题详解

this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象 this永远指向的是最后调用它的对象,也就是看它执行的时候是谁调用的 普通函数中的this指向: 情况1:如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window,这里需要说明的是在js的严格版中this指向的不是window,但是我们这里不探讨严格版的问题,你想了解可以自行上网查找. 情况2:如果一个函数中有this,这个函

JavaScript 嵌套函数指向this对象错误的解决方法

先看一段嵌套了两层function的JavaScript代码: 复制代码 代码如下: var me = { name : 'Jimbor', blog : 'http://jmedia.cn/', sayMyName : function(){ var pre = 'My name is: '; function displayName(){ alert(pre + this.name); } displayName(); } } me.sayMyName(); 从代码上看,我们希望通过sayM

关于JavaScript中的this指向问题总结篇

在javascript中this的指向一直是前端同事的心头病,也同时是各面试题的首选,现在我们就来总结一下js中this的指向.首先需要了解一下几个概念: 1:全局变量默认挂载在window对象下 2:一般情况下this指向它的调用者 3:es6的箭头函数中,this指向创建者,并非调用者 4:通过call.apply.bind可以改改变this的指向 下面我们具体分析一下 1:在函数调用时 (非严格模式) const func = function () { console.log(this)

JS中改变this指向的方法(call和apply、bind)

this是javascript的一个关键字,随着函数使用场合不同,this的值会发生变化.但是总有一个原则,那就是this指的是调用函数的那个对象. this一般指向的是当前被调用者,但也可以通过其它方式来改变它的指向,下面将介绍三种方式: 1.call用作继承时: function Parent(age){ this.name=['mike','jack','smith']; this.age=age; } function Child(age){ Parent.call(this,age);

JS匿名函数内部this指向问题详析

前言 网上看到一句话,匿名函数的执行是具有全局性的,那怎么具有的全局性呢? this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象 1.案例中,第一个say打出来的是Alan,而第二个则是window var name = 'window' var person = { name :'Alan', sayOne:function () { console.log(this.name) }, sayTwo:functi

改变javascript函数内部this指针指向的三种方法

在查了大量的资料后,我总结了下面的三条规则,这三条规则,已经可以解决目前我所遇到的所有问题.规则0:函数本身是一个特殊类型,大多数时候,可以认为是一个变量. 复制代码 代码如下: function a() { alert(this); } 或者 var a = function() { alert(this); } 都可以认为是创建了一个变量,这个变量的值就是一个函数. 规则1:如果一个函数,是某个对象的key 值,那么,this就指向这个对象. 这个规则很好理解: 复制代码 代码如下: var

js中this的指向问题归纳总结

前言 js中this指向问题是个老生常谈的问题了,下面这篇文章再来给大家介绍下,大家可以看看,更深入的了解了解,下面话不多说了,来一起看看详细的介绍吧 this this:上下文,会根据执行环境变化而发生指向的改变. 1.单独的this,指向的是window这个对象 alert(this); // this -> window 2.全局函数中的this function demo() { alert(this); // this -> window } demo(); 在严格模式下,this是

老生常谈 js中this的指向

在js中this的指向对于新手来说一定是个难题,但是如果你真正理解了的话,也就没什么问题啦,下面就来讲讲this吧. JS中,this的值取决于调用的模式(调用对象),而JS中共有4种调用模式: 1.函数调用模式 当一个函数不是一个对象的属性时,当作函数俩调用,这时函数内的this指向全局对象(大对数情况下是window) window.value=1; function getValue(){ console.log(this.value); } getValue();//输出1,此时的thi

JavaScript严格模式下关于this的几种指向详解

前言 相信不少人在学习或者使用Javascript的时候,都曾经被 JavaScript 中的 this 弄晕了,那么本文就来整理总结一下在严格模式下 this 的几种指向. 一.全局作用域中的this 在严格模式下,在全局作用域中,this指向window对象 "use strict"; console.log("严格模式"); console.log("在全局作用域中的this"); console.log("this.docume

详解JavaScript中关于this指向的4种情况

对很多前端开发者来说,JavaScript语言的this指向是一个令人头疼的问题.先看下面这道测试题,如果你能实现并解释原因,那本文对你来说价值不大,可以直接略过. **开篇测试题:**尝试实现注释部分的Javascript代码,可在其他任何地方添加更多代码(如不能实现,说明一下不能实现的原因): let Obj = function (msg) { this.msg = msg this.shout = function () { alert(this.msg) } this.waitAndS

详解JavaScript中this的指向问题

this是面向对象语言中一个重要的关键字,理解并掌握该关键字的使用对于我们代码的健壮性及优美性至关重要.而javascript的this又有区别于Java.C#等纯面向对象的语言,这使得this更加扑朔迷离,让人迷惑. this使用到的情况: 1. 纯函数 2. 对象方法调用 3. 使用new调用构造函数 4. 内部函数 5. 使用call / apply 6.事件绑定 1. 纯函数 var name = 'this is window'; //定义window的name属性 function

详解Javascript中prototype属性(推荐)

在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不是基于'类的',而是通过构造函数(constructor)和原型链(prototype chains)实现的.但是在ES6中提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类.基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能

详解Javascript 中的 class、构造函数、工厂函数

到了ES6时代,我们创建对象的手段又增加了,在不同的场景下我们可以选择不同的方法来建立.现在就主要有三种方法来构建对象,class关键字,构造函数,工厂函数.他们都是创建对象的手段,但是却又有不同的地方,平时开发时,也需要针对这不同来选择. 首先我们来看一下,这三种方法是怎样的 // class 关键字,ES6新特性 class ClassCar { drive () { console.log('Vroom!'); } } const car1 = new ClassCar(); consol

详解JavaScript中的4种类型识别方法

具体内容如下: 1.typeof [输出]首字母小写的字符串形式 [功能] [a]可以识别标准类型(将Null识别为object) [b]不能识别具体的对象类型(Function除外) [实例] console.log(typeof "jerry");//"string" console.log(typeof 12);//"number" console.log(typeof true);//"boolean" console

详解JavaScript 中getElementsByName在IE中的注意事项

详解JavaScript 中getElementsByName在IE中的注意事项 前言: 在IE5-9中是没有实现js的 getElementsByClassName()方法,但是实现了getElementsByName()方法,但是需要注意的是这个方法在IE5-9中也返回id属性匹配的指定元素,为了兼容,应该小心谨慎使用,不要将同样的字符串同时用作了名字和ID. 测试程序如下: <div id="log"> <div id="innerLog"&

详解JavaScript中的Object.is()与&quot;===&quot;运算符总结

三重相等运算符 === 严格检查2个值是否相同: 1 === 1; // => true 1 === '1'; // => false 1 === true; // => false 但是,ES2015规范引入了 Object.is(),其行为与严格的相等运算符几乎相同: Object.is(1, 1); // => true Object.is(1, '1'); // => false Object.is(1, true); // => false 主要问题是:什么时

详解Java中数组判断元素存在几种方式比较

1. 通过将数组转换成List,然后使用List中的contains进行判断其是否存在 public static boolean useList(String[] arr,String containValue){ return Arrays.asList(arr).contains(containValue); } 需要注意的是Arrays.asList这个方法中转换的List并不是java.util.ArrayList而是java.util.Arrays.ArrayList,其中java.

详解spring中aop不生效的几种解决办法

先看下这个问题的背景:假设有一个spring应用,开发人员希望自定义一个注解@Log,可以加到指定的方法上,实现自动记录日志(入参.出参.响应耗时这些) package com.cnblogs.yjmyzz.springbootdemo.aspect; import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy

详解Javascript中new()到底做了些什么?

前言 和其他高级语言一样 javascript 中也有 new 运算符,我们知道 new 运算符是用来实例化一个类,从而在内存中分配一个实例对象. 但在 javascript 中,万物皆对象,为什么还要通过 new 来产生对象? 本文将带你一起来探索 javascript 中 new 的奥秘... 要创建 Person 的新实例,必须使用 new 操作符. 以这种方式调用构造函数实际上会经历以下 4个步骤: (1) 创建一个新对象: (2) 将构造函数的作用域赋给新对象(因此 this 就指向了