JavaScript-this指向问题

crystal_iwwish 2021-11-25 18:44:30
javascript 问题 指向 javascript-this

默认值

1.1普通函数

谁调用指向谁,严格模式下没有调用者时 this 的值为 undefined

function fn() {

console.log(this);
}
fn();//输出window

1.2箭头函数

箭头函数中的 this 与普通函数完全不同,也不受调用方式的影响,事实上箭头函数中并不存在 this !箭头函数中访问的 this 不过是箭头函数所在作用域的 this 变量。

 let sayHi = function () {

console.log(this); // 该箭头函数中的 this 为函数声明环境中 this 一致
};
let user = {

name: "小明",
// 该箭头函数中的 this 为函数声明环境中 this 一致
walk: () => {

console.log(this);
},
sleep: function () {

let str = "hello";
console.log(this);
let fn = () => {

console.log(str);
console.log(this); // 该箭头函数中的 this 与 sleep 中的 this 一致
};
// 调用箭头函数
fn();
},
};
// 动态添加方法
user.sayHi = sayHi;
// 函数调用
user.sayHi();
user.sleep();
user.walk();

定义值

2.1 callcall(this,形参1,形参2...形参n)

 function sayHi() {

console.log(this);
}
let user = {

name: '小明',
age: 18
}
let student = {

name: '小红',
age: 16}
// 调用函数并指定 this 的值
sayHi.call(user); // this 值为 user
sayHi.call(student); // this 值为 student

2.2 applyapply(this,[形参1,形参2...形参n])

function counter(x, y) {

return x + y;
}
// 调用 counter 函数,并传入参数
let result = counter.apply(null, [5, 10]);
console.log(result);

2.3 bindcall(this,形参1,形参2...形参n)
bind 方法并不会调用函数,而是创建一个指定了 this 值的新函数,使用方法如下代码所示:

 // 普通函数
function sayHi() {

console.log(this);
}
let user = {

name: '小明',
age: 18
}
// 调用 bind 指定 this 的值
let sayHello = sayHi.bind(user);
// 调用使用 bind 创建的新函数
sayHello();
版权声明
本文为[crystal_iwwish]所创,转载请带上原文链接,感谢
https://blog.csdn.net/crystal_iwwish/article/details/120873761

  1. [skills with annual salary of 60W] after working for 5 years, do you really understand netty and why to use it? (deep dry goods)
  2. Pourquoi MySQL récupère - t - il fréquemment les données ibd?
  3. Tutoriels de téléchargement et d'installation MySQL
  4. In IntelliJ idea, develop a fishing and reading plug-in
  5. Talk about how to integrate SPI with spring
  6. 重学Spring系列之Swagger2.0和Swagger3.0
  7. Hadoop05【命令操作】,Java400道面试题通关宝典助你进大厂
  8. Guava Cache缓存设计原理,java基础入门
  9. Gson:GitHub 标星 18K 的 JSON 解析器,Google 出品的 Java JSON 解析器
  10. gRPC学习之六:gRPC-Gateway集成swagger,java语言程序设计与数据结构进阶版
  11. Projet Java, enregistrer la valeur de modification de la page, utilisé pour les litiges internes
  12. Déterminer si un nombre est un nombre premier - - Java
  13. Sortie 9 * 9 tableau de multiplication - Java
  14. Plusieurs façons de réinitialiser le déplacement du Groupe de consommateurs Kafka
  15. GRPC Learning six: GRPC Gateway Integrated Swagger, Java language programming and data structure Advanced Edition
  16. python数据结构:数组、列表、栈、队列及实现
  17. Gson: json Parser for github Star 18k, Java json Parser from Google
  18. hive学习笔记之二:复杂数据类型,五分钟搞懂MySQL主从复制原理
  19. hive学习笔记之一:基本数据类型,java实现分页技术详解
  20. HDU-3038-How Many Answers Are Wrong【 带权并查集 】题解,java实战项目论坛
  21. HDU 1078 FatMouse and Cheese(记忆化搜索,DP,rocketmq教程教程
  22. Principes de conception du cache Guava, Introduction à la base Java
  23. Un pantalon beige = élégant, blanc + haut de gamme, si beau cet hiver!
  24. Hadoop05 【 commande 】, Java 400 questions d'entrevue pour vous aider à entrer dans l'usine
  25. [Java multithreading] static synchronized method and synchronized (class) code block
  26. [Java multithreading] synchronized statement block
  27. [Java multithreading] synchronized synchronization method
  28. [Java multithreading] thread priority and guard thread
  29. [Java multithreading] stop the thread
  30. Several methods of [Java multithreading] thread
  31. [Java multithreading] Java multithreading skills
  32. Structure des données Python: tableaux, listes, piles, files d'attente et implémentations
  33. Re - Learning Swagger 2.0 and Swagger 3.0 of Spring Series
  34. Error editing HTML5 using webstorm
  35. 【Spring】mybatis-spring
  36. JavaScript post request returned an exception, possibly Cross - Domain request
  37. 图解 Kafka 线程模型及其设计缺陷
  38. Springboot + mybatis Plus + springsecurity + JWT implements user stateless request authentication (front and back end separation)
  39. SQL injection and XSS attack of springboot security vulnerability
  40. Docker employee readme: Why did docker lose to kubernetes?
  41. 19 high force linux commands, hurry to use them!
  42. Add data files for Oracle tablespaces or temporary tablespaces
  43. Intellij IDEA神器居然还有这些小技巧,mysql集群搭建视频
  44. IntelliJ IDEA(2019)之Web项目创建,掌门一对一java面试题
  45. InnoDB(2,如何访问Redis中的海量数据
  46. InheritableThreadLocal使用详解,java多线程面试题及答案整理
  47. How does Oracle modify the data type of a column
  48. Oracle 12C 12.1.0.1.0 management control file official document translation instructions
  49. Oracle 10g 10.2.0.1 in Oracle Linux 5.4 32bit RAC installation manual (Yimo Xiyang)
  50. Oracle 12C in Oracle Linux 6.5 64bit installation manual
  51. 一天十道Java面试题----第一天(面向对象-------》ArrayList和LinkedList)
  52. Schéma du modèle de fil Kafka et de ses défauts de conception
  53. Starting and shutting down Oracle RAC database cluster
  54. CRS_ Oracle CRS stack is already configured and will be running under init(1M)
  55. Common skills of Oracle stored procedure
  56. Check the number of CPUs, core books and threads of the Linux system
  57. Oracle de duplicated data
  58. Oracle creates unique constraints on columns that already have duplicate data
  59. JavaScript-拷贝
  60.  There is ^ [[a garbled code problem in the up and down keys in Oracle sqlplus