Javascript - Как вызвать анонимный метод в качестве переменной и получить доступ к его свойствам и методам?

Question

Я читал, что мы можем вызывать анонимную функцию как переменную. Однако я пытаюсь это сделать и в дополнение к этому хочу получить доступ к его свойствам и методам. Вот мой код

var cooking = function(){ 
     this.dessert = "Ice Cream"; 
     this.numberOfPortions = 20; 
     this.doubleLunch = function(){this.numberOfPortions = 40; 
      document.write(this.numberOfPortions);}; 
     }; 

document.write(cooking.dessert); 

Но ничего не получаю. Можете ли вы сказать мне, что я делаю неправильно? Thanks

Answer 1

cooking - это функция. Когда вы назовете это, он определит ряд свойств на любом this.

Структура подразумевает, что она предназначена для использования в качестве функции-конструктора, поэтому вы должны создать экземпляр с помощью ключевого слова new.

Тогда вы можете взаимодействовать с экземпляром.

var meal = new cooking(); 
document.write(meal.dessert); 

NB: Конвенция предписывает, что функции конструктора (и только функции конструктора) должны быть названы, начиная с заглавной первой буквой, так что вы должны переименовать его в кулинарию.

Answer 2

this ссылается на себя, когда функция вызывается как конструктор, который вы можете использовать, используя выражение, вызываемое сразу же (IIFE).

var cooking = (function() { 
    return new function() { 
     this.dessert = "Ice Cream"; 
     this.numberOfPortions = 20; 
     this.doubleLunch = function() { 
      this.numberOfPortions = 40; 
      document.write(this.numberOfPortions); 
     }; 
    } 
})(); 

document.write(cooking.dessert); 

DEMO: http://jsfiddle.net/fk4uydLc/1/

Однако, вы можете достичь того же результата с помощью простой старый объект JavaScript (POJO).

var cooking = (function() { 
    var obj = {}; 

    obj.dessert = "Ice Cream"; 
    obj.numberOfPortions = 20; 
    obj.doubleLunch = function() { 
     obj.numberOfPortions = 40; 
     document.write(obj.numberOfPortions); 
    }; 

    return obj; 
})(); 

document.write(cooking.dessert); 

DEMO: http://jsfiddle.net/vmthv1dm/1/

Если вы планируете использовать конструктор несколько раз, то подход @Quentin упомянул это путь.

function Cooking() { 
    this.dessert = "Ice Cream"; 
    this.numberOfPortions = 20; 
    this.doubleLunch = function() { 
     this.numberOfPortions = 40; 
     document.write(this.numberOfPortions); 
    }; 
} 

var cooking = new Cooking(); 

document.write(cooking.dessert); 

DEMO: http://jsfiddle.net/jsd3j46t/1/