网站开发人员需求分析,国内无代码开发平台,怎么做网站关键词搜索,网站 提示建设中在实际应用中#xff0c;了解 this 的行为是非常重要的#xff0c;特别是在编写库或框架时#xff0c;或者当你需要在回调函数中访问特定的上下文时#xff0c;通常推荐使用箭头函数或者其他方法来确保 this 的正确指向。 在ES6中#xff0c;this 的值取决于它是如何被调用… 在实际应用中了解 this 的行为是非常重要的特别是在编写库或框架时或者当你需要在回调函数中访问特定的上下文时通常推荐使用箭头函数或者其他方法来确保 this 的正确指向。 在ES6中this 的值取决于它是如何被调用的。
this 不是一个函数或对象而是一个特殊的关键字其值在函数被调用时确定。
以下是在不同场景中 this 的值的概述
01 全局作用域中的this
在JavaScript中全局作用域指的是在代码的任何位置都可以访问的、变量和函数的范围。
具体可以这么理解当你在脚本的顶层不在任何函数或代码块内部声明一个变量或函数时它就在全局作用域中。
在全局作用域中this 指向全局对象。
在浏览器环境中全局对象是 window
在 Node.js 环境中全局对象是 global。
下面是一个在浏览器环境中演示这一点的简单例子
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptuse strict// 在全局作用域中console.log(this window); // 应该输出 true表示 this 指向 window 对象console.log(this); // 输出window对象// 定义一个全局变量var globalVar I am a global variable;// 使用 this 访问全局变量console.log(this.globalVar); // 输出 I am a global variable// 使用 window 访问全局变量console.log(window.globalVar); // 输出 I am a global variable// 定义一个函数并在全局作用域中调用它function testFunction() {console.log(this); // 在浏览器环境中输出 window 对象,use strict下输出undefined}testFunction();/script
/body
/html在这个例子中this 在全局作用域中指向 window 对象。我们通过比较 this 和 window 来验证这一点并且使用 this 和 window 来访问一个全局变量 globalVar以证明它们都可以用来访问全局作用域中的变量。
如果你在 Node.js 环境中运行代码全局对象将是 global你可以类似地测试
// 在 Node.js 的全局作用域中
console.log(this global); // 应该输出 true表示 this 指向 global 对象// 定义一个全局变量
global.globalVar I am a global variable;// 使用 this 访问全局变量
console.log(this.globalVar); // 输出 I am a global variable// 使用 global 访问全局变量
console.log(global.globalVar); // 输出 I am a global variable// 定义一个函数并在全局作用域中调用它
function testFunction() {console.log(this); // 在 Node.js 环境中输出 global 对象
}testFunction();在这个 Node.js 例子中this 在全局作用域中指向 global 对象并且我们同样使用 this 和 global 来访问一个全局变量 globalVar。
02 函数调用中的this
当一个函数不是作为对象的方法调用时也就是说它是独立调用的或者作为回调函数等被调用this 的值在非严格模式下默认为全局对象在浏览器中通常是 window而在严格模式下它是 undefined。
下面我将给出两个示例程序来演示这个行为。
首先是非严格模式下的示例
// 非严格模式
function exampleFunction() {console.log(this); // 在非严格模式下this 指向 window 对象console.log(this.globalVar); // I am a global variable
}exampleFunction();// 你可以通过检查 window 对象来验证这一点
function setGlobalVar() {window.globalVar I am a global variable;
}
setGlobalVar();
exampleFunction(); // 输出包含 globalVar 的 window 对象在这个例子中exampleFunction 不是作为任何对象下的方法调用的因此在非严格模式下this 指向 window 对象。
我们在 setGlobalVar 函数中设置了一个全局变量 globalVar然后在 exampleFunction 中通过 this 访问它证明了 this 确实指向 window。
03 对象方法中的this
当一个函数作为对象的方法被调用时this 关键字指向调用该方法的对象。下面是一个简单的示例来展示这个行为
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title03-对象方法中的this/title
/head
bodyscript// 定义一个对象它有一个方法叫做 greetconst person {name: Alice,getName: function () {console.log(this.name);}};// 调用 person 对象的 getName方法person.getName(); // 输出 Alice// getName中this指向person对象,因为getName是作为 person 的方法被调用的/script
/body
/html在这个例子中getName 函数是 person 对象的一个方法。当我们通过 person.getName() 调用这个方法时this 关键字在函数内部指向了 person 对象。因此this.name 访问的是 person 对象的 name 属性并输出了相应的信息。
04构造函数中的this
当一个函数被用作构造函数并使用 new 关键字调用时this 关键字会指向新创建的对象实例。下面是一个简单的例子来说明这个行为
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title04-构造函数中的this/title
/head
bodyscript// 定义一个构造函数 function Person(name, age) {this.name name;this.age age;// 可以添加一个方法来访问实例属性 this.greet function () {console.log(Hello, my name is ${this.name} and Im ${this.age} years old.);};}// 使用 new 关键字来调用构造函数创建一个新的对象实例 const alice new Person(Alice, 25);alice.greet(); // 输出 Hello, my name is Alice and Im 25 years old. // 验证 this 指向的是 alice 对象 console.log(alice.name); // 输出 Alice console.log(alice.age); // 输出 25 // 创建一个新的对象实例 const bob new Person(Bob, 30);bob.greet(); // 输出 Hello, my name is Bob and Im 30 years old. // 验证 this 指向的是 bob 对象 console.log(bob.name); // 输出 Bob console.log(bob.age); // 输出 30/script
/body
/html每次使用 new 关键字调用 Person 构造函数时都会创建一个新的对象实例并且 this 都会指向那个新对象。这就是为什么 alice 和 bob 有各自独立的 name 和 age 属性以及它们各自的 greet 方法。
在这个例子中Person 函数被用作构造函数因为我们使用 new 关键字来调用它。当构造函数被调用时JavaScript 会创建一个新的空对象并将这个新对象的内部链接[[Prototype]]设置为构造函数的 prototype 对象。然后构造函数中的代码执行其中 this 关键字引用新创建的对象。
因此当我们设置 this.name 和 this.age 时我们实际上是在新创建的对象上设置属性。同样this.greet 方法也是添加到新对象上的一个方法。
05箭头函数中的this
箭头函数在 JavaScript 中是一个非常重要的特性它提供了一种更简洁的函数书写方式并且它不绑定自己的 this而是继承自包围它的函数或全局作用域的 this。
这意味着在箭头函数内部this 的值是在定义箭头函数时确定的而不是在调用时确定的。
下面是一个简单的示例来说明这个行为
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title05-箭头函数中的this/title
/head
bodyscriptfunction OuterFunction() {this.value 42;// 这是一个普通函数 function innerFunction() {console.log(this.value); // 这里的 this 指向 OuterFunction 的实例 }// 这是一个箭头函数 const arrowFunction () {console.log(this.value); // 这里的 this 继承自 OuterFunction 的实例 };// 调用普通函数和箭头函数 innerFunction(); // 输出 42 arrowFunction(); // 输出 42 }const obj new OuterFunction();// 当我们在外部调用 innerFunction 时this 指向全局对象在浏览器中通常是 window // 因此以下代码会抛出一个错误因为 this.value 是 undefined obj.innerFunction(); // Uncaught TypeError: Cannot read property value of undefined // 但是箭头函数不会改变它的 this 上下文 // 因此即使我们在外部调用 arrowFunction它仍然可以访问 OuterFunction 的 this 上下文 obj.arrowFunction(); // 输出 42/script
/body
/html在OuterFunction 中定义了一个普通函数 innerFunction 和一个箭头函数 arrowFunction。
当 OuterFunction 被调用时它创建了一个新的对象实例并且 this 在 innerFunction 和 arrowFunction 中都指向这个新创建的对象。
当我们直接调用 obj.innerFunction() 时this 指向了全局对象在浏览器中是 window因此 this.value 是 undefined导致抛出一个错误。
然而当我们调用 obj.arrowFunction() 时即使我们是在外部调用的arrowFunction 内部的 this 仍然指向 OuterFunction 的实例因此可以正确地访问 value 属性。这是因为箭头函数不绑定自己的 this而是从定义它的上下文中继承 this。
TODO 嵌套函数
全局函数中的嵌套函数
对象方法中的嵌套函数
总结
场景this 的值描述全局作用域window (浏览器) 或 global (Node.js)在全局作用域中this 指向全局对象。函数调用undefined (严格模式) 或 window (非严格模式)当一个函数不是作为对象的方法调用时this 的值在非严格模式下是 window在严格模式下是 undefined。对象方法调用该方法的对象当一个函数作为对象的方法被调用时this 指向调用该方法的对象。构造函数新创建的对象当一个函数作为构造函数使用 new 关键字调用时this 指向新创建的对象。箭头函数定义时的上下文箭头函数不绑定自己的 this它继承自包围它的函数或全局作用域的 this。事件处理器调用事件处理器的对象在DOM事件处理器中this 通常指向触发事件的元素。定时器函数undefined (严格模式) 或 window (非严格模式)在 setTimeout 或 setInterval 的回调函数中this 的值在非严格模式下是 window在严格模式下是 undefined。Call, Apply, Bind指定的对象使用 call、apply 或 bind 方法可以显式地设置 this 的值。
请注意箭头函数的行为略有不同因为它们不绑定自己的 this。相反它们从定义它们的上下文继承 this。
希望这个表格能帮助你理解ES6中 this 的不同行为
在JavaScript中特别是在ES6及其之后的版本中回调函数中使用普通函数和箭头函数时this 的值可能会有所不同。这主要取决于回调函数的调用方式和上下文。以下是普通函数和箭头函数在回调中作为方法使用时 this 的区别
普通函数
当回调函数是一个普通函数时this 的值通常取决于该函数如何被调用。如果该函数是作为对象的方法被调用那么 this 将指向调用该方法的对象。如果该函数是作为回调函数被调用并且没有使用 call、apply 或 bind 方法来显式地设置 this 的值那么 this 可能会指向全局对象在浏览器中是 window或者在没有严格模式的情况下是 undefined。
例如
function Example() {this.value 5;setTimeout(function() {console.log(this.value); // this 指向全局对象或undefined严格模式}, 1000);
}const example new Example(); // 输出可能是 undefined取决于环境箭头函数
箭头函数不绑定自己的 this它继承自包围它的函数或全局作用域的 this。这意味着在箭头函数内部this 的值将始终与包围它的外部函数的 this 保持一致。
因此当回调函数是箭头函数时this 将保持外部函数的 this 值即使回调函数以不同的方式被调用。
例如
function Example() {this.value 5;setTimeout(() {console.log(this.value); // this 继承自Example函数的this所以输出5}, 1000);
}const example new Example(); // 输出 5在这个例子中即使 setTimeout 是一个全局函数并且通常会导致回调函数中的 this 指向全局对象但由于使用了箭头函数this 仍然保持了 Example 函数的上下文。
总结在回调函数中普通函数的 this 值可能会根据回调函数的调用方式而改变而箭头函数的 this 值则始终与其外部函数的 this 保持一致。因此在需要确保 this 的值始终为特定上下文时使用箭头函数通常是更安全的选择。
this不是常量, 它在程序中的不同地方会求值为不同的值。
this是面向对象编程中使用的关键字。在方法体中this求值为调用方法的对象。
this 在 标准函数 和 箭头函数 中有不同的行为。
1、标准函数中的 this
window.color red;
// 全局上下文中调用函数时,this 指向 windows
function sayColor() { console.log(this.color);
}
sayColor(); // red let o { color: blue
};
o.sayColor sayColor;
o.sayColor(); // blue 2、嵌套函数
嵌套函数普通函数内部的this是全局对象嵌套箭头函数的this是外层对象的this
注意vue中相反vue中嵌套普通函数内部的this是vue而嵌套箭头函数的this是全局对象 let o {m:function(){let self this;this o;console.log(o.m() this:,this);f(); function f(){this o;self o;console.log(o.m.f() this:,this);}const f2 (){console.log(o.m.f2() this:,this);}f2();const f3 (function(){console.log(o.m.f3() this:,this);}).bind(this);f3();}
}
o.m();
console.log(o);2、箭头函数中的this
window.color red;
let sayColor () console.log(this.color);
sayColor(); // red let o { color: blue
};
o.sayColor sayColor;
o.sayColor(); // red
