为什么“ this”和“ prototype”在构造函数与实例上的行为不同？

Question

I'm trying to understand why this and prototype behave differently in the constructor vs. the new instance. In the following code Aircraft.range returns undefined. I can't understand why it doesn't return 2,000 like the new instance.

 function Aircraft() { this.range = '2,000 Km'; } let mustang = new Aircraft(); console.log('Aircraft.range ', Aircraft.range); console.log('mustang.range ', mustang.range); 

This attempt using prototype produces the same result.

 function Aircraft() {} Aircraft.prototype.range = '2,000 Km'; let mustang = new Aircraft(); console.log(Aircraft.range); console.log(mustang.range); 

**** Update ****

I've read many articles on prototypes and instances but theory only goes so far. This is a specific question used to work out the mechanics of these ideas. The answers I received helped me understand this concept better than a dozen articles talking about theory. I'm sure that these answers will help other people trying to learn the fundamentals of Javascript.

Answer 1

Here's a simple explanation for all three cases:

• this.range means that range is a property of the created instance only.
• Aircraft.prototype.range means that range is a property of all instances you'll create because it's defined in the constructor's prototype.
• Aircraft.range means that range is a property of the constructor (because functions are objects) and is not related to instances. Instances can only access that property by using this.constructor.range .

Answer 2

Something that really helped me understand this was understanding exactly what the new keyword does.

new Aircraft means:

1. create an object (" {} ")
2. call the Aircraft function with the object as this (setting .range on that object to "2,000 Km"
3. set the prototype of that object to Aircraft.prototype

You could sort of implement it yourself like this:

function _new ( constructor ) {
    var instance = {};
    constructor.call( instance );
    instance.prototype = constructor.prototype;
    return instance;
}

_new( Aircraft ) is roughly equivalent to new Aircraft() .