var name = 'window' function Person(name) { this.name = name this.foo1 = function () { console.log(this.name) }, this.foo2 = () => console.log(this.name), this.foo3 = function () { return function () { console.log(this.name) } }, this.foo4 = function () { return () => { console.log(this.name) } } } var person1 = new Person('person1') var person2 = new Person('person2')person1.foo1() // 结果:__6 person1.foo1.call(person2) // 结果:_7___ person1.foo2() // 结果:8 person1.foo2.call(person2) // 结果:_9_____ person1.foo3()() // 结果:_10___ person1.foo3.call(person2)() // 结果:11 person1.foo3().call(person2) // 结果:12 person1.foo4()() // 结果:13 person1.foo4.call(person2)() // 结果:_14_ person1.foo4().call(person2) // 结果:15__

时间: 2024-04-26 09:23:33 浏览: 118

javascript 中关于 this 的用法.zip

在JavaScript编程语言中，"this"关键字是一个至关重要的概念，它用于引用对象的上下文，尤其是在函数调用时。理解this的用法是提升JavaScript技能的关键。本篇将深入探讨JavaScript中的this用法，帮助你更好地掌握这个核心概念。 1. **函数调用方式与this绑定** - **默认绑定**：在全局环境中，this被绑定到全局对象，在浏览器中通常是window。例如： ```javascript function foo() { console.log(this); } foo(); // 输出全局对象 ``` - **方法调用**：当函数作为对象的方法被调用时，this被绑定到该对象。如： ```javascript const obj = { foo: function() { console.log(this); } }; obj.foo(); // 输出 `obj` ``` - **构造函数调用**：在new操作符后调用函数时，this被绑定到新创建的对象。例如： ```javascript function Person(name) { this.name = name; } let person = new Person('John'); // this指向新创建的`person`对象 ``` 2. **强制绑定：call、apply、bind** - **call()**：允许你改变函数的this值，并立即执行该函数。第一个参数是新的this值，后面是传递给函数的参数。例如： ```javascript function foo(a, b) { console.log(this, a, b); } var obj = { name: 'John' }; foo.call(obj, 1, 2); // 输出 `{ name: 'John' } 1 2` ``` - **apply()**：与call类似，但接受一个数组或类数组对象作为参数。例如： ```javascript foo.apply(obj, [1, 2]); // 输出 `{ name: 'John' } 1 2` ``` - **bind()**：创建一个新的函数，其this值被固定为传入bind的参数，并可以接收后续参数。不立即执行，可保存供以后使用： ```javascript let boundFoo = foo.bind(obj, 1); boundFoo(2); // 输出 `{ name: 'John' } 1 2` ``` 3. **隐式丢失与箭头函数** - **隐式丢失**：当函数作为回调、事件处理程序或定时器等使用时，this可能不会按预期工作，因为它会根据调用环境而非定义环境绑定。例如： ```javascript const obj = { name: 'John', foo: function() { setTimeout(function() { console.log(this); // 输出 `window` 或 `undefined`，取决于运行环境 }, 100); } }; obj.foo(); ``` - **箭头函数**：箭头函数不创建自己的this，它捕获其所在（即定义时）的作用域的this值。这意味着箭头函数不能用作构造函数，也不能使用new操作符。 4. **上下文链（原型链）与this** - 当查找对象属性时，JavaScript会沿着原型链向上搜索。然而，this并不受此影响，始终绑定到当前对象。 5. **模块和this** - 在ES6模块中，每个模块都有自己的作用域，this默认绑定到undefined。 6. **事件处理中的this** - 在HTML事件处理程序中，this会绑定到触发事件的元素。 7. **异步编程中的this** - 在Promise或async/await中，this保持在定义时的上下文中。总结起来，JavaScript中的this用法是多样的，理解其行为并学会在不同场景下正确使用this是JavaScript开发者必备的技能。通过深入学习和实践，你将能够更有效地控制代码中的对象和函数行为。

1. person1.foo1() // 结果: "person1" 2. person1.foo1.call(person2) // 结果: "person2" 3. person1.foo2() // 结果: "person1" 4. person1.foo2.call(person2) // 结果: "person1" 5. person1.foo3()() // 结果: "window" 6. person1.foo3.call(person2)() // 结果: "window" 7. person1.foo3().call(person2) // 结果: "person2" 8. person1.foo4()() // 结果: "person1" 9. person1.foo4.call(person2)() // 结果: "person2" 10. person1.foo4().call(person2) // 结果: "person1"

阅读全文

相关推荐

Javascript this 的一些学习总结

JavaScript中this详解

Javascript的this详解

JavaScript this绑定过程深入详解

JS匿名函数内部this指向问题详析

JS中this的4种绑定规则详解

JavaScript中this的全面解析及常见实例

JavaScript中几个重要的属性(this、constructor、prototype)介绍

JS 原生面经从初级到高级(可以的话，加个关注).pdf

深入理解JavaScript中的this关键字

深入理解JavaScript中的this与绑定规则

JavaScript this绑定规则解析：从默认到隐式

JavaScript深入理解：this、constructor与prototype全面解析

JavaScript深入解析：this关键字与四种绑定规则

JavaScript this绑定规则详解：默认、隐式、显式与new绑定

Spring Cloud 全面学习案例集，含多种功能示例与教程.zip

AudioStream 1.5.unitypackage

驾驭未来：Simulink中PMSM永磁同步电机控制深度解析

最新推荐

Spring Cloud 全面学习案例集，含多种功能示例与教程.zip

高清艺术文字图标资源，PNG和ICO格式免费下载

管理建模和仿真的文件

DMA技术：绕过CPU实现高效数据传输

SGM8701电压比较器如何在低功耗电池供电系统中实现高效率运作？

mui框架HTML5应用界面组件使用示例教程

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

【数据传输高速公路】：总线系统的深度解析

如何结合PID算法调整PWM信号来优化电机速度控制？请提供实现这一过程的步骤和代码示例。

Vue.js开发利器：chrome-vue-devtools插件解析