<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
const pet = {
name : 'cloud',
eat : function (food){
alert(this.name + 'is' + food + 'eating')
}
}
pet.eat('rice')
//method declare
const pet2 = {
name : 'cloud',
eat2(foody){
alert(this.name + 'is' + foody + 'eating')
}
}
pet2.eat2('rice')
//different this keyword
const test = {
a: function(){
console.log(this)
},
b: () => {
console.log(this)
}
}
test.a()
test.b()
</script>
</head>
<body>
</body>
</html>### Object Methods and `this` Keyword
- **First Object (`pet`)**:
- Defines an object `pet` with a property `name` and a method `eat`. The method is defined using a function expression.
- When `eat` is invoked with `'rice'`, it alerts a message indicating what `pet` is eating. However, there's a minor typo in the string concatenation inside `alert`: spaces are missing around `'is'`. It should be corrected to `alert(this.name + ' is ' + food + ' eating')` for proper spacing in the alert message.
- The `this` keyword within `eat` correctly refers to the `pet` object, allowing access to the `name` property.
- **Second Object (`pet2`)**:
- Similar to `pet`, but `eat2` is defined using the shorthand method syntax introduced in ES6 (ECMAScript 2015).
- The shorthand syntax provides a more concise way to define methods on objects.
- Like `eat`, `eat2` also suffers from the typo in string concatenation. It should be `alert(this.name + ' is ' + foody + ' eating')`.
### Understanding `this` in Different Contexts
- **Object `test`**:
- Contains two methods, `a` and `b`. `a` is a traditional function expression, while `b` is an arrow function.
- `test.a()` logs the `test` object to the console because in a method defined with a function expression, `this` refers to the object from which the method is called.
- `test.b()`, however, logs a different value for `this`. Arrow functions do not have their own `this` context but inherit `this` from the enclosing lexical scope. In a browser environment, if this script is included directly in an HTML document, `this` within an arrow function at the global scope typically refers to the global object (`window` in browsers). Therefore, `test.b()` logs the global object, not the `test` object.
### Key Takeaways
- The `this` keyword's behavior within object methods can vary based on how the function is defined. Traditional function expressions have their own `this` context based on how the function is called, whereas arrow functions inherit `this` from their surrounding scope.
- Shorthand method syntax provides a concise way to define object methods.
- Attention to detail in string concatenation or any operation involving strings is crucial for achieving the desired output format.
### Corrections
To correct the minor issues in the script:
- Add spaces in the strings within `alert` calls to ensure proper formatting: `alert(this.name + ' is ' + food + ' eating')`.
- Understand the distinction in the behavior of `this` between traditional function expressions and arrow functions, especially when dealing with object methods and the need to access the object's properties within those methods.
'개념 > 혼자 공부하는 Javascript' 카테고리의 다른 글
| chapter 6) check undefined type (1) | 2024.12.13 |
|---|---|
| chapter 6) href of output script (0) | 2024.12.12 |
| chapter 5) callback (1) | 2024.12.10 |
| chapter 5) expansion operator (2) | 2024.12.09 |
| chapter 5) fix name conflict issue (0) | 2024.12.08 |