Understanding the 'this' keyword
When you create a function, a keyword named this is created (behind the scenes) which is linked to the object the function runs on. In other words, this is available to the scope of its function, but it is a reference to the object whose function is a property or method.
Let’s take a look at the cody object from the previous article:
Example: sample98.html
<!DOCTYPE html><html lang="en"><body><script>
var cody = {
living: true,
age: 23,
gender: 'male',
getGender: function () { return cody.gender; }
};
console.log(cody.getGender()); // Logs 'male'.
</script></body></html>
Notice how inside the getGender function we access gender## using dot notation (cody.gender) on the cody object itself # Attributes. The cody object can be accessed using the this override because this points to the cody object.
<!DOCTYPE html><html lang="en"><body><script>
var cody = {
living: true,
age: 23,
gender: 'male',
getGender: function () { return this.gender; }
};
console.log(cody.getGender()); // Logs 'male'.
</script></body></html>
used in this.gender simply refers to the cody object on which the function is operated.
The topic of
this may be confusing, but it isn't. Remember that, in general, this is used inside a function to refer to the object contained by the function, rather than the function itself (exceptions include using the new keyword or call() and apply()).
this looks and behaves like any other variable, except that you cannot modify it.
arguments and any arguments sent to the function, this is a keyword (not a property) in the calling/activation object.
this determined?
The value of this passed to all functions is based on the context in which the function is called at runtime. Pay attention here, because it's one of those quirks you just need to remember.
myObject object in the following code example is assigned a property named sayFoo, which points to the sayFoo function. When the sayFoo function is called from the global scope, this references the window object. When called as a method of myObject, this refers to myObject.
myObject has a property named foo, that property is used.
<!DOCTYPE html><html lang="en"><body><script>
var foo = 'foo';
var myObject = { foo: 'I am myObject.foo' };
var sayFoo = function () {
console.log(this['foo']);
};
// Give myObject a sayFoo property and have it point to the sayFoo function.
myObject.sayFoo = sayFoo;
myObject.sayFoo(); // Logs 'I am myObject.foo'.
sayFoo(); // Logs 'foo'.
</script></body></html>
this is based on the context in which the function is called. Consider myObject.sayFoo and sayFoo both point to the same function. However, depending on where (context) sayFoo() is called, the value of this will differ.
window).
<!DOCTYPE html><html lang="en"><body><script>
window.foo = 'foo';
window.myObject = { foo: 'I am myObject.foo' };
window.sayFoo = function () {
console.log(this.foo);
};
window.myObject.sayFoo = window.sayFoo;
window.myObject.sayFoo();
window.sayFoo();
</script></body></html>
All variables except
this and arguments follow lexical scope
this Keyword refers to the header object in the nested function
You may be wondering what happens when this is used inside a function that is contained within another function. The bad news is that in ECMA 3, this got lost and referenced the header object (the window object in the browser) instead of the object where the function is defined.
this in func2 and func3 is lost and instead of pointing to myObject header object.
<!DOCTYPE html><html lang="en"><body><script>
var myObject = {
func1: function () {
console.log(this); // Logs myObject.
var func2 = function () {
console.log(this) // Logs window, and will do so from this point on.
var func3 = function () {
console.log(this); // Logs window, as it’s the head object.
} ();
} ();
}
}
myObject.func1();
</script></body></html>
Consider the next example and what happens when you pass an anonymous function to
foo.func1. When an anonymous function is called inside foo.func1 (a function within a function), the this value inside the anonymous function will be a reference to the head object.
<!DOCTYPE html><html lang="en"><body><script>
var foo = {
func1: function (bar) {
bar(); // Logs window, not foo.
console.log(this); // The this keyword here will be a reference to the foo object.
}
}
foo.func1(function () { console.log(this) });
</script></body></html>
this value will always be a reference to the head object when its host function is wrapped inside another function or called in the context of another function (again, this Fixed in ECMAScript 5)).
Use scope chain to solve the problem of nested functions
So that the
this value is not lost, you can simply use a scope chain to keep a reference to this in the parent function. The following example demonstrates how using a variable named that and leveraging its scope we can better track the function context.
<!DOCTYPE html><html lang="en"><body><script>
var myObject = {
myProperty: 'I can see the light',
myMethod : function(){
var that = this; // Store a reference to this (myObject) in myMethod scope.
var helperFunction = function() { // Child function.
// Logs 'I can see the light' via scope chain because that = this.
console.log(that.myProperty); // Logs 'I can see the light'.
console.log(this); // Logs window object, if we don't use "that".
}();
}
}
myObject.myMethod(); // Invoke myMethod.
</script></body></html>
使用 call() 或 apply() 控制 this 的值
this 的值通常由调用函数的上下文确定（除非使用 new 关键字，稍后会详细介绍），但您可以使用 this 的值>apply() 或 call() 来定义调用函数时 this 指向什么对象。使用这些方法就像在说：“嘿，调用 X 函数，但告诉该函数使用 Z 对象作为 this 的值。”通过这样做，JavaScript 确定 this 值的默认方式将被覆盖。
在下一个示例中，我们创建一个对象和一个函数。然后我们通过 call() 调用该函数，以便函数内 this 的值使用 myObject 作为其上下文。 myFunction 函数内的语句将使用属性填充 myObject，而不是填充头对象。我们更改了 this （在 myFunction 内部）引用的对象。
示例：sample105.html
<!DOCTYPE html><html lang="en"><body><script>
var myObject = {};
var myFunction = function (param1, param2) {
// Set via call(), 'this' points to myObject when function is invoked.
this.foo = param1;
this.bar = param2;
console.log(this) // Logs Object {foo = 'foo', bar = 'bar'}
};
myFunction.call(myObject, 'foo', 'bar'); // Invoke function, set this value to myObject.
console.log(myObject) // Logs Object {foo = 'foo', bar = 'bar'}
</script></body></html>
在前面的示例中，我们使用了 call()，但也可以使用 apply()。两者之间的区别在于函数参数的传递方式。使用 call()，参数只是逗号分隔的值。使用 apply()，参数值在数组内部传递，如以下示例所示。
示例：sample106.html
<!DOCTYPE html><html lang="en"><body><script>
var myObject = {};
var myFunction = function (param1, param2) {
// Set via apply(), this points to myObject when function is invoked.
this.foo = param1;
this.bar = param2;
console.log(this) // Logs Object {foo = 'foo', bar = 'bar'}
};
myFunction.apply(myObject, ['foo', 'bar']); // Invoke function, set this value.
console.log(myObject) // Logs Object {foo = 'foo', bar = 'bar'}
</script></body></html>
这里您需要学习的是，您可以覆盖 JavaScript 在函数作用域中确定 this 值的默认方式。
在用户定义的构造函数中使用 this 关键字
当使用 new 关键字调用函数时，构造函数中声明的 this 的值指的是实例本身。换句话说：在构造函数中，我们可以在实际创建对象之前通过 this 来利用该对象。在这种情况下， this 的默认值的更改方式类似于使用 call() 或 apply()。
在下面的示例中，我们设置了一个 Person 构造函数，该函数使用 this 来引用正在创建的对象。当创建 Person 的实例时，this.name 将引用新创建的对象，并在新对象中放置一个名为 name 的属性，并将参数 (name) 中的值传递给构造函数。
示例：sample107.html
<!DOCTYPE html><html lang="en"><body><script>
var Person = function (name) {
this.name = name || 'john doe'; // this will refer to the instance created.
}
var cody = new Person('Cody Lindley'); // Create an instance based on the Person constructor.
console.log(cody.name); // Logs 'Cody Lindley'.
</script></body></html>
同样，当使用 new 关键字调用构造函数时，this 指的是“将成为的对象”。如果我们没有使用 new 关键字，则 this 的值将是调用 Person 的上下文 - 在本例中为头对象。让我们看一下以下场景：
示例：sample108.html
<!DOCTYPE html><html lang="en"><body><script>
var Person = function (name) {
this.name = name || 'john doe';
}
var cody = Person('Cody Lindley'); // Notice we did not use 'new'.
console.log(cody.name); // Undefined. The value is actually set at window.name
console.log(window.name); // Logs 'Cody Lindley'.
</script></body></html>
原型方法中的关键字 this 引用构造函数实例
当在添加到构造函数 prototype 属性的函数中使用时，this 指的是调用该方法的实例。假设我们有一个自定义 Person() 构造函数。作为参数，它需要人的全名。如果我们需要访问人员的全名，我们将 whatIsMyFullName 方法添加到 Person.prototype 中，以便所有 Person 实例继承该方法。当使用 this 时，该方法可以引用调用它的实例（以及它的属性）。
这里我演示了创建两个Person对象（cody和lisa）以及继承的whatIsMyFullName方法，其中包含this关键字来访问实例。
示例：sample109.html
<!DOCTYPE html><html lang="en"><body><script>
var Person = function (x) {
if (x) { this.fullName = x };
};
Person.prototype.whatIsMyFullName = function () {
return this.fullName; // 'this' refers to the instance created from Person()
}
var cody = new Person('cody lindley');
var lisa = new Person('lisa lindley');
// Call the inherited whatIsMyFullName method, which uses this to refer to the instance.
console.log(cody.whatIsMyFullName(), lisa.whatIsMyFullName());
/* The prototype chain is still in effect, so if the instance does not have a fullName property, it will look for it in the prototype chain. Next, we add a fullName property to both the Person prototype and the Object prototype. See the notes that follow this sample. */
Object.prototype.fullName = 'John Doe';
var john = new Person(); // No argument is passed so fullName is not added to the instance.
console.log(john.whatIsMyFullName()); // Logs 'John Doe'.
</script></body></html>
结论
这里要带走的概念是 that 关键字 this 用于在 prototype 对象中包含的方法内部使用时引用实例。如果实例不包含该属性，则开始查找原型。
如果 this 指向的实例或对象不包含所引用的属性，则应用适用于任何属性查找的相同规则，并且将在原型链上“查找”该属性。因此，在我们的示例中，如果 fullName 属性未包含在我们的实例中，则将在 Person.prototype.fullName 中查找 fullName 属性，然后在 Object.prototype.fullName 中查找。
The above is the detailed content of Understanding the 'this' keyword. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1663
14
1419
52
1313
25
1263
29
1237
24
Demystifying JavaScript: What It Does and Why It Matters
Apr 09, 2025 am 12:07 AM
JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.
The Evolution of JavaScript: Current Trends and Future Prospects
Apr 10, 2025 am 09:33 AM
The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.
JavaScript Engines: Comparing Implementations
Apr 13, 2025 am 12:05 AM
Different JavaScript engines have different effects when parsing and executing JavaScript code, because the implementation principles and optimization strategies of each engine differ. 1. Lexical analysis: convert source code into lexical unit. 2. Grammar analysis: Generate an abstract syntax tree. 3. Optimization and compilation: Generate machine code through the JIT compiler. 4. Execute: Run the machine code. V8 engine optimizes through instant compilation and hidden class, SpiderMonkey uses a type inference system, resulting in different performance performance on the same code.
JavaScript: Exploring the Versatility of a Web Language
Apr 11, 2025 am 12:01 AM
JavaScript is the core language of modern web development and is widely used for its diversity and flexibility. 1) Front-end development: build dynamic web pages and single-page applications through DOM operations and modern frameworks (such as React, Vue.js, Angular). 2) Server-side development: Node.js uses a non-blocking I/O model to handle high concurrency and real-time applications. 3) Mobile and desktop application development: cross-platform development is realized through ReactNative and Electron to improve development efficiency.
Python vs. JavaScript: The Learning Curve and Ease of Use
Apr 16, 2025 am 12:12 AM
Python is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.
How to Build a Multi-Tenant SaaS Application with Next.js (Frontend Integration)
Apr 11, 2025 am 08:22 AM
This article demonstrates frontend integration with a backend secured by Permit, building a functional EdTech SaaS application using Next.js. The frontend fetches user permissions to control UI visibility and ensures API requests adhere to role-base
From C/C to JavaScript: How It All Works
Apr 14, 2025 am 12:05 AM
The shift from C/C to JavaScript requires adapting to dynamic typing, garbage collection and asynchronous programming. 1) C/C is a statically typed language that requires manual memory management, while JavaScript is dynamically typed and garbage collection is automatically processed. 2) C/C needs to be compiled into machine code, while JavaScript is an interpreted language. 3) JavaScript introduces concepts such as closures, prototype chains and Promise, which enhances flexibility and asynchronous programming capabilities.
Building a Multi-Tenant SaaS Application with Next.js (Backend Integration)
Apr 11, 2025 am 08:23 AM
I built a functional multi-tenant SaaS application (an EdTech app) with your everyday tech tool and you can do the same. First, what’s a multi-tenant SaaS application? Multi-tenant SaaS applications let you serve multiple customers from a sing
