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

2024-09-27 18:51:59

对很多前端开发者来说，JavaScript语言的this指向是一个令人头疼的问题。先看下面这道测试题，如果你能实现并解释原因，那本文对你来说价值不大，可以直接略过。

**开篇测试题：**尝试实现注释部分的Javascript代码，可在其他任何地方添加更多代码（如不能实现，说明一下不能实现的原因）：

let Obj = function (msg) {
  this.msg = msg
  this.shout = function () {
   alert(this.msg)
  }
  this.waitAndShout = function () {
   // 隔5秒后执行上面的shout方面
   setTimeout(function () {
    let self = this
    return function () {
     self.shout()
    }
   }.call(this), 5000)
  }
 }

题目的参考答案在文末，但我不建议你直接查看答案，而是先阅读并思考文章的中的知识点。

一、在对象属性中的this指向问题

对象的属性是函数，那么函数中的this指向的是对象本身，即例子中的obj

 var obj = {
  x: 123,
  fn: function () {
   console.log(this) // {x: 123, fn: ƒ}
   console.log(this.x) // 123
  }
 }
 obj.fn()

对象的属性是函数，函数内部还有函数，那么这个二级（及以上）函数的this指向的是window

var obj = {
  x: 456,
  fn: function () {
   console.log('fn', this) // {x: 456, fn: ƒ}
   var f1 = function () {
    console.log('fn.f1', this) // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
    console.log(this.x) // undefined
    var f2 = function () {
     console.log('fn.f2', this) // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
    }
    f2()
   }
   f1()
  }
 }
 obj.fn()

从上面的例子，我们可以总结出，对象属性中，嵌套超过一级及以上的函数，this指向都是window

二、构造函数中的this指向问题

构造函数中的一级函数，this指向通过构造函数new出来的实例（例子中的person）

 var Person = function () {
  this.name = 'linlif'
  this.fn = function () {
   console.log('fn', this) // {name: "linlif", fn: ƒ}
  }
 }
 var person = new Person()
 person.fn()

构造函数中的二级(及以上)函数，this指向的是window

var Person = function () {
  this.name = 'linlif'
  this.fn = function () {
   console.log('fn', this) // {name: "linlif", fn: ƒ}
   var f2 = function () {
    console.log('f2', this) // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
    var f3 = function () {
     console.log('f3', this) // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
    }
    f3()
   }
   f2()
  }
 }
 var person = new Person()
 person.fn()

从上面的例子，我们可以总结出，构造函数中，嵌套超过一级及以上的函数，this指向的都是window

三、全局上下文环境中this指向问题

全局上下文环境，this指向浏览器的window对象，例如：

 // 全局的this
 console.log(this) // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
 console.log(this === window) // true

 // 全局的普通函数
 var global = function () {
  console.log(this) // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
 }
 global()

四、call()和apply()对this指向的影响

使用call()方法后，this指向call()方法的参数。使用apply()的结果和call()是一致的，这里不做赘述。关于call()和apply()用法的区别，请自行查询相关资料。

// 改变调用对象为gObj
 var gObj = {
  name: 'gName'
 }
 var aaa = function () {
  console.log(this) // {name: "gName"}
  console.log(this.name) // gName
 }
 aaa.call(gObj)

 // 改变调用对象为window
 var name = 'global'
 var bbb = function () {
  console.log(this) // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
  console.log(this.name) // global
 }
 bbb.call(this)

总结：这就是一些关于this的指向问题的个人理解了，如果发现不妥之处，欢迎在评论区指出，或者私信我。

彩蛋开篇测试题的参考答案，仅供参考！（有意思的地方：题目中，函数名的第一个字母大写，已经暗示这是一个构造函数）

let Obj = function (msg) {
  this.msg = msg
  this.shout = function () {
   alert(this.msg)
  }
  this.waitAndShout = function () {
   // 隔5秒后执行上面的shout方面
   setTimeout(function () {
    let self = this
    return function () {
     self.shout()
    }
   }.call(this), 5000)
  }
 }

 let obj = new Obj('msg')
 obj.waitAndShout()

以上所述是小编给大家介绍的JavaScript中关于this指向的4种情况详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

浅谈JS中this在各个场景下的指向

为了保证的可读性,本文采用意译而非直译. 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你! 1. this 的奥秘很多时候, JS 中的 this 对于咱们的初学者很容易产生困惑不解. this 的功能很强大,但需要一定付出才能慢慢理解它. 对Java.PHP或其他标准语言来看,this 表示类方法中当前对象的实例.大多数情况下,this 不能在方法之外使用,这样就比较不会造成混淆. 在J要中情况就有所不同: this表示函数的当前执行上下文,JS 中函数调用主要有以下几种
JS匿名函数内部this指向问题详析

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

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

在具体的实际应用中,this 的指向无法在函数定义时确定,而是在函数执行的时候才确定的,根据执行时的环境大致可以分为以下3种: 1.当函数作为普通函数调用时,this 指向全局对象 2.当函数作为对象的方法调用时,this 指向该对象 3.当函数作为构造器调用时,this 指向新创建的对象示例一: window.name = 'myname'; function getName() { console.log(this.name); } getName(); //输出myname 示例二: v
js中this的指向问题归纳总结

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

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

题记 JS中的this指向一直是个让初学者头疼的问题.今天,我们就一起来瞅瞅this倒地是咋回事,详细说说this指向原则,从此不再为了this指向操碎了心. 开篇首先我们都知道this是Javascript语言的一个关键字. 它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.随着函数使用场合的不同,this的值会发生变化.但是有一个总的原则,那就是this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它所在函
详解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中的链式调用

链模式链模式是一种链式调用的方式,准确来说不属于通常定义的设计模式范畴,但链式调用是一种非常有用的代码构建技巧. 描述链式调用在JavaScript语言中很常见,如jQuery.Promise等,都是使用的链式调用,当我们在调用同一对象多次其属性或方法的时候,我们需要多次书写对象进行.或()操作,链式调用是一种简化此过程的一种编码方式,使代码简洁.易读. 链式调用通常有以下几种实现方式,但是本质上相似,都是通过返回对象供之后进行调用. this的作用域链,jQuery的实现方式,通常链式调用
详解JavaScript中new操作符的解析和实现

前言 new 运算符是我们在用构造函数创建实例的时候使用的,本文来说一下 new 运算符的执行过程和如何自己实现一个类似 new 运算符的函数. new 运算符的运行过程 new 运算符的主要目的就是为我们创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例(比如箭头函数就没有构造函数,所以是不能 new 的).new 操作符的执行大概有以下几个步骤: 创建一个新的空对象把新对象的 __proto__ 链接到构造函数的 prototype 对象(每一个用户定义函数都有一个 proto
详解JavaScript中的执行上下文及调用堆栈

一.执行上下文是什么代码运行是在一定的环境之中运行的,这个运行环境我们就成为执行环境,也就是执行上下文,按照执行环境不同,我们可以分为三类: 全局执行环境:代码首次执行时候的默认环境函数执行环境:每当执行流程进入到一个函数体内部的时候 Eval执行环境:当eval函数内部的文本执行的时候二.执行上下文栈是什么既然是'栈',那就得符合'栈'的特性,即数据结构是先进后出.下面我们看一段代码: function cat(a){ if(a<0){ return false; } console.
详解JavaScript中的数据类型，以及检测数据类型的方法

一.js中的数据类型有哪些? 在js中,基本数据类型有五种,分别是 string.number.boolean.null.undefined,不过在ES6中新增加的了一种基本数据类型Symbol(表示独一无二的值),其作用主要是从根本上防止属性名的冲突而设定的. 除了基本数据类型之外,还有引用数据类型object,也有人称之为复杂数据类型,包含了我们常见的Array.Object.Function等. 所以现在js中的数据类型共有七种. PS: Symbol数据类型通过Symbol函数生成.也就
详解React中的this指向

打算记流水账一般细数一下 React 中的 this 指向问题,具体流程按事件三要素:起因,经过,结果.哈哈哈哈哈! 起因: 众所周知,React 的设计是响应式的,使用者无需操纵 DOM,操纵数据,页面就会渲染更新. 数据一变就更新,是更新所有的 DOM 吗?当然不是,哪些变了就重新渲染哪些.那就要对数据变化前后的 DOM 进行比较.直接对比真实 DOM 吗?这样性能会很低,React 比较的是虚拟 DOM,虚拟 DOM 也是对象,只不过相较真实 DOM而言,少了很多属性,更"轻".

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

相关推荐

随机推荐