当前位置: 首页 > news >正文

JS - this指向

一 this 指向有哪几种

详细可见:https://juejin.cn/post/6844903805587619854 (文章归类this指向为四大类)
https://www.jianshu.com/p/66eb9b21105d

this是什么?this 就是一个指针,指向调用函数的对象。

1.默认绑定:

全局环境中,this默认绑定到window。在不能应用其它绑定规则时使用的默认规则,通常是独立函数调用。

  function test() {console.log(this); //window 或 严格模式下是undefined}setTimeout(function () {console.log(this); 
//window setTimeout比较奇怪,默认绑定严格模式下竟然不是undefined});arr.forEach(function(){console.log(this);//window 或严格模式下是undefined});

2.隐式绑定:

一般地,被直接对象所包含的函数调用时,也称为方法调用this隐式绑定到该直接对象。典型的形式为 XXX.fun().

function sayHi(){ console.log('Hello,', this.name);}
var person = {name: 'YvetteLau', sayHi: sayHi}
var name = 'Wiliam';
person.sayHi();// Hello,YvetteLau

3.显式绑定

隐式丢失:隐式丢失是指被隐式绑定的函数丢失绑定对象,从而默认绑定到window。
显式绑定:通过call()、apply()、bind()方法把对象绑定到this上,叫做显式绑定。

function sayHi(){console.log('Hello,', this.name);
}
var person = {name: 'YvetteLau',sayHi: sayHi
}var name = 'Wiliam';var Hi = person.sayHi;Hi.call(person); //Hello, YvetteLau

4.new绑定:

如果函数或者方法调用之前带有关键字new,它就构成构造函数调用。对于this绑定来说,称为new绑定。
a. 构造函数通常不使用return关键字,它们通常初始化新对象,当构造函数的函数体执行完毕时,它会显式返回。在这种情况下,构造函数调用表达式的计算结果就是这个新对象的值。
b. 如果构造函数使用return语句但没有指定返回值,或者返回一个原始值,那么这时将忽略返回值,同时使用这个新对象作为调用结果。
c. 如果构造函数显式地使用return语句返回一个对象,那么调用表达式的值就是这个对象。

new一个对象的过程:
1: 创建一个空对象
2: 设置该对象的__proto__属性为构造函数的原型对象
3: 修改构造函数内部this指针指向新创建的对象
4: 如果构造函数内部返回引用数据类型则返回构造函数中返回值,否则返回新的对象

function sayHi(name){this.name = name;}
var Hi = new sayHi('Yevtte');
console.log('Hello,', Hi.name);// Hello, Yevtte

a/b/c看这篇文章:https://www.cnblogs.com/pssp/p/5216085.html

5. es6的箭头函数

window.name = 'win';
const obj1 = {name: 'joy',getName: () => {console.log(this); //window 调用前this是什么函数里面的this就是什么console.log(this.name); //win }
};
obj1.getName();

二 绑定优先级

箭头函数 > new绑定 > 显式绑定 > 隐式绑定 > 默认绑定

最后,做些题巩固下:
https://juejin.cn/post/6946021671656488991

相关文章:

JS - this指向

一 this 指向有哪几种 详细可见:https://juejin.cn/post/6844903805587619854 (文章归类this指向为四大类) https://www.jianshu.com/p/66eb9b21105d this是什么?this 就是一个指针,指向调用函数的对象。 1.默认绑定…...

低代码有哪些典型应用场景?

低代码有哪些典型应用场景? 低代码是一种全新的应用开发方式,它通过可视化的拖拽式界面,将传统的繁琐代码编写转化为简单的拖拽操作,让非技术人员也能够快速地开发出应用程序。 随着数字化转型的不断加速,低代码平台…...

Substrate 基础教程(Tutorials) -- 监控节点指标

Substrate 公开有关网络操作的度量。例如,您可以收集有关您的节点连接了多少个对等节点、您的节点使用了多少内存以及正在生成的块数量的信息。为了捕获和可视化Substrate节点公开的度量,您可以配置和使用Prometheus和Grafana等工具。本教程演示如何使用…...

lua table 详解

文章目录1.table 声明与访问2. table 的两种遍历方式 pairs 和 ipairs2.1 pairs2.2 ipairs2.3 例3.迭代器实现 ipairs 效果4.获取 table 长度4.1 #table 获取长度4.2 自定义函数获取 table 长度注意事项1.table 声明与访问 -- 初始化表 tbl {} -- 不可以是 tbl nil-- 赋值 -…...

Element表单嵌套树形表格的校验问题

普通嵌套 表单和表格是项目中最常见的项目&#xff0c;有时候就会遇到表格嵌套表单的情况&#xff0c;比如 这种形式的其实挺好处理的&#xff0c;如下&#xff1a; <el-form:model"states"ref"tableFormRef"label-width"80px"label-posit…...

1.webpack的基本使用

webpack是做工程化用的&#xff0c;并且可以对代码进行压缩(搞成min.js那样)&#xff0c;处理浏览器端JS兼容性&#xff0c;性能优化 vue-cli与webpack作用相同 目录 1 基本使用 1.1 引入场景 1.2 安装webpack 1.3 配置webpack 1.4 使用webpack 2 webpack.config.…...

面试必看:谈谈你所了解的JVM调优,JVM性能调优总结

文章目录从面试角度来谈谈你了解的JVM调优GC调优的步骤1.确定目标&#xff1a;2.优化参数3.验收优化结果GC优化案例一、Major GC和Minor GC频繁优化Minor GC频繁问题&#xff1a;1.可以适当增大新生代的内存二、请求高峰期发生GC&#xff0c;导致服务可用性降低优化标记停顿时间…...

Pytorch优化器Optimizer

优化器Optimizer 什么是优化器 pytorch的优化器&#xff1a;管理并更新模型中可学习参数的值&#xff0c;使得模型输出更接近真实标签 导数&#xff1a;函数在指定坐标轴上的变化率 方向导数&#xff1a;指定方向上的变化率&#xff08;二元及以上函数&#xff0c;偏导数&am…...

如何在MySQL 8中实现数据迁移?这里有一个简单易用的方案

文章目录前言一. 致敬IT领域的那些女性二. 进制方式安装MySQL2.1 下载软件包2.2 配置环境&#xff1a;2.2.1 配置yum环境2.2.2 配置安全前的系统环境2.3 开始安装2.4 初始化MySQL2.5 修改配置文件2.6 将MySQL设为服务并启动测试三. MySQL数据迁移总结前言 正好赶上IT女神节&am…...

java多线程(二三)并发编程:Callable、Future和FutureTask

一、Callable 与 Runnable 先说一下java.lang.Runnable吧&#xff0c;它是一个接口&#xff0c;在它里面只声明了一个run()方法&#xff1a; public interface Runnable {public abstract void run(); }由于run()方法返回值为void类型&#xff0c;所以在执行完任务之后无法返…...

day4分支和循环作业

基础题 根据输入的成绩的范围打印及格 或者不及格。 score 58 if score > 90:print(及格) else:print(不及格)根据输入的年纪范围打印成年或者未成年&#xff0c;如果年龄不在正常范围内(0~150)打印这不是人!。 age 52 if 0 < age < 18:print(未成年) elif 18 &l…...

轮毂要怎么选?选大还是选小?

随着改装车的越来越火爆&#xff0c;汽车轮毂可选择的款式也越来越多&#xff0c;90%的人换轮毂&#xff0c;首先选的就是外观。大轮毂的款式多&#xff0c;外形大气好看&#xff0c;运动感十足&#xff0c; 那是不是选大轮毂就可以呢&#xff1f;不是的&#xff0c;汽车轮毂要…...

RabbitMq 使用说明

1. 声明交换机和队列&#xff0c;以及交换机和队列绑定 import lombok.extern.slf4j.Slf4j; import org.springframework.amqp.core.*; import org.springframework.beans.factory.annotation.Qualifier; import org.springframework.context.annotation.Bean; import org.spr…...

Vue(10-20)

1Vue赋值方式 Object.defineProperty <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" conten…...

C++-对四个智能指针:shared_ptr,unique_ptr,weak_ptr,auto_ptr的理解

回答如下&#xff1a; C的智能指针是一种特殊类型的“指针”&#xff0c;其主要目的是自动跟踪内存分配和释放&#xff0c;以避免程序中出现内存泄露或空悬指针等问题&#xff0c;主要采用的技术是&#xff1a;借助于类的生命周期&#xff0c;当超出了类的作用域时&#xff0c…...

uni-app中使用vue3语法详解

全局创建 app.use(createPina()).mount 全局方法 通过app.config.globalProperties.xxx可以创建 这里我们写了一个字符串翻转的全局方法 main.js里面添加一个全局方法 不要忘了加$ 否则会报错 // #ifdef VUE3 //导入创建app import { createSSRApp } from vue //导入创建ap…...

三十四、MongoDB PHP

PHP 语言可是使用 mongo.so ( Windows 下是 mongo.dll ) 扩展访问 MongoDB 数据库 MongoDB PHP 在各平台上的安装及驱动包下载请查看: PHP 安装 MongoDB 扩展驱动 如果你使用的是 PHP7&#xff0c;请移步&#xff1a; PHP7 MongoDB 安装与使用 PHP 连接 MongoDB 和 选择一个…...

浅拷贝和深拷贝的区别

浅拷贝和深拷贝 总结&#xff1a;浅拷贝对象数据共享&#xff0c;深拷贝是一个完全独立的对象&#xff0c;因此对象数据不共享。 浅拷贝&#xff08;Shallow Copy&#xff09; 浅拷贝是指创建一个新的对象&#xff0c;但是该新对象只是原始对象的一个副本。具体而言&#xf…...

6个常用Pycharm插件推荐,老手100%都用过

人生苦短 我用python 有些插件是下载后需要重启Pycharm才生效的 免费领源码、安装包&#xff1a;扣扣qun 903971231 PyCharm 本身已经足够优秀&#xff0c; 就算不使用插件&#xff0c; 也可以吊打市面上 90%的 Python 编辑器。 如果硬要我推荐几款实用的话&#xff0c; 那么…...

TCP的11种状态

CLOSED状态&#xff1a;初始状态&#xff0c;表示TCP连接是“关闭的”或者“未打开的”LISTEN状态&#xff1a;表示服务端的某个端口正处于监听状态&#xff0c;正在等待客户端连接的到来SYN_SENT状态&#xff1a;当客户端发送SYN请求建立连接之后&#xff0c;客户端处于SYN_SE…...

3分钟掌握AnythingLLM浏览器扩展:将任意网页变成AI知识库的终极指南

3分钟掌握AnythingLLM浏览器扩展&#xff1a;将任意网页变成AI知识库的终极指南 【免费下载链接】anything-llm 这是一个全栈应用程序&#xff0c;可以将任何文档、资源&#xff08;如网址链接、音频、视频&#xff09;或内容片段转换为上下文&#xff0c;以便任何大语言模型&a…...

uniapp安卓应用实现开机自启动的完整配置指南

1. 为什么需要开机自启动功能&#xff1f; 很多智能设备&#xff08;如工业平板、广告机、自助终端&#xff09;都需要在通电后立即运行指定应用。比如商场的导购系统、工厂的生产看板、医院的叫号终端&#xff0c;都需要保证设备重启后业务系统能自动恢复。传统方案需要人工点…...

无需编程!cv_resnet18_ocr-detection WebUI界面操作详解

无需编程&#xff01;cv_resnet18_ocr-detection WebUI界面操作详解 1. 开篇&#xff1a;为什么选择这个OCR工具&#xff1f; 在日常工作和生活中&#xff0c;我们经常需要从图片中提取文字信息。传统OCR工具要么需要复杂的编程接口&#xff0c;要么功能单一难以满足需求。今…...

Windows用户福音:WSL2+Docker快速部署Coze Studio开源版(附常见错误解决方案)

Windows平台高效部署Coze Studio开源版的完整指南 对于Windows开发者而言&#xff0c;在本地环境搭建Coze Studio开源版可能面临诸多挑战。本文将提供一套经过验证的完整解决方案&#xff0c;从WSL2配置到Docker优化&#xff0c;帮助您避开常见陷阱&#xff0c;快速实现Coze St…...

WebPageTest API完全手册:自动化网站性能监控与集成

WebPageTest API完全手册&#xff1a;自动化网站性能监控与集成 【免费下载链接】WebPageTest Official repository for WebPageTest 项目地址: https://gitcode.com/gh_mirrors/we/WebPageTest WebPageTest 是一款强大的网站性能测试工具&#xff0c;其提供的 API 功能…...

2026年全国青少年信息素养大赛算法应用主题赛(C++赛项初赛模拟题)

2026年全国青少年信息素养大赛算法应用主题赛&#xff08;C赛项初赛模拟题&#xff09; 一、单项选择题&#xff08;共 15 题&#xff0c;每题 5 分&#xff09; 1. 数组下标与长征物资 题目内容 你需要记录红军某运输队一周&#xff08;7 天&#xff09;的粮食消耗量&#x…...

DanKoe 视频笔记:重塑自我:如何摆脱糟糕的生活状态

在本教程中&#xff0c;我们将探讨为何生活可能陷入困境&#xff0c;并学习如何通过一系列有意识的微小选择、提升个人标准以及利用互联网的力量来重塑自我&#xff0c;最终走上价值创造者的道路。我们将分析问题的根源&#xff0c;并提供具体的行动步骤。 微小的选择&#xf…...

OpCore Simplify:智能高效的OpenCore EFI配置工具技术指南

OpCore Simplify&#xff1a;智能高效的OpenCore EFI配置工具技术指南 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify OpCore Simplify是一款专为简化…...

OpenClaw隐私保护方案:Qwen3-32B本地推理的医疗数据处理

OpenClaw隐私保护方案&#xff1a;Qwen3-32B本地推理的医疗数据处理 1. 为什么医疗数据需要本地化AI处理 去年参与一个医疗数据分析项目时&#xff0c;我首次意识到数据隐私的严峻性。客户提供的患者诊疗记录包含身份证号、住址和病史等敏感信息&#xff0c;而团队最初考虑使…...

别再硬啃理论了!用STM32F407+OpenMV做个会‘看’会‘动’的小车,代码全开源

从零打造会“思考”的智能小车&#xff1a;STM32F407OpenMV实战指南 当你第一次看到这个小车精准识别路标并自主避障时&#xff0c;那种成就感会瞬间点燃你对嵌入式开发的热情。这不是又一套枯燥的理论教程&#xff0c;而是一个真实可用的智能小车项目——它能用摄像头“看”世…...