From ce6e405048b547f80bf8c77502d922abd16dd63e Mon Sep 17 00:00:00 2001 From: dekr1sh Date: Wed, 26 Feb 2025 21:54:30 +0530 Subject: [PATCH 1/3] Clarify prototype inheritance and Object.setPrototypeOf() usage --- .../objects_and_object_constructors.md | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/javascript/organizing_your_javascript_code/objects_and_object_constructors.md b/javascript/organizing_your_javascript_code/objects_and_object_constructors.md index 375e9908b11..d10c5726cf7 100644 --- a/javascript/organizing_your_javascript_code/objects_and_object_constructors.md +++ b/javascript/organizing_your_javascript_code/objects_and_object_constructors.md @@ -262,7 +262,9 @@ Note: #### Recommended method for prototypal inheritance -Now, how do you utilize Prototypal Inheritance? What do you need to do to use it? Just as we use `Object.getPrototypeOf()` to 'get' or view the `prototype` of an object, we can use `Object.setPrototypeOf()` to 'set' or mutate it. Let's see how it works by adding a `Person` Object Constructor to the `Player` example, and making `Player` inherit from `Person`! +Now, how do you utilize Prototypal Inheritance? What do you need to do to use it? Just as we use `Object.getPrototypeOf()` to 'get' or view the `prototype` of an object, +we can use `Object.setPrototypeOf()` to 'set' or mutate it. Basically, using `Object.setPrototypeOf()` to set a prototype is same as setting the prototype using objects's `[[Prototype]]` or `__proto__` property. +Let's see how it works by adding a `Person` Object Constructor to the `Player` example, and making `Player` inherit from `Person`! ```javascript function Person(name) { @@ -299,6 +301,10 @@ player2.getMarker(); // My marker is 'O' ``` From the code, we can see that we've defined a `Person` from whom a `Player` inherits properties and functions, and that the created `Player` objects are able to access both the `.sayName` and the `.getMarker` functions, in spite of them being defined on two separate `prototype` objects! This is enabled by the use of the `Object.setPrototypeOf()` function. It takes two arguments - the first is the one which inherits and the second argument is the one which you want the first argument to inherit from. This ensures that the created `Player` objects are able to access the `.sayName` and `.getMarker` functions through their prototype chain. +The same can also be achieved using: +```javascript +Player.prototype.__proto__ = Person.prototype +``` Note: @@ -310,7 +316,9 @@ A warning... this doesn't work: Player.prototype = Person.prototype; ``` -because it will set `Player.prototype` to directly refer to `Person.prototype` (i.e. not a copy), which could cause problems if you want to edit something in the future. Consider one more example: +because both `Player.prototype` and `Person.prototype` become the exact same object in memory. This means any changes made to `Player.prototype` will also affect `Person.prototype`, which is not the intended behavior. +Instead, we should set `Player.prototype` to inherit from `Person.prototype`, rather than making them the same object. +Consider one more example: ```javascript function Person(name) { From d7ab75c52d8e79c67a3fedc9904bc4e858330615 Mon Sep 17 00:00:00 2001 From: dekr1sh Date: Wed, 26 Feb 2025 22:17:58 +0530 Subject: [PATCH 2/3] Fix linting issues in newly added content --- .../objects_and_object_constructors.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/javascript/organizing_your_javascript_code/objects_and_object_constructors.md b/javascript/organizing_your_javascript_code/objects_and_object_constructors.md index d10c5726cf7..e5fcda203a0 100644 --- a/javascript/organizing_your_javascript_code/objects_and_object_constructors.md +++ b/javascript/organizing_your_javascript_code/objects_and_object_constructors.md @@ -262,7 +262,7 @@ Note: #### Recommended method for prototypal inheritance -Now, how do you utilize Prototypal Inheritance? What do you need to do to use it? Just as we use `Object.getPrototypeOf()` to 'get' or view the `prototype` of an object, +Now, how do you utilize Prototypal Inheritance? What do you need to do to use it? Just as we use `Object.getPrototypeOf()` to 'get' or view the `prototype` of an object, we can use `Object.setPrototypeOf()` to 'set' or mutate it. Basically, using `Object.setPrototypeOf()` to set a prototype is same as setting the prototype using objects's `[[Prototype]]` or `__proto__` property. Let's see how it works by adding a `Person` Object Constructor to the `Player` example, and making `Player` inherit from `Person`! @@ -301,7 +301,8 @@ player2.getMarker(); // My marker is 'O' ``` From the code, we can see that we've defined a `Person` from whom a `Player` inherits properties and functions, and that the created `Player` objects are able to access both the `.sayName` and the `.getMarker` functions, in spite of them being defined on two separate `prototype` objects! This is enabled by the use of the `Object.setPrototypeOf()` function. It takes two arguments - the first is the one which inherits and the second argument is the one which you want the first argument to inherit from. This ensures that the created `Player` objects are able to access the `.sayName` and `.getMarker` functions through their prototype chain. -The same can also be achieved using: +The same can also be achieved using: + ```javascript Player.prototype.__proto__ = Person.prototype ``` @@ -367,7 +368,7 @@ If we had used `Object.setPrototypeOf()` in this example, then we could safely e 1. You might have noticed us using the `this` keyword in object constructors and prototype methods in the examples above. 1. [JavaScript Tutorial's article on the `this` keyword](https://www.javascripttutorial.net/javascript-this/) covers how `this` changes in various situations. Pay special attention to the pitfalls mentioned in each section. -1. Read the article [[[Prototype]] vs __proto__ vs .prototype in Javascript](https://medium.com/@eamonocallaghan/prototype-vs-proto-vs-prototype-in-javascript-6758cadcbae8) +1. Read the article [[[Prototype]] vs **proto** vs .prototype in JavaScript](https://medium.com/@eamonocallaghan/prototype-vs-proto-vs-prototype-in-javascript-6758cadcbae8) From 9b8aca1989244676a5ba0b6779b02831d5c585f5 Mon Sep 17 00:00:00 2001 From: dekr1sh Date: Thu, 27 Feb 2025 01:43:40 +0530 Subject: [PATCH 3/3] Fix linting issues further --- .../objects_and_object_constructors.md | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/javascript/organizing_your_javascript_code/objects_and_object_constructors.md b/javascript/organizing_your_javascript_code/objects_and_object_constructors.md index e5fcda203a0..b66b8bb0354 100644 --- a/javascript/organizing_your_javascript_code/objects_and_object_constructors.md +++ b/javascript/organizing_your_javascript_code/objects_and_object_constructors.md @@ -262,9 +262,7 @@ Note: #### Recommended method for prototypal inheritance -Now, how do you utilize Prototypal Inheritance? What do you need to do to use it? Just as we use `Object.getPrototypeOf()` to 'get' or view the `prototype` of an object, -we can use `Object.setPrototypeOf()` to 'set' or mutate it. Basically, using `Object.setPrototypeOf()` to set a prototype is same as setting the prototype using objects's `[[Prototype]]` or `__proto__` property. -Let's see how it works by adding a `Person` Object Constructor to the `Player` example, and making `Player` inherit from `Person`! +Now, how do you utilize Prototypal Inheritance? What do you need to do to use it? Just as we use `Object.getPrototypeOf()` to 'get' or view the `prototype` of an object, we can use `Object.setPrototypeOf()` to 'set' or mutate it. Basically, using `Object.setPrototypeOf()` to set a prototype is same as setting the prototype using objects's `[[Prototype]]` or `__proto__` property. Let's see how it works by adding a `Person` Object Constructor to the `Player` example, and making `Player` inherit from `Person`! ```javascript function Person(name) { @@ -300,8 +298,7 @@ player1.getMarker(); // My marker is 'X' player2.getMarker(); // My marker is 'O' ``` -From the code, we can see that we've defined a `Person` from whom a `Player` inherits properties and functions, and that the created `Player` objects are able to access both the `.sayName` and the `.getMarker` functions, in spite of them being defined on two separate `prototype` objects! This is enabled by the use of the `Object.setPrototypeOf()` function. It takes two arguments - the first is the one which inherits and the second argument is the one which you want the first argument to inherit from. This ensures that the created `Player` objects are able to access the `.sayName` and `.getMarker` functions through their prototype chain. -The same can also be achieved using: +From the code, we can see that we've defined a `Person` from whom a `Player` inherits properties and functions, and that the created `Player` objects are able to access both the `.sayName` and the `.getMarker` functions, in spite of them being defined on two separate `prototype` objects! This is enabled by the use of the `Object.setPrototypeOf()` function. It takes two arguments - the first is the one which inherits and the second argument is the one which you want the first argument to inherit from. This ensures that the created `Player` objects are able to access the `.sayName` and `.getMarker` functions through their prototype chain. The same can also be achieved using: ```javascript Player.prototype.__proto__ = Person.prototype @@ -317,9 +314,7 @@ A warning... this doesn't work: Player.prototype = Person.prototype; ``` -because both `Player.prototype` and `Person.prototype` become the exact same object in memory. This means any changes made to `Player.prototype` will also affect `Person.prototype`, which is not the intended behavior. -Instead, we should set `Player.prototype` to inherit from `Person.prototype`, rather than making them the same object. -Consider one more example: +because both `Player.prototype` and `Person.prototype` become the exact same object in memory. This means any changes made to `Player.prototype` will also affect `Person.prototype`, which is not the intended behavior. Instead, we should set `Player.prototype` to inherit from `Person.prototype`, rather than making them the same object. Consider one more example: ```javascript function Person(name) { @@ -368,7 +363,7 @@ If we had used `Object.setPrototypeOf()` in this example, then we could safely e 1. You might have noticed us using the `this` keyword in object constructors and prototype methods in the examples above. 1. [JavaScript Tutorial's article on the `this` keyword](https://www.javascripttutorial.net/javascript-this/) covers how `this` changes in various situations. Pay special attention to the pitfalls mentioned in each section. -1. Read the article [[[Prototype]] vs **proto** vs .prototype in JavaScript](https://medium.com/@eamonocallaghan/prototype-vs-proto-vs-prototype-in-javascript-6758cadcbae8) +1. Read the article [`[[Prototype]]` vs `__proto__` vs `.prototype` in JavaScript](https://medium.com/@eamonocallaghan/prototype-vs-proto-vs-prototype-in-javascript-6758cadcbae8)