箭头函数立即执行函数

时间: 2024-09-02 17:00:41 浏览: 73

JavaScript高级-this绑定规则+箭头函数

JavaScript中的`this`绑定规则是理解JavaScript面向对象编程的关键概念之一。`this`关键字在不同情况下会有不同的指向，主要取决于函数的调用方式。这里我们将深入探讨四种主要的`this`绑定规则：默认绑定、隐式绑定、显式绑定和new绑定。 1. **默认绑定**：在非严格模式下，如果函数直接被调用，`this`会指向全局对象，如浏览器环境中的`window`。在严格模式下，`this`指向`undefined`。例如： ```javascript function foo() { console.log(this); } foo(); // 在非严格模式下，输出全局对象；在严格模式下，输出undefined ``` 2. **隐式绑定**：当函数被某个对象的方法调用时，`this`会指向那个对象。这是通过对象引用来确定`this`的值。 ```javascript let obj = { foo: function() { console.log(this); } }; obj.foo(); // 输出obj对象 ``` 3. **显式绑定**：使用`call()`、`apply()`或`bind()`方法可以显式地设置`this`的值。`call()`和`apply()`会立即执行函数，而`bind()`则返回一个新函数，保持`this`的绑定。 ```javascript function foo(name) { console.log(this, name); } let obj = {}; foo.call(obj, "John"); // 输出obj对象和"John" let boundFoo = foo.bind(obj); boundFoo("Jane"); // 输出obj对象和"Jane" ``` 4. **new绑定**：当使用`new`关键字创建一个新对象并调用函数时，`this`会指向新创建的对象。这个新对象会继承函数的原型链。 ```javascript function Person(name) { this.name = name; } let person = new Person("Alice"); console.log(person.name); // 输出"Alice" ``` 除了以上规则，还有一些特殊情况： - 当`this`绑定规则冲突时，优先级如下：new绑定 > 隐式绑定 > 默认绑定 > 显式绑定（bind优先级高于apply/call） - 如果在`new`绑定中尝试使用`apply()`或`call()`，`this`仍然会指向新创建的对象，而不是传递的参数。 - 箭头函数不遵循以上`this`绑定规则，它没有自己的`this`，而是继承自父作用域的`this`值。这意味着箭头函数不能用作构造函数，也不能使用`call()`、`apply()`或`bind()`方法来改变`this`的指向。例如： ```javascript let obj = { name: "Bob", foo: function() { setTimeout(() => { console.log(this.name); // 输出"Bob"，因为箭头函数继承了foo的this }, 1000); } }; obj.foo(); ``` 在这个例子中，即使`setTimeout`是异步的，箭头函数内的`this`仍然指向`obj`，而不是全局对象。总结来说，理解JavaScript中的`this`绑定规则对于编写复杂的JavaScript代码至关重要。正确地处理`this`可以帮助我们编写更加清晰和健壮的代码。同时，箭头函数的出现提供了一种更简洁的函数定义方式，但同时也需要注意它对`this`行为的影响。

箭头函数是JavaScript中的一种简洁语法，它用于创建匿名函数，特别是在处理回调、数组方法的映射（map）、过滤（filter）等场景。箭头函数的主要特点有： 1. **简洁性**：箭头函数的定义比传统的函数表达式更短。如果函数体只有一条语句，可以省略大括号和`return`关键字。例如，`(x) => x + 1` 表示将参数 `x` 加一。 2. **没有自己的`this`**：箭头函数的`this`值是在外部作用域确定的，而不是通过函数内部来绑定。这意味着无论何时调用箭头函数，它的`this`始终指向定义时所在的上下文。 3. **不能作为构造函数**：由于`this`的特性，箭头函数不能使用`new`关键字实例化对象。

阅读全文

箭头函数立即执行函数

相关推荐

小程序中的箭头函数的具体使用

js匿名函数作为函数参数详解

axios 箭头函数立即执行

js代码-JS中各式各样的函数 3种定义形式 1种调用 箭头函数的参数括号、方法体括号、返回值

深入理解JavaScript箭头函数与Generator

JavaScript高级this绑定详解及箭头函数应用

掌握JavaScript难点：立即执行函数与闭包

深入理解ECMAScript 6的箭头函数

C#使用halcon中的箭头函数

vue click 内联箭头函数 调用window.open

求n的阶乘，封装成函数，分别使用函数表达式，匿名函数，箭头函数三种形式定义并调用，使用js写

_.some有两个参数，第二个参数不能是箭头函数

ajax请求返回的数据看不到回调函数没有执行也没报错

Javascript函数

JScript 函数大全

JavaScript立即调用的函数表达式(IIFE)解析

改变this指向的方法有哪些？有什么区别？ 关键字:数组传参 立即执行函数

在 React 中，如果你写 onClick = "this.function()"，为什么会在组件加载时立即执行函数

vue+js 如何让一个函数只执行一次

最新推荐

SL-ST 差速器3D模型 SL-ST 差速器

C语言数组操作：高度检查器编程实践

管理建模和仿真的文件

【KUKA系统变量进阶】：揭秘从理论到实践的5大关键技巧

如何使用Python编程语言创建一个具有动态爱心图案作为背景并添加文字'天天开心（高级版）'的图形界面？

基于Swift开发的嘉定单车LBS iOS应用项目解析

"互动学习：行动中的多样性与论文攻读经历"

PROTEUS符号定制指南：个性化元件创建与修改的全面攻略

https://www.lagou.com/wn/爬取该网页职位名称，薪资待遇，学历，企业类型，工作地点数据保存为CSV文件的python代码

钗头凤声乐表演的二度创作分析报告

js代码-JS中各式各样的函数 3种定义形式 1种调用箭头函数的参数括号、方法体括号、返回值

vue click 内联箭头函数调用window.open

改变this指向的方法有哪些？有什么区别？关键字:数组传参立即执行函数