返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript基础之this指向
  • 978
分享到

JavaScript基础之this指向

2024-04-02 19:04:59 978人浏览 独家记忆
摘要

目录this方法中对象中隐藏的this严格模式总结javascript中this也是一件很神奇 事情,在面向对象(比如java)中表示一个当前的对象引用,但是在JavaScript中

javascript中this也是一件很神奇 事情,在面向对象(比如java)中表示一个当前的对象引用,但是在JavaScript中this不是固定不变的,而是随着运行环境的改变而改变。

this

老规矩先看代码:

方法中


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

在这里插入图片描述

对象中


function test(){
    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。

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注编程网的更多内容!

--结束END--

本文标题: JavaScript基础之this指向

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

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

猜你喜欢
  • JavaScript基础之this指向
    目录this方法中对象中隐藏的this严格模式总结JavaScript中this也是一件很神奇 事情,在面向对象(比如java)中表示一个当前的对象引用,但是在JavaScript中...
    99+
    2024-04-02
  • JavaScript面向对象基础与this指向的示例分析
    这篇文章给大家分享的是有关JavaScript面向对象基础与this指向的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。1 、OOP的基础问题1.1什么是面向过程和面向对...
    99+
    2024-04-02
  • JavaScript之this指向实例分析
    今天小编给大家分享一下JavaScript之this指向实例分析的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。默认绑定,全局...
    99+
    2023-06-30
  • javascript中的this指向什么
    这篇文章主要介绍“javascript中的this指向什么”,在日常操作中,相信很多人在javascript中的this指向什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”...
    99+
    2024-04-02
  • JavaScript怎么改变this指向
    本文小编为大家详细介绍“JavaScript怎么改变this指向”,内容详细,步骤清晰,细节处理妥当,希望这篇“JavaScript怎么改变this指向”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,...
    99+
    2024-04-02
  • JavaScript中this指向怎么用
    这篇文章主要介绍JavaScript中this指向怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!JavaScript中this也是一件很神奇 事情,在面向对象(比如java)中表示一个当前的对象引用,但是在Ja...
    99+
    2023-06-25
  • 基于Vue中this.$options.data()的this指向问题
    目录this.$options.data()的this指向问题vue文档中有关于data的指向问题的解释vue骚操作之this.$options.data()重置vue组件的data...
    99+
    2024-04-02
  • 你可能不知道的JavaScript之this指向详解
    目录前言默认绑定,全局对象点石成金,隐式绑定隐式绑定丢失指腹为婚,显式绑定内有乾坤,new 绑定军令如山,箭头函数this 绑定优先级总结相关文献引用链接前言 JavaScript ...
    99+
    2024-04-02
  • JavaScript中this指针指向怎么理解
    这篇“JavaScript中this指针指向怎么理解”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“JavaScript中th...
    99+
    2023-07-04
  • JavaScript中this指向有什么用
    这篇文章给大家分享的是有关JavaScript中this指向有什么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。JavaScript 中的 this 指向问题有很多文章在解释,...
    99+
    2024-04-02
  • javascript的this指向怎么理解
    本文小编为大家详细介绍“javascript的this指向怎么理解”,内容详细,步骤清晰,细节处理妥当,希望这篇“javascript的this指向怎么理解”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深...
    99+
    2024-04-02
  • JavaScript中的this关键词指向
    目录1、es5中的this的指向2、es6中的this1、es5中的this的指向 this是JavaScript的一个关键字,他是函数执行过程中,自动生成的一个内部对象,指当前的对...
    99+
    2024-04-02
  • javascript中this指向怎么调用
    本篇内容介绍了“javascript中this指向怎么调用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!JavaScript由于其在运行期进...
    99+
    2023-07-04
  • Python基础之面向对象基础
    面向对象编程(Object-Oriented Programming,简称OOP)是一种编程思想,它将程序中的数据和操作封装成对象,...
    99+
    2023-09-23
    Python
  • JavaScript中的this指向问题详解
    前言 相信我,只要记住本文的 7️⃣ 步口诀,就能彻底掌握 JS 中的 this 指向。 先念口诀:箭头函数、new、bind、apply 和 call、欧...
    99+
    2024-04-02
  • JavaScript中 this 的绑定指向规则
    目录问题来源this 绑定规则1.默认绑定2.隐式绑定3.显示绑定4.new 绑定5.内置方法6.规则优先级7.规则之外8.实践问题来源 在 js 中,...
    99+
    2024-04-02
  • JavaScript中this指向的示例分析
    小编给大家分享一下JavaScript中this指向的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!this先看代码:方法中function t...
    99+
    2023-06-25
  • JavaScript函数this指向问题详解
    目录一、 函数内 this 的指向1、普通函数2、构造函数3、对象方法4、事件绑定方法5、定时器函数6、立即执行函数二、改变函数内部 this 指向1、call 方法2、apply ...
    99+
    2024-04-02
  • JavaScript this绑定与this指向问题如何解决
    本篇内容主要讲解“JavaScript this绑定与this指向问题如何解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript this绑定与this指向问...
    99+
    2023-07-05
  • java基础之this的示例分析
    小编给大家分享一下java基础之this的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!1、this关键字首先需要提醒的是,在整个Java之中,this是...
    99+
    2023-06-20
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作