В чем смысл конструкции Bar.prototype = new Foo() [дубликат]

192

10 февраля 2020, 00:50

На этот вопрос уже даны ответы здесь:

Прототипное наследование (2 ответа)

Закрыт 9 месяцев назад.

Объясните пожалуйста, почему происиходит вызов функции?

Foo = function() { 
    document.write("Hello"); 
} 
 
var Bar = function() { 
    Foo.call(this); 
} 
 
Bar.prototype = new Foo();

Правильно ли я вообще понимаю этот код?

Я рассуждаю так:

1)Обычная функция foo() просто выводит "Hello"

2)В теле функции Bar() вызывается Foo() в контексте объекта Bar.prototype? Делаю подобный вывод, в виду того, что this в случае вызова функции Foo() с new должно указывать на тот объект, который является левым операндом операции присваивания (топорно, но это из наблюдений и матчасти)!

3)Ну и последнее, не понятное для меня явление. Bar.prototype это же ссылка на объект, который будет являться прототипом для объектов, созданных с помощью функции Bar()? То-есть, мы присваиваем объекту Bar.prototype новый сконструированный с помощью new объект, в теле которого единственная инструкция document.write(), вообще впервые вижу, чтобы объектах кроме свойств и "методов" были какие-либо исполняющие конструкции?

Ответьте пожалуйста на мой вопрос, правильно ли я вообще рассуждаю, хотя судя по тому, что я не понимаю, видать где-то пробел! В общем жду ответов опытных в этом вопрос програмистов, спасибо за внимание! p.s.: просьба не задавать мне вопросы, вроде "ну а ты сам как думаешь (прицендент между прочим)". Если бы я всё понимал, я бы не отнимал у вас время , уважаемые! Спасибо!

Answer 1

Пример у вас и правда странный, но давайте разберемся

Foo = function() {
    document.write("Hello");
}
Foo(); // Просто вызов функции
new Foo(); // Вернет нам экземпляр Foo, сейчас это пустой объект

Да, Foo сейчас просто функция, однако ее все еще можно вызвать с new, просто она вернет экземпляр Foo, в данном случае это просто пустой объект

Идем дальше:

var Bar = function() {
    Foo.call(this);
}

Опять же, вы верно сказали, что это просто вызов функции Foo в контексте this, но есть ньюанс, этот контекст не всегда равен экземпляру Bar, все зависит от того, как именно вызывается Bar

const Foo = function () {
  console.log(this);
  console.info('Invoke!');
}
const Bar = function() {
    Foo.call(this);
}
Bar(); // контекст глобальный и может быть как `window`, так и что-то другое
new Bar(); // контекст экземпляр Bar

Последняя строка:

Bar.prototype = new Foo();

Перезаписали прототип, сейчас это снова пустой объект, если бы там были какие-то методы/св-ва, то они были бы доступны в экземплярах Bar

Заключение:
Пример и правда странный, лучше поискать более практичные примеры или переходить на классы, которые доступны в js. Это все те же прототипы, но выглядит все более семантично, что ли https://learn.javascript.ru/es-class