- 
                Notifications
    You must be signed in to change notification settings 
- Fork 15.6k
          Objects and Object Constructors: Clarify prototype inheritance and Object.setPrototypeOf() usage
          #29465
        
          New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
  
    Objects and Object Constructors: Clarify prototype inheritance and Object.setPrototypeOf() usage
  
  #29465
                      Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|  | @@ -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, 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) { | ||||||
|  | @@ -298,7 +298,11 @@ 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. | ||||||
| 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 | ||||||
| ``` | ||||||
| 
      Comment on lines
    
      +301
     to 
      +305
    
   There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Personally, I don't think we should include this change with the added code example. The docs are clear it does not advise using  | ||||||
|  | ||||||
| Note: | ||||||
|  | ||||||
|  | @@ -310,7 +314,7 @@ 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: | ||||||
| There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nit for word flow 
        Suggested change
       
 | ||||||
|  | ||||||
| ```javascript | ||||||
| function Person(name) { | ||||||
|  | @@ -359,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) | ||||||
|  | ||||||
| </div> | ||||||
|  | ||||||
|  | ||||||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Small nit - some grammar but also it's technically not the exact same mechanism, but the suggested wording below keeps the same idea.