前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >JavaScript函数中的this(二)

JavaScript函数中的this(二)

原创
作者头像
堕落飞鸟
发布于 2023-05-17 03:28:10
发布于 2023-05-17 03:28:10
52100
代码可运行
举报
文章被收录于专栏:飞鸟的专栏飞鸟的专栏
运行总次数:0
代码可运行

this 的常见用途:

访问对象属性和方法:通过使用 this,我们可以在对象方法中访问和操作对象的属性和方法。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let person = {
  name: 'John',
  sayHello: function() {
    console.log('Hello, ' + this.name + '!');
  }
};

person.sayHello(); // 输出 "Hello, John!"

创建和初始化对象:通过构造函数和 this,我们可以在创建对象时设置和初始化对象的属性。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function Person(name, age) {
  this.name = name;
  this.age = age;
}

let john = new Person('John', 25);
console.log(john.name); // 输出 "John"
console.log(john.age); // 输出 25

修改执行上下文:通过使用 call() 或 apply(),我们可以在特定的上下文中调用函数,并将 this 值设置为指定的对象。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function sayHello() {
  console.log('Hello, ' + this.name + '!');
}

let obj1 = {
  name: 'John'
};

let obj2 = {
  name: 'Sarah'
};

sayHello.call(obj1); // 输出 "Hello, John!"
sayHello.call(obj2); // 输出 "Hello, Sarah!"

避免闭包中的问题:通过使用 this,我们可以避免闭包中的作用域问题,确保访问正确的变量和对象。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let obj = {
  name: 'John',
  handleClick: function() {
    let self = this;
    setTimeout(function() {
      console.log('Hello, ' + self.name + '!');
    }, 1000);
  }
};

obj.handleClick(); // 输出 "Hello, John!"

需要注意的是,this 的值在函数被调用时确定,并且在函数执行过程中可能会发生变化。了解 this 的规则和用法非常重要,以避免在代码中出现错误或意外行为。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
JavaScript函数中的this(一)
在JavaScript中,关键字 this 是一个特殊的对象引用,它指向当前执行函数的上下文对象。this的值在函数被调用时确定,并且可能根据函数的调用方式和上下文的不同而变化。this的使用是非常重要的,它允许我们访问和操作当前执行函数所属的对象和环境。
堕落飞鸟
2023/05/17
6110
JavaScript中的this指向问题
在JavaScript中,关键字 this 是一个特殊的对象,它在函数被调用时自动创建。通常用来指向当前执行的函数所属的对象。this 的值在函数的每次调用时可能会发生变化,具体取决于函数是如何被调用的。
九仞山
2023/10/14
2650
javascript 基础_JavaScript高级编程
1.分类: -基本类型 -String:任意字符串 -Number:任意的数字 -boolean: true/false -undefined:未定义 -null:空
全栈程序员站长
2022/09/24
1.6K0
javascript 基础_JavaScript高级编程
深入探讨JavaScript函数
JavaScript是一门多范式的编程语言,其中函数是其核心特性之一。函数在JavaScript中起到至关重要的作用,不仅可以实现模块化的代码结构,还可以用于处理数据、控制流程、创建对象,以及执行各种任务。本文将深入探讨JavaScript函数的各个方面,包括函数的定义、参数传递、作用域、闭包、回调函数等,以帮助您更好地理解和利用JavaScript中的函数。
海拥
2023/10/15
3281
JavaScript进阶--原型、原型链、闭包
在JavaScript中,每个函数 都有一个prototype属性,当一个函数被用作构造函数来创建实例时,这个函数的prototype属性值会被作为原型赋值给对象实例(也就是设置 实例的__proto__属性),也就是说,所有实例的原型引用的是函数的prototype属性。
软件架构师Michael
2022/08/09
5120
JavaScript中this指向哪儿?如何确定this?-前端面试进阶
只要你踏入JavaScript 的世界,那么你一定会遇到 this 关键词。有许多人所 this 是 JavaScript 中最复杂的东西之一,也有人说 this 其实很简单......但是事实确实,有许多工作了好多年的小伙伴,在 this 指向问题上也常常出现错误。
loveX001
2022/10/02
2520
掌握JavaScript中call()和apply()的精髓,让你的函数调用更加灵活高效
JavaScript 是一门非常强大的编程语言,它支持多种编程范式,包括面向对象编程。在 JavaScript 中,我们可以使用 call() 和 apply() 两个方法来调用函数并且改变函数的上下文。这两个方法在 JavaScript 中是非常常用的,但是很多新手对它们的理解还不够深入。在本文中,我们将详细介绍 call() 和 apply() 的区别与用法,帮助读者更好地理解它们。
Front_Yue
2023/12/21
1.8K3
掌握JavaScript中call()和apply()的精髓,让你的函数调用更加灵活高效
JavaScript学习总结(四)——this、原型链、javascript面向对象
根据题目要求,对给定的文章进行摘要总结。
张果
2018/01/04
1.5K0
JavaScript学习总结(四)——this、原型链、javascript面向对象
【前端进阶】深入浅出 JavaScript 中的 this
笔者最近在看 你不知道的JavaScript上卷,里面关于 this 的讲解个人觉得非常精彩。JavaScript 中的 this 算是一个核心的概念,有一些同学会对其有点模糊和小恐惧,究其原因,现在对 this 讨论的文章很多,让我们觉得 this 无规律可寻,就像一个幽灵一样
GopalFeng
2020/10/27
3970
【前端进阶】深入浅出 JavaScript 中的 this
深入理解JS | 青训营笔记
JavaScript(简称JS)是一门脚本语言,用于为网页添加交互效果和动态功能。它由三个基本部分组成: ECMAScript、DOM和BOM。
心安事随
2024/07/29
790
深入理解JS | 青训营笔记
【JavaScript】 进阶教程 施工中~
每个函数都有一个prototype属性。它默认指向一个Object空对象(即成为:原型对象)
杨丝儿
2022/02/24
1.4K0
【JavaScript】 进阶教程 施工中~
this,call,apply,bind(万字长文)
前言 大家好啊,我是吒儿?,每天努力一点点?,就能升职加薪?当上总经理出任CEO迎娶白富美走上人生巅峰?,想想还有点小激动呢?。 这是我的第13期文章内容✍,希望能够把每一处知识点,说明白,(当然,如
达达前端
2020/06/16
1.2K0
【Web前端】JavaScript 对象基础
JavaScript 是一种以对象为基础的编程语言,操作数据时,实际都是在处理对象。可以使用简单的数据类型(如字符串、数字和布尔值)来实现一些功能,但深入了解 JavaScript 对象的运作,将使你能够编写更强大和灵活的代码。
一条晒干的咸鱼
2024/11/19
630
【Web前端】JavaScript 对象基础
JavaScript中的this指向哪?
this可以说是前端开发中比较常见的一个关键字,由于其指向是在运行时才确定,所以大家在开发中判断其方向时也会很模糊,今天就把this的指向问题拆开了,揉碎了,好好讲一讲。
归思君
2023/12/14
1740
JavaScript中的this指向哪?
JavaScript对象(一)
avaScript中的对象是一种复杂的数据类型,用于存储和组织相关数据和功能。对象由一组键值对组成,其中键是字符串或符号,值可以是任意的JavaScript数据类型,包括其他对象。对象提供了一种将数据和行为组合在一起的强大方式,可以通过访问对象的属性和调用对象的方法来操作和操作数据。
堕落飞鸟
2023/05/17
1660
JavaScript(高级)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
神葳
2021/01/22
9020
【JS 构造|原型|原型链|继承(圣杯模式)|ES6类语法】上篇
❗️ ❗️ ❗️本篇系将带来JavaScript中的构造——原型——原型链——继承——ES6类语法系列知识完整讲解。 ❗️ ❗️ ❗️ ❕上篇涉及:构造——原型——原型链 ❕下篇涉及:继承——ES6类语法
好吃懒洋洋
2022/11/15
7410
【JS 构造|原型|原型链|继承(圣杯模式)|ES6类语法】上篇
JavaScript基础-对象与JSON
在JavaScript编程中,对象是存储和操作数据的核心结构,而JSON(JavaScript Object Notation)则是数据交换的轻量级格式。本文旨在深入浅出地介绍JavaScript对象的创建与操作,以及JSON的解析与序列化,同时指出常见问题与易错点,并提供实用的避免策略和代码示例
Jimaks
2024/06/12
1480
JS学习笔记
内部函数被返回到外部,函数本身保留了父函数的AO,即使父元素执行完了,取消对AO的引用,但依旧被子函数保留下来了,就形成了闭包。
小丞同学
2021/08/16
4070
简单学习Es6中的this指向
对于一个前端初学者来说,this的指向是一个必须要掌握的知识点,尤其是es6之后的this指向更加变得飘忽不定,我们今天就来了解一下各种情况下this的指向。
憧憬博客
2020/07/20
4830
相关推荐
JavaScript函数中的this(一)
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验