Javascript “this”关键字是如何工作的？
我注意到，对于this关键字是什么以及它如何在堆栈溢出站点的JavaScript中正确和错误地使用，似乎没有一个明确的解释 我目睹了它的一些非常奇怪的行为，但我不明白为什么会发生这种情况 这是如何工作的，何时使用？javascript中的每个执行上下文都有一个this参数，该参数由以下参数设置： 如何调用函数，包括作为对象方法、调用和应用的使用、新函数的使用 绑定的使用 从词汇上讲，对于arrow函数，它们采用外部执行上下文的这种形式 代码处于严格模式还是非严格模式 是否使用 可以使用func.call、func.apply或func.bind设置此值 默认情况下，最让初学者困惑的是，当在DOM元素上引发事件后调用侦听器时，函数的this值就是DOM元素 jQuery使得使用jQuery.proxy进行更改变得非常简单。是JavaScript中的一个关键字，用于获取代码执行的当前“上下文”。 它主要用于函数和构造函数 我建议先读一读他的文章。 这是对JavaScript中的范围链和范围链概念的极好、友好的介绍。 如果您坚持最佳实践，那么这方面的规则非常简单 规范中对此的技术说明 通过抽象操作定义： 抽象操作ResolveThisBinding[…]使用的LexicalEnvironment确定关键字this的绑定。 调用时，它将执行以下步骤： 让envRec去吧。 回来envRec.GetThisBinding。 ，并且每个都有自己的GetThisBinding方法 抽象操作查找当前的LexicalEnvironment，并通过迭代访问其[[OuterEnv]]属性来查找最近的上升环境记录，该属性具有this绑定，即HasThisBinding返回true。 此过程以三种环境记录类型之一结束 这个值通常取决于代码是否在 GetThisBinding的返回值反映了当前执行上下文的值，因此每当建立新的执行上下文时，它都会解析为一个不同的值。 当修改当前执行上下文时也会发生这种情况。 以下小节列出了可能发生这种情况的五种情况 您可以将代码示例与规范详细信息一起放入以遵循 1.脚本中的全局执行上下文 这是在顶层评估的脚本代码，例如直接在： //全球环境 console.logthis；//记录全局对象。 setTimeoutfunction{ console.logNot全局上下文； }; 在脚本的初始全局执行上下文中，对此进行评估将导致采取以下步骤： 全局环境记录envRec[…]的GetThisBinding具体方法在调用时执行以下步骤： 返回envRec。[[GlobalThisValue]]。 全局环境记录的[[GlobalThisValue]]属性始终设置为定义的主机，可通过Web上的窗口、Node.js上的全局访问该主机。 按照的步骤学习[[GlobalThisValue]]属性是如何产生的 2.中的全局执行上下文 ECMAScript 2015中引入了模块 这适用于模块，例如，当模块直接位于内部时，而不是简单的 在模块的初始全局执行上下文中，对此进行评估将导致采取以下步骤： 模块环境记录[…]的GetThisBinding具体方法在调用时执行以下步骤： 返回未定义。 没错：在模块中，这个值在全局上下文中总是未定义的Javascript “this”关键字是如何工作的？,javascript,this,Javascript,This,我注意到，对于this关键字是什么以及它如何在堆栈溢出站点的JavaScript中正确和错误地使用，似乎没有一个明确的解释 我目睹了它的一些非常奇怪的行为，但我不明白为什么会发生这种情况 这是如何工作的，何时使用？javascript中的每个执行上下文都有一个this参数，该参数由以下参数设置： 如何调用函数，包括作为对象方法、调用和应用的使用、新函数的使用 绑定的使用 从词汇上讲，对于arrow函数，它们采用外部执行上下文的这种形式 代码处于严格模式还是非严格模式 是否使用 可以使用func.
function f1()
{
return this;
}
document.write(f1()); //[object Window]
function foo() {
console.log("bar");
console.log(this);
}
foo(); // calling the function
<script>
function myFunc(){
console.log('What is this: '+this);
console.log(this);
}
myFunc();
</script>
var obj = {
name: "obj",
f: function () {
return this + ":" + this.name;
}
};
document.write(obj.f()); //[object Object]:obj
谁来帮忙？javascript中“this”最令人困惑的是，它通常不链接到您的对象，而是链接到当前的执行范围-这可能不是它的工作方式，但对我来说总是这样-有关范围的完整解释，请参阅本文。每个函数都有自己的作用域，因为JS中的所有内容都是一个对象，所以即使是函数也可以使用它将一些值存储到自身中。OOP 101告诉我们，这只适用于对象的实例。因此，每次执行一个函数时，该函数的一个新实例都具有新的含义 大多数人在尝试使用匿名闭包函数时会感到困惑，例如： (function(value) { this.value = value; $('.some-elements').each(function(elt){ elt.innerHTML = this.value; // uh oh!! possibly undefined }); })(2); 因此，在这里，在每一个内部，这并不包含你期望它从上面得到的值。因此，为了克服这个非双关语的问题，开发人员可以： this.value = value; (function(value) { var self = this; // small change self.value = value; $('.some-elements').each(function(elt){ elt.innerHTML = self.value; // phew!! == 2 }); })(2);
试试看；你会开始喜欢这种编程模式的丹尼尔，精彩的解释！在事件处理程序的情况下，这个执行上下文指针的好列表上有几个字 换句话说，JavaScript中的这一点指向运行当前函数的对象或其执行上下文，并且它始终是只读的，您无论如何都无法设置它。这样的尝试将以“分配中的左侧无效”消息结束 对于事件处理程序：内联事件处理程序，例如，重写之前和之前附加的任何其他处理程序，因此要小心，最好不要使用内联事件委派。 多亏了Zara laverdyan通过一场持不同意见的辩论启发我列出了以下例子： el.onclick=foo；//在foo-obj中 el.onclick=函数{this.style.color='fff'；}//obj el.onclick=doSomething中的函数{doSomething；}//- 窗 el.addEventListener'click'，foo，false//在foo-obj中 el.attachEvent'onclick，函数{//this}//window，所有 遵守IE： //obj //在foo-window中，但您可以 与其他语言相比，this关键字在JavaScript中的行为有所不同。在面向对象语言中，this关键字引用类的当前实例。在JavaScript中，其值由function context.function的调用上下文及其调用位置决定 一,。在全局上下文中使用时 在全局上下文中使用时，它将绑定到浏览器中的全局对象窗口
document.write(this); //[object Window]
当您在全局上下文中定义的函数中使用它时，它仍然绑定到全局对象，因为函数实际上是全局上下文的方法
function f1()
{
return this;
}
document.write(f1()); //[object Window]
function f()
{
return this;
}
document.write(window.f()); //[object Window]
var obj = {
name: "obj",
f: function () {
return this + ":" + this.name;
}
};
document.write(obj.f()); //[object Object]:obj
var obj = {
name: "obj1",
nestedobj: {
name:"nestedobj",
f: function () {
return this + ":" + this.name;
}
}
}
document.write(obj.nestedobj.f()); //[object Object]:nestedobj
var obj1 = {
name: "obj1",
}
function returnName() {
return this + ":" + this.name;
}
obj1.f = returnName; //add method to object
document.write(obj1.f()); //[object Object]:obj1
var context = "global";
var obj = {
context: "object",
method: function () {
function f() {
var context = "function";
return this + ":" +this.context;
};
return f(); //invoked without context
}
};
document.write(obj.method()); //[object Window]:global
/*********************************************************************
1. When you add variable to the function using this keyword, it
gets added to the function prototype, thus allowing all function
instances to have their own copy of the variables added.
*********************************************************************/
function functionDef()
{
this.name = "ObjDefinition";
this.getName = function(){
return this+":"+this.name;
}
}
obj1 = new functionDef();
document.write(obj1.getName() + "<br />"); //[object Object]:ObjDefinition
/*********************************************************************
2. Members explicitly added to the function protorype also behave
as above: all function instances have their own copy of the
variable added.
*********************************************************************/
functionDef.prototype.version = 1;
functionDef.prototype.getVersion = function(){
return "v"+this.version; //see how this.version refers to the
//version variable added through
//prototype
}
document.write(obj1.getVersion() + "<br />"); //v1
/*********************************************************************
3. Illustrating that the function variables added by both above
ways have their own copies across function instances
*********************************************************************/
functionDef.prototype.incrementVersion = function(){
this.version = this.version + 1;
}
var obj2 = new functionDef();
document.write(obj2.getVersion() + "<br />"); //v1
obj2.incrementVersion(); //incrementing version in obj2
//does not affect obj1 version
document.write(obj2.getVersion() + "<br />"); //v2
document.write(obj1.getVersion() + "<br />"); //v1
/*********************************************************************
4. `this` keyword refers to the immediate parent object. If you
nest the object through function prototype, then `this` inside
object refers to the nested object not the function instance
*********************************************************************/
functionDef.prototype.nestedObj = { name: 'nestedObj',
getName1 : function(){
return this+":"+this.name;
}
};
document.write(obj2.nestedObj.getName1() + "<br />"); //[object Object]:nestedObj
/*********************************************************************
5. If the method is on an object's prototype chain, `this` refers
to the object the method was called on, as if the method was on
the object.
*********************************************************************/
var ProtoObj = { fun: function () { return this.a } };
var obj3 = Object.create(ProtoObj); //creating an object setting ProtoObj
//as its prototype
obj3.a = 999; //adding instance member to obj3
document.write(obj3.fun()+"<br />");//999
//calling obj3.fun() makes
//ProtoObj.fun() to access obj3.a as
//if fun() is defined on obj3
var ProtoObj = {
fun: function () {
return this.a;
}
};
//Object.create() creates object with ProtoObj as its
//prototype and assigns it to obj3, thus making fun()
//to be the method on its prototype chain
var obj3 = Object.create(ProtoObj);
obj3.a = 999;
document.write(obj3.fun()); //999
//Notice that fun() is defined on obj3's prototype but
//`this.a` inside fun() retrieves obj3.a
(function(){}).bind(this)
function someKindOfFunction() {
this.style = 'foo';
}
function Person(name){
this.personName = name;
this.sayHello = function(){
return "Hello " + this.personName;
}
}
var person1 = new Person('Scott');
console.log(person1.sayHello()); //Hello Scott
var person2 = new Person('Hugh');
var sayHelloP2 = person2.sayHello;
console.log(sayHelloP2()); //Hello undefined
<script type="application/javascript">
function click_handler() {
alert(this); // alerts the window object
}
</script>
<button id='thebutton' onclick='click_handler()'>Click me!</button>
function foo() {
console.log("bar");
console.log(this);
}
foo(); // calling the function
<script>
function myFunc(){
console.log('What is this: '+this);
console.log(this);
}
myFunc();
</script>
var myObj = {key: "Obj"};
myObj.logThis = function () {
// I am a method
console.log(this);
}
myObj.logThis(); // myObj is logged
// continuing with the previous code snippet
var myVar = myObj.logThis;
myVar();
// logs either of window/global/undefined based on mode of operation
<body>
<button class="btn">Click Me</button>
<script>
function printMe(){
//Terminal2: this function declared inside window context so this function belongs to the window object.
console.log(this);
}
document.querySelector('.btn').addEventListener('click', function(){
//Terminal1: button context, this callback function belongs to DOM element
console.log(this);
printMe();
})
</script>
</body>
var el = document.getElementById('idOfEl');
el.addEventListener('click', function() { console.log(this) });
// the function called by addEventListener contains this as the reference to the element
// so clicking on our element would log that element itself
function Person (name) {
this.name = name;
this.sayHello = function () {
console.log ("Hello", this);
}
}
var awal = new Person("Awal");
awal.sayHello();
// In `awal.sayHello`, `this` contains the reference to the variable `awal`
function foo () { console.log (this, arguments); }
var thisArg = {myObj: "is cool"};
foo.call(thisArg, 1, 2, 3);
foo.apply(thisArg, [1,2,3])
function Car(make, model, year) {
var this = {}; // under the hood, so to speak
this.make = make;
this.model = model;
this.year = year;
return this; // under the hood
}
var mycar = new Car('Eagle', 'Talon TSi', 1993);
// ========= under the hood
var this = {};
this.make = 'Eagle';
this.model = 'Talon TSi';
this.year = 1993;
return this;
function foo (a, b) {
console.log (this, arguments);
}
var thisArg = {myObj: "even more cool now"};
var bound = foo.bind(thisArg, 1, 2);
console.log (typeof bound); // logs `function`
console.log (bound);
/* logs `function () { native code }` */
bound(); // calling the function returned by `.bind`
// logs `{myObj: "even more cool now"}, [1, 2]`
var myObj = {
hello: function () {
return "world"
},
myMethod: function () {
// copy this, variable names are case-sensitive
var that = this;
// callbacks ftw \o/
foo.bar("args", function () {
// I want to call `hello` here
this.hello(); // error
// but `this` references to `foo` damn!
// oh wait we have a backup \o/
that.hello(); // "world"
});
}
};
var person = {
firstName: "Penelope",
lastName: "Barrymore",
fullName: function () {
// We use "this" just as in the sentence above:
console.log(this.firstName + " " + this.lastName);
// We could have also written:
console.log(person.firstName + " " + person.lastName);
}
}
function foo() {
// return an arrow function
return (a) => {
// `this` here is lexically inherited from `foo()`
console.log(this.a);
};
}
var obj1 = { a: 2 };
var obj2 = { a: 3 };
var bar = foo.call(obj1);
bar.call( obj2 ); // 2, not 3!
<script type="text/javascript">
foo = "bar";
function testThis() {
this.foo = "foo";
}
console.log(this.foo); //logs "bar"
testThis();
console.log(this.foo); //logs "foo"
</script>
function Thing() {
this.things = [];
}
var thing1 = new Thing();
var thing2 = new Thing();
thing1.things.push("foo");
console.log(thing1.things); //logs ["foo"]
console.log(thing2.things); //logs []
function Listener() {
document.getElementById("foo").addEventListener("click",
this.handleClick);
}
Listener.prototype.handleClick = function (event) {
console.log(this); //logs "<div id="foo"></div>"
}
var listener = new Listener();
document.getElementById("foo").click();
<div id="foo" onclick="console.log(this);"></div>
<script type="text/javascript">
document.getElementById("foo").click(); //logs <div id="foo"...
</script>
<div class="foo bar1"></div>
<div class="foo bar2"></div>
<script type="text/javascript">
$(".foo").each(function () {
console.log(this); //logs <div class="foo...
});
$(".foo").on("click", function () {
console.log(this); //logs <div class="foo...
});
$(".foo").each(function () {
this.click();
});
</script>
function Thing () {
}
Thing.prototype.foo = "bar";
Thing.prototype.logFoo = function () {
with (this) {
console.log(foo);
foo = "foo";
}
}
var thing = new Thing();
thing.logFoo(); // logs "bar"
console.log(thing.foo); // logs "foo"
<div id="foo" onclick="console.log(this);"></div>
<script type="text/javascript">
document.getElementById("foo").click(); //logs <div id="foo"...
</script>
<div class="foo bar1"></div>
<div class="foo bar2"></div>
<script type="text/javascript">
$(".foo").each(function () {
console.log(this); //logs <div class="foo...
});
$(".foo").on("click", function () {
console.log(this); //logs <div class="foo...
});
$(".foo").each(function () {
this.click();
});
</script>
这个作用域的用法就是这样
<script type="text/javascript" language="javascript">
$('#tbleName tbody tr').each(function{
var txt='';
txt += $(this).find("td").eq(0).text();
\\same as above but synatx different
var txt1='';
txt1+=$('#tbleName tbody tr').eq(0).text();
alert(txt1)
});
</script>
$this=$'tbleName tbody tr'是相同的这是我见过的最好的解释： 此引用始终引用并保存 对象—一个奇异对象，通常用于函数或 方法，尽管它可以在全局 范围注意，当我们使用strict模式时，它保持 在全局函数和非全局函数的匿名函数中未定义 绑定到任何对象 有四种情况会让人感到困惑： 当我们传递一个将其用作回调函数的参数的方法时。 当我们使用一个内部函数时，它就是一个闭包。需要注意的是，闭包不能使用this关键字访问外部函数的this变量，因为this变量只能由函数本身访问，而不能由内部函数访问。 当依赖于此的方法跨上下文分配给变量时，在这种情况下，此方法引用的对象不是最初预期的对象。 将其与bind、apply和call方法一起使用时。
他给出了代码示例、解释和解决方案，我认为这非常有帮助。关于这方面最详细、最全面的文章可能是： 这背后的思想是理解函数调用类型在设置此值方面具有重要意义 在识别时遇到困难时，不要问自己： 这是从哪里拍的 但一定要问问自己： 如何调用该函数 对于箭头函数上下文透明的特殊情况，请自问： 在定义箭头函数的地方，该值是多少
在处理这个问题时，这种心态是正确的，它会让你免于头痛。关于如何在JavaScript中解释这个关键字，存在很多困惑。希望本文能一劳永逸地解决所有这些问题。还有更多。请仔细阅读整篇文章。事先警告一下，这篇文章很长 不管使用它的上下文是什么，它总是引用Javascript中的当前对象。但是，当前对象的内容因上下文而异。上下文可能正好是以下6项中的1项： 全局的，即所有功能之外的 内部直接非绑定函数调用，即未通过调用functionName.bind绑定的函数 通过functionName.Call和functionName.apply进行的内部间接非绑定函数调用 内部绑定函数调用，即通过调用functionName.bind绑定的函数 通过新的 内联DOM事件处理程序 下面逐一介绍了这些上下文： 全局上下文，即在所有功能之外： 在所有功能之外，即在全球范围内，当前 对象，因此其值始终为 浏览器的窗口对象 内部直接非绑定函数调用： 在直接的非绑定函数调用中 调用的函数调用将成为当前对象，因此 这个的价值。如果在没有显式当前对象的情况下调用函数，则当前对象对于非严格模式是窗口对象，对于严格模式是未定义的。中定义的任何函数或变量 全局上下文自动成为窗口对象的属性。例如，假设函数在全局上下文中定义为
function UserDefinedFunction(){
alert(this)
}
UserDefinedFunction() // displays [object Window] as it automatically gets invoked as window.UserDefinedFunction()
UserDefinedFunction() // displays undefined
window.UserDefinedFunction() // "always displays [object Window] irrespective of mode."
UserDefinedFunction() // displays [object Window] as it automatically gets invoked as window.UserDefinedFunction()
UserDefinedFunction() // displays undefined
window.UserDefinedFunction() // "always displays [object Window] irrespective of mode."
UserDefinedFunction() // displays [object Window] as it automatically gets invoked as window.UserDefinedFunction()
UserDefinedFunction() // displays undefined
window.UserDefinedFunction() // "always displays [object Window] irrespective of mode."
function UserDefinedFunction()
{
alert(this.a + "," + this.b + "," + this.c + "," + this.d)
}
var o1={
a:1,
b:2,
f:UserDefinedFunction
}
var o2={
c:3,
d:4,
f:UserDefinedFunction
}
o1.f() // Shall display 1,2,undefined,undefined
o2.f() // Shall display undefined,undefined,3,4
function UserDefinedFunction()
{
alert(this.a + "," + this.b + "," + this.c + "," + this.d)
}
var o1={
a:1,
b:2,
f:UserDefinedFunction
}
var o2={
c:3,
d:4,
f:UserDefinedFunction
}
UserDefinedFunction.call(o1) // Shall display 1,2,undefined,undefined
UserDefinedFunction.apply(o1) // Shall display 1,2,undefined,undefined
UserDefinedFunction.call(o2) // Shall display undefined,undefined,3,4
UserDefinedFunction.apply(o2) // Shall display undefined,undefined,3,4
o1.f.call(o2) // Shall display undefined,undefined,3,4
o1.f.apply(o2) // Shall display undefined,undefined,3,4
o2.f.call(o1) // Shall display 1,2,undefined,undefined
o2.f.apply(o1) // Shall display 1,2,undefined,undefined
function UserDefinedFunction()
{
alert(this.a + "," + this.b + "," + this.c + "," + this.d)
}
var o1={
a:1,
b:2,
f:UserDefinedFunction,
bf:null
}
var o2={
c:3,
d:4,
f:UserDefinedFunction,
bf:null
}
var bound1=UserDefinedFunction.bind(o1); // permanantly fixes "this" value of function "bound1" to Object o1
bound1() // Shall display 1,2,undefined,undefined
var bound2=UserDefinedFunction.bind(o2); // permanantly fixes "this" value of function "bound2" to Object o2
bound2() // Shall display undefined,undefined,3,4
var bound3=o1.f.bind(o2); // permanantly fixes "this" value of function "bound3" to Object o2
bound3() // Shall display undefined,undefined,3,4
var bound4=o2.f.bind(o1); // permanantly fixes "this" value of function "bound4" to Object o1
bound4() // Shall display 1,2,undefined,undefined
o1.bf=UserDefinedFunction.bind(o2) // permanantly fixes "this" value of function "o1.bf" to Object o2
o1.bf() // Shall display undefined,undefined,3,4
o2.bf=UserDefinedFunction.bind(o1) // permanantly fixes "this" value of function "o2.bf" to Object o1
o2.bf() // Shall display 1,2,undefined,undefined
bound1.call(o2) // Shall still display 1,2,undefined,undefined. "call" cannot alter the value of "this" for bound function
bound1.apply(o2) // Shall still display 1,2,undefined,undefined. "apply" cannot alter the value of "this" for bound function
o2.bf.call(o2) // Shall still display 1,2,undefined,undefined. "call" cannot alter the value of "this" for bound function
o2.bf.apply(o2) // Shall still display 1,2,undefined,undefined."apply" cannot alter the value of "this" for bound function
<button onclick='this.style.color=white'>Hello World</button>
<div style='width:100px;height:100px;' onclick='OnDivClick(event,this)'>Hello World</div>
function UserDefinedFunction()
{
alert(this.a + "," + this.b + "," + this.c + "," + this.d)
}
var o1={
a:1,
b:2,
f:UserDefinedFunction,
bf:null
}
var o2={
c:3,
d:4,
f:UserDefinedFunction,
bf:null
}
var bound1=UserDefinedFunction.bind(o1); // permanantly fixes "this" value of function "bound1" to Object o1
bound1() // Shall display 1,2,undefined,undefined
var bound2=UserDefinedFunction.bind(o2); // permanantly fixes "this" value of function "bound2" to Object o2
bound2() // Shall display undefined,undefined,3,4
var bound3=o1.f.bind(o2); // permanantly fixes "this" value of function "bound3" to Object o2
bound3() // Shall display undefined,undefined,3,4
var bound4=o2.f.bind(o1); // permanantly fixes "this" value of function "bound4" to Object o1
bound4() // Shall display 1,2,undefined,undefined
o1.bf=UserDefinedFunction.bind(o2) // permanantly fixes "this" value of function "o1.bf" to Object o2
o1.bf() // Shall display undefined,undefined,3,4
o2.bf=UserDefinedFunction.bind(o1) // permanantly fixes "this" value of function "o2.bf" to Object o1
o2.bf() // Shall display 1,2,undefined,undefined
bound1.call(o2) // Shall still display 1,2,undefined,undefined. "call" cannot alter the value of "this" for bound function
bound1.apply(o2) // Shall still display 1,2,undefined,undefined. "apply" cannot alter the value of "this" for bound function
o2.bf.call(o2) // Shall still display 1,2,undefined,undefined. "call" cannot alter the value of "this" for bound function
o2.bf.apply(o2) // Shall still display 1,2,undefined,undefined."apply" cannot alter the value of "this" for bound function
其值取决于执行函数的上下文。上下文可以是任何对象或全局对象，即窗口 因此，它的语义不同于传统的OOP语言。它会引起一些问题： 1.当一个函数被传递给另一个变量时，很可能是回调；二,。从类的成员方法调用闭包时
在这两种情况下，这都设置为window。在伪经典术语中，许多讲座教授“this”关键字的方式是作为类或对象构造函数实例化的对象。每次从一个类构造一个新对象时，想象一下，在后台创建并返回一个“this”对象的本地实例。我记得它是这样教的：
foo.apply(thisArg, [1,2,3])
function Car(make, model, year) {
var this = {}; // under the hood, so to speak
this.make = make;
this.model = model;
this.year = year;
return this; // under the hood
}
var mycar = new Car('Eagle', 'Talon TSi', 1993);
// ========= under the hood
var this = {};
this.make = 'Eagle';
this.model = 'Talon TSi';
this.year = 1993;
return this;
console.log(this)
我对这个问题的看法与其他答案不同，我希望这些答案会有所帮助 查看JavaScript的一种方法是查看只有一种方法可以调用function1。是的 始终为objectForThis提供一些值 对于functionObject.call，其他一切都是语法糖 因此，其他一切都可以通过它如何转换为functionObject.call来描述 如果您只调用一个函数，那么这是全局对象，在浏览器中是窗口 函数foo{ console.logthis； }
foo；//这是窗口对象要正确理解这一点，必须理解上下文和范围以及它们之间的区别 作用域：在javascript中，作用域与变量的可见性相关，作用域通过使用函数实现。了解更多有关范围的信息 上下文：上下文与对象相关。它是指函数所属的对象。当您使用JavaScript“this”关键字时，它指的是函数所属的对象。例如，在函数内部，当您说：“this.accountnumber”时，您指的是属于该函数所属对象的属性“accountnumber” 如果对象“myObj”有一个名为“getMyName”的方法，当JavaScript关键字“this”在“getMyName”中使用时，它指的是“myObj”。如果函数“getMyName”是在全局范围内执行的，那么“this”指的是窗口对象，严格模式除外 现在让我们看一些例子：
<script>
console.log('What is this: '+this);
console.log(this);
</script>
function foo() {
console.log("bar");
console.log(this);
}
foo(); // calling the function
<script>
function myFunc(){
console.log('What is this: '+this);
console.log(this);
}
myFunc();
</script>
<script>
var firstName = "Nora";
var lastName = "Zaman";
var myObj = {
firstName:"Lord",
lastName:'Baron',
printNameGetContext:function(){
console.log(firstName + " "+lastName);
console.log(this.firstName +" "+this.lastName);
return this;
}
}
var context = myObj.printNameGetContext();
console.log(context);
</script>
// continuing with the previous code snippet
var myVar = myObj.logThis;
myVar();
// logs either of window/global/undefined based on mode of operation
<body>
<button class="btn">Click Me</button>
<script>
function printMe(){
//Terminal2: this function declared inside window context so this function belongs to the window object.
console.log(this);
}
document.querySelector('.btn').addEventListener('click', function(){
//Terminal1: button context, this callback function belongs to DOM element
console.log(this);
printMe();
})
</script>
</body>
var color = 'red'; // property of window
var obj = {
color:'blue', // property of window
printColor: function(){ // property of obj, attached with obj
var self = this;
console.log('In printColor -- this.color: '+this.color);
console.log('In printColor -- self.color: '+self.color);
(function(){ // decleard inside of printColor but not property of object, it will executed on window context.
console.log(this)
console.log('In IIFE -- this.color: '+this.color);
console.log('In IIFE -- self.color: '+self.color);
})();
function nestedFunc(){// decleard inside of printColor but not property of object, it will executed on window context.
console.log('nested fun -- this.color: '+this.color);
console.log('nested fun -- self.color: '+self.color);
}
nestedFunc(); // executed on window context
return nestedFunc;
}
};
obj.printColor()(); // returned function executed on window context
</script>
说每个函数调用都有一个作用域更为正确。换句话说，Javascript中令人困惑的是，它不是函数本身的固有属性，而是函数调用方式的产物。@pointy谢谢。JS中最混乱的原因是，在所有使用较早C、C++的语言中，这不能被操纵，总是指向对象实例，而在JS中，它依赖于使用函数调用、FraseBin等调用函数时会发生变化。Sushilthis不引用函数的作用域。这将引用特定对象或可能未定义的对象，正如您所说，可以使用.call或.apply更改这些对象。函数的作用域本质上是简化的，它可以访问哪些变量，这完全取决于函数的声明位置，不能更改。@Pointy：说每个函数调用都有一个作用域更为正确。更正确的说法是，函数和块都有作用域，函数调用有上下文。作用域定义了该作用域中的代码可以使用的标识符。上下文定义了这些标识符绑定到什么
它被这个引用了。不，在ES5和之前（例如，当编写此答案时），这与范围之间没有任何关系。在ES2015又称ES6中，this和scope是以一种相当简单的方式相互关联的wrt arrow函数中的this从其封闭的作用域继承而来，但这从来没有指作用域。JS中的一切都是对象不是真的，JavaScript也有原语值，请看原语值本身似乎有一些方法，例如Stringsubstring、NumbertoString等。。因此，可能与那篇文章的命名法不同，它们的行为就像它们是对象一样，它们都是原型，即Stringsubstring实际上是：String.prototype.substring=函数{…}。如果我错了，请纠正我。this关键字与范围无关。此外，它在不是对象属性的函数中也有意义。@arunjitsingh关于这一点有两个学派。我喜欢说一切都是对象的说法，但为了方便起见，有些可以用原语表示-这并不完全是关于范围。这都是关于执行上下文的，它与范围不同。JavaScript是词汇范围的，意思是范围由代码的位置决定，但这取决于包含它的函数的调用方式，而不是该函数所在的位置。我在谷歌上搜索一些有用的相关问题**时发现了这一点，这里有一篇不错的文章*Peter Michaux主张反对使用此方法MDN概述还不错。。。对这个关键字有一个有趣的解释：我认为@supertonsky在2左右是正确的-如果myFun是从全局范围调用的，而不是作为对象上的方法调用的，那么这将是全局对象，所以问题的措辞很重要。顺便说一句，我非常喜欢使用mouseover来获得这样的答案。但是，它显示了setTimeout示例有一个windowglobal.Hi@KevinMeredith的示例。符合事实的因此，要了解超时函数中的内容，应用的不是初始全局执行上下文规则，而是输入函数代码规则。因为没有对对象（例如someObject.someMethod）调用timeout函数，所以这是timeout函数中的窗口，正如JSFIDLE所示。来自Python，可以想象我遇到第三个示例时的沮丧程度。。SMH此答案可能应该更新以反映ES2020的实际情况，即使更改只是术语。当您在全局上下文中定义的函数中使用此选项时，它仍然绑定到全局对象，因为函数实际上是全局上下文的一种方法。这是不正确的。这取决于函数的调用方式或绑定，而不是定义函数的位置。在没有基引用上下文的情况下调用任何函数都会将其默认为全局对象，或者在严格模式下保持未定义状态。@RobG-hmm可能是，但我发现：在这种情况下，此值不是由调用设置的。由于代码未处于严格模式，因此其值必须始终为对象，因此默认为全局对象。事实上，这就是为什么我认为我们可以直接调用window.f1，这意味着f1已经连接到window对象，我是说在调用之前。我是不是弄错了？我可能不是很清楚地评论你把它的设置和函数联系起来，实际上它是一种全局上下文的方法，好像它被称为window.fn，而事实并非如此。这默认为全局对象，因为调用中没有使用基引用，而不是因为函数的定义位置，所以这仍然是由函数的调用方式设置的。如果您使用window.fn显式地调用它，则将其设置为window。相同的结果，不同的处理方式-上面我已经写了“立即”这个词。。。不，你没有。请你修改一下，这样错误就可以纠正了吗？答案似乎是语义上的，因此，在错误修复之前，我无法继续阅读，因为我担心会发现错误。@TylerH在浏览器的这个页面上执行Ctrl+F以查找包含双引号的字符串immediate。我认为如果我理解错了，最好说它链接到当前执行上下文。除了ES6草稿更改，它使用了箭头函数，在外部执行上下文中解决了这个问题。除了链接到您的博客外，也许您可以更深入地研究问这些问题如何帮助他人理解this关键字？你的解释非常有效。完全消除了我的困惑。
var color = 'red'; // property of window
var obj = {
color:'blue', // property of window
printColor: function(){ // property of obj, attached with obj
var self = this;
console.log('In printColor -- this.color: '+this.color);
console.log('In printColor -- self.color: '+self.color);
(function(){ // decleard inside of printColor but not property of object, it will executed on window context.
console.log(this)
console.log('In IIFE -- this.color: '+this.color);
console.log('In IIFE -- self.color: '+self.color);
})();
function nestedFunc(){// decleard inside of printColor but not property of object, it will executed on window context.
console.log('nested fun -- this.color: '+this.color);
console.log('nested fun -- self.color: '+self.color);
}
nestedFunc(); // executed on window context
return nestedFunc;
}
};
obj.printColor()(); // returned function executed on window context
</script>