Как заставить foo (). Bake () работать как foo.bake (), используя .prototype (?) В javascript? _

Question

Пожалуйста, посмотрите на это:

foo = function() {
    document.write("Unicorn <br>");
    return this; //This should return the foo Object every single time
};

//Now when I run foo(), it should display "Unicorn" and it does

foo();

​foo.bake = function() {
    document.write("Baked! <br>");
};

foo.bake();​​​​​​​​​​​​​


​foo.prototype.bake = foo.bake;

​foo().bake();​

Когда я в первый раз запускаю foo(), он выписывает «Единорог», как и ожидалось. Затем я добавил новый метод в существующий объект foo (метод bake(), который выдает «Baked!», И он тоже работает. Затем я попытался добавить тот же метод, но на этот раз, используя .prototype и IF Я правильно понимаю, теперь foo().bake должна быть такой же функцией, как foo.bake.

Я искал много статей в StackOverflow о том, как jQuery может вести себя как объект и функция одновременно. Я прочитал и понял ответы, но они не решили мою проблему.

Мой вопрос: как я мог заставить foo().bake() работать так же, как foo.bake(). Возможно ли это?

Спасибо всем в продвинутом ._

Answer 1

Это не правильный способ использовать конструктор и экземпляр.

foo = function() {
    document.write("Unicorn <br>");
    /*
    * If foo works as a constructor, "this" refer to the instance.
    * e.g. this.name = 'Foo No.1';
    *
    * If foo works as a function, "this" refer to the current scope which 
    *  is the window object in your case .
    */
    return this; 
};

//Used as constructor
var fooInstance = new foo();

//Used as function
alert(foo() == window)       //alerts true

На самом деле вам не нужно ничего возвращать в конструкторе, единственное, что вам нужно сделать, это использовать ключевое слово new.

Так что в вашем случаеизменил последнее утверждение на: (new foo()).bake();

Answer 2

Как указывает @Grant Zhu, вы используете не конструктор foo, а функцию foo. изменение последнего оператора на: (new foo()).bake(); устраняет проблему.

Еще один способ исправить это, который я считаю очень полезным, - заставить функцию действовать как конструктор следующим образом:

Something = function() {
  if (false === (this instanceof Something)) {
    return new Something();
  }
  ...
};

Тогда Something() ведет себя точно так же, как new Something()

Я не знаю, что вы думаете об этом шаблоне, я нашел его где-то в Интернете и с тех пор использую его в своих конструкторах. Может ли кто-нибудь здесь увидеть какие-либо проблемы с этим?