返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript深入刨析this的指向以及如何修改指向
  • 901
分享到

JavaScript深入刨析this的指向以及如何修改指向

2024-04-02 19:04:59 901人浏览 泡泡鱼
摘要

目录this方法中对象中隐藏的this严格模式可以改变this指向this 老规矩先看代码: 方法中 function test(){ console.log(this)

this

老规矩先看代码:

方法中


function test(){
    console.log(this);
}

在这里插入图片描述

对象中


Person={
  name:"张三",
  eat:function(){
      console.log(this)
  }
}

在这里插入图片描述

在方法中,this表示该方法所属的对象。因为第一个是window上的方法,所以打印了window,而eat方法是Person方法,所以打印除了对象Person。

所以可以看出单独在控制台使用this, 表示全局对象。

在这里插入图片描述

隐藏的this

在对象,可以提前声明一个一个:


var Person1={
    name:"张三",
    age:18
}
var Person2={
    name:"李四",
    age:19
}

这样写会很麻烦,所以可以借鉴一下java类的概念,可以这样:


var Person=function(name,age){
    this.name=name,
    this.age=age
       
}
var Person1=new Person("张三",18);
var Person2=new Person("李四",19);

在这里插入图片描述

其实在new的时候隐藏了一个return this,如果不使用new的话,发现其没有返回这个新建的对象。

在这里插入图片描述

那么现在补全一下看:


var Person=function(name,age){
    this.name=name,
    this.age=age
    return this;
}
var Person1=new Person("张三",18);
var Person2=new Person("李四",19);

在这里插入图片描述

这样的话,甚至可以伪造一个this的效果:


var Person=function(name,age){
    var that={};
    that.name=name,
    that.age=age
    return that;
}
var Person1=new Person("张三",18);
var Person2=new Person("李四",19);

在这里插入图片描述

严格模式

this在严格模式和非严格模式下有些神奇的情况


function test() {
  return this;
}

# 如果js前面添加"use strict" 代表是严格模式
"use strict";
function test() {
  return this;
}

在这里插入图片描述

这个可以看出在非严格模式下函数中,函数的所属者默认绑定到 this 上。所以可以打印出全局,但是严格模式下函数是没有绑定到 this 上,这时候 this 是 undefined。

可以改变this指向

先看代码


var Person=function(name,age){
    this.name=name,
    this.age=age,
    this.fun=function(){
         console.log("打印",this.name);
        }
}
var Person1=new Person("张三",18);
var Person2=new Person("李四",19);




在这里插入图片描述

可以看出this指向的window中的a的值而不是方法test中的值,但是有些关键字是可以修改指向的。

在这里插入图片描述

可以看出方法前的对象是谁,调用的this就是谁,但是可以修改的比如使用关键字 call ,apply ,bind

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

看上面的话,可以看出call和apply两个很像,而bind不会立即执行函数,需要带()执行。

不过如果带上参数的话,会发现call和apply还是不同的,但是其里面都必须是对象才行,毕竟this这个指向就是对象

关键字 直接调用方法 参数
call 会自动运行使用的方法 都可以带参数格式如下:obj1.obj1Fun.call( obj2, 参数1, 参数1 ………………);
apply 会自动运行使用的方法 都可以带参数格式如下:obj1.obj1Fun.apply( [ obj2, 参数1, 参数1 ………………]); 对比call的参数其参数用 [ ] 包住
bind 不会自动运行使用的方法,需要后面+(),进行调用 都可以带参数格式如下:都可以带参数格式如下:obj1.obj1Fun.bind( [ obj2, 参数1, 参数1 ………………])(); 对比apply的参数是一样的,只不过其需要后面+()才能调用

到此这篇关于javascript深入刨析this的指向以及如何修改指向的文章就介绍到这了,更多相关JavaScript this指向内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JavaScript深入刨析this的指向以及如何修改指向

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

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

猜你喜欢
  • JavaScript深入刨析this的指向以及如何修改指向
    目录this方法中对象中隐藏的this严格模式可以改变this指向this 老规矩先看代码: 方法中 function test(){ console.log(this)...
    99+
    2024-04-02
  • JavaScript this的原理以及指向详解
    怎么判断this指向? ①在全局环境中调用就指向window。 ②作为对象的方法调用就指向该对象。 ③作为构造函数调用就指向这个新创建的对象。 ④可...
    99+
    2024-04-02
  • 怎么修改Vue.js this的指向
    这篇文章主要讲解了“怎么修改Vue.js this的指向”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么修改Vue.js this的指向”吧!修改 thi...
    99+
    2024-04-02
  • 如何改变函数的this指向
    本篇内容介绍了“如何改变函数的this指向”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! 如果是函数声明...
    99+
    2024-04-02
  • JavaScript中this指向的示例分析
    小编给大家分享一下JavaScript中this指向的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!this先看代码:方法中function t...
    99+
    2023-06-25
  • javascript改变this指向的方法汇总
    目录一、this指向1、全局作用下,this指向的是window2、函数独立调用时,函数内部的this也指向window3、被嵌套的函数独立调用时,this默认指向了window4、...
    99+
    2024-04-02
  • JavaScript中this指向问题的示例分析
    这篇文章将为大家详细讲解有关JavaScript中this指向问题的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1. 箭头函数箭头函数排在第一个是因为它的 this 不会被改变,所以只要当前函数...
    99+
    2023-06-14
  • JavaScript面向对象基础与this指向的示例分析
    这篇文章给大家分享的是有关JavaScript面向对象基础与this指向的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。1 、OOP的基础问题1.1什么是面向过程和面向对...
    99+
    2024-04-02
  • JavaScript this绑定与this指向问题如何解决
    本篇内容主要讲解“JavaScript this绑定与this指向问题如何解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript this绑定与this指向问...
    99+
    2023-07-05
  • 如何理解JavaScript函数this指向问题
    这篇文章给大家介绍如何理解JavaScript函数this指向问题,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。一、 函数内 this 的指向这些 this的指向,是当调用函数的时候确定的。 调用方式的不同决...
    99+
    2023-06-21
  • JavaScript中的this关键词指向实例分析
    这篇文章主要讲解了“JavaScript中的this关键词指向实例分析”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript中的this关键词指向实例分析”吧!1、es5中的th...
    99+
    2023-06-30
  • web开发中函数调用以及this的指向的示例分析
    这篇文章主要为大家展示了“web开发中函数调用以及this的指向的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“web开发中函数调用以及this的指向的...
    99+
    2024-04-02
  • Javascript中this关键字指向问题的示例分析
    这篇文章主要介绍了Javascript中this关键字指向问题的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。测试题目第一题<...
    99+
    2024-04-02
  • JavaScript进阶学习之初识类、函数进阶、如何改变this指向
    以上就是JavaScript进阶学习之初识类、函数进阶、如何改变this指向的详细内容,更多请关注编程网其它相关文章!...
    99+
    2022-11-22
    javascript
  • JavaScript创建对象的几种方式及关于this指向问题
    目录工厂模式构造函数模式关于 this原型模式工厂模式 工厂模式一般用于抽象创建特定对象的过程,是按照特定接口创建对象的方式。 function createPerson(...
    99+
    2024-04-02
  • 深入解析Go语言的劣势及改进方向
    在计算机编程领域,Go语言作为一种开发效率高、并发性能强的编程语言,受到了广泛的关注和应用。然而,正如任何一种编程语言一样,Go语言也存在着一些劣势,需要不断改进和优化。本文将深入探讨...
    99+
    2024-04-02
  • JavaScript进阶教程之函数的定义、调用及this指向问题详解
    目录前言一:函数的定义 1.1 命名函数 1.2 匿名函数 1.3 利用 new Function() 声明函数1.4 重要结论&n...
    99+
    2024-04-02
  • vue如何使用axios时解决关于this指向的问题
    这篇文章将为大家详细讲解有关vue如何使用axios时解决关于this指向的问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1.解决办法在vue中使用axios做网络请...
    99+
    2024-04-02
  • 如何修改注册表解决IE 8引起的VS2005以及2008向导出错的问题
    如何修改注册表解决IE 8引起的VS2005以及2008向导出错的问题,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。IE正式版引发VS2005和VS2008向导出错的解决方...
    99+
    2023-06-14
  • 当尝试在 Go 中使 `subtareas` 成为指向 `ListaDeTareas` 的指针时,如何修复 `invalid recursive type Tarea` 错误?
    在使用 Go 语言时,当我们尝试将 `subtareas` 声明为指向 `ListaDeTareas` 的指针时,可能会遇到 `invalid recursive type Tarea...
    99+
    2024-02-11
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作