Jak "poprawnie" utworzyć obiekt niestandardowy w JavaScript?

Używam tego wzoru dość często-odkryłem, że daje mi on dość dużą elastyczność, gdy tego potrzebuję. W użyciu jest raczej podobny do klas w stylu Java.

var Foo = function()
{

    var privateStaticMethod = function() {};
    var privateStaticVariable = "foo";

    var constructor = function Foo(foo, bar)
    {
        var privateMethod = function() {};
        this.publicMethod = function() {};
    };

    constructor.publicStaticMethod = function() {};

    return constructor;
}();

Używa funkcji anonimowej, która jest wywoływana podczas tworzenia, zwracając nową funkcję konstruktora. Ponieważ funkcja anonimowa jest wywoływana tylko raz, można w niej utworzyć prywatne zmienne statyczne (są one wewnątrz zamknięcia, widoczne dla innych członków klasy). Funkcją konstruktora jest zasadniczo standardowy obiekt Javascript-definiujesz prywatne atrybuty wewnątrz niego, a atrybuty publiczne są dołączane do zmiennej this.

Zasadniczo, to podejście łączy podejście Crockfordian ze standardowymi obiektami Javascript, aby stworzyć potężniejszą klasę.

Możesz go używać tak jak każdy inny obiekt Javascript:

Foo.publicStaticMethod(); //calling a static method
var test = new Foo();     //instantiation
test.publicMethod();      //calling a method

Douglas Crockford omawia ten temat obszernie w The Good Parts . Zaleca unikanie operatora new do tworzenia nowych obiektów. Zamiast tego proponuje tworzenie niestandardowych konstruktorów. Na przykład:

var mammal = function (spec) {     
   var that = {}; 
   that.get_name = function (  ) { 
      return spec.name; 
   }; 
   that.says = function (  ) { 
      return spec.saying || ''; 
   }; 
   return that; 
}; 

var myMammal = mammal({name: 'Herb'});

W Javascript funkcja jest obiektem i może być używana do konstruowania obiektów razem z operatorem new . Zgodnie z konwencją, funkcje przeznaczone do użycia jako konstruktory rozpoczynają się od wielkiej litery. Często widzisz rzeczy like:

function Person() {
   this.name = "John";
   return this;
}

var person = new Person();
alert("name: " + person.name);**

W przypadku, gdy zapomnisz użyć operatora new podczas tworzenia instancji nowego obiektu, otrzymasz zwykłe wywołanie funkcji, a to jest powiązane z obiektem globalnym zamiast z nowym obiektem.

Aby kontynuować z odpowiedź bobince

W es6 możesz teraz utworzyć class

Więc teraz możesz zrobić:

class Shape {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    toString() {
        return `Shape at ${this.x}, ${this.y}`;
    }
}

Więc rozciągnij na okrąg (tak jak w drugiej odpowiedzi) możesz zrobić:

class Circle extends Shape {
    constructor(x, y, r) {
        super(x, y);
        this.r = r;
    }

    toString() {
        let shapeString = super.toString();
        return `Circular ${shapeString} with radius ${this.r}`;
    }
}

Kończy się nieco czystszym w es6 i trochę łatwiejszym do odczytania.

Oto dobry przykład tego w działaniu:

class Shape {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return `Shape at ${this.x}, ${this.y}`;
  }
}

class Circle extends Shape {
  constructor(x, y, r) {
    super(x, y);
    this.r = r;
  }

  toString() {
    let shapeString = super.toString();
    return `Circular ${shapeString} with radius ${this.r}`;
  }
}

let c = new Circle(1, 2, 4);

console.log('' + c, c);

Możesz to zrobić również w ten sposób, używając struktur:

function createCounter () {
    var count = 0;

    return {
        increaseBy: function(nb) {
            count += nb;
        },
        reset: function {
            count = 0;
        }
    }
}

Wtedy:

var counter1 = createCounter();
counter1.increaseBy(4);

Kiedy używa się sztuczki zamknięcia NA "this" podczas wywoływania konstruktora, jest to w celu napisania funkcji, która może być używana jako wywołanie zwrotne przez inny obiekt, który nie chce wywoływać metody na obiekcie. Nie jest to związane z "poprawieniem zakresu".

Oto waniliowy obiekt JavaScript:

function MyThing(aParam) {
    var myPrivateVariable = "squizzitch";

    this.someProperty = aParam;
    this.useMeAsACallback = function() {
        console.log("Look, I have access to " + myPrivateVariable + "!");
    }
}

// Every MyThing will get this method for free:
MyThing.prototype.someMethod = function() {
    console.log(this.someProperty);
};

Innym sposobem byłoby http://jsfiddle.net/nnUY4 / (Nie wiem, czy tego rodzaju obsługa tworzenia obiektów i funkcji ujawniających podąża za określonym wzorcem)

// Build-Reveal

var person={
create:function(_name){ // 'constructor'
                        //  prevents direct instantiation 
                        //  but no inheritance
    return (function() {

        var name=_name||"defaultname";  // private variable

        // [some private functions]

        function getName(){
            return name;
        }

        function setName(_name){
            name=_name;
        }

        return {    // revealed functions
            getName:getName,    
            setName:setName
        }
    })();
   }
  }

  // … no (instantiated) person so far …

  var p=person.create(); // name will be set to 'defaultname'
  p.setName("adam");        // and overwritten
  var p2=person.create("eva"); // or provide 'constructor parameters'
  alert(p.getName()+":"+p2.getName()); // alerts "adam:eva"

Closure jest wszechstronny. bobince dobrze podsumowało podejścieprototype vs.closure podczas tworzenia obiektów. Można jednak naśladować niektóre aspekty OOP używając zamknięcia w sposób programowania funkcyjnego. Zapamiętaj funkcje są obiektami w JavaScript ; więc używaj funkcji jako obiektu w inny sposób.

function outer(outerArg) {
    return inner(innerArg) {
        return innerArg + outerArg; //the scope chain is composed of innerArg and outerArg from the outer context 
    }
}

Załóżmy, że chcesz obliczyć VAT niektórych pozycji. VAT prawdopodobnie pozostanie stabilny podczas żywotność aplikacji. Jeden sposób na zrobienie tego w OOP (pseudo kod):

public class Calculator {
    public property VAT { get; private set; }
    public Calculator(int vat) {
        this.VAT = vat;
    }
    public int Calculate(int price) {
        return price * this.VAT;
    }
}

Zasadniczo przekazujesz wartość VAT do swojego konstruktora i twoja metoda obliczania może na niej działać poprzez zamknięcie . Teraz zamiast używać klasy/konstruktora, Przekaż swój VAT jako argument do funkcji. Ponieważ jedyne, co Cię interesuje, to samo obliczenie, zwraca nową funkcję, która jest metodą obliczania:

function calculator(vat) {
    return function(item) {
        return item * vat;
    }
}
var calculate = calculator(1.10);
var jsBook = 100; //100$
calculate(jsBook); //110

W Twoim projekcie określ wartości najwyższego poziomu, które są dobre kandydat co to jest VAT do obliczenia. Z reguły za każdym razem, gdy przekazujesz te same argumenty dalej i dalej, istnieje sposób na poprawę go za pomocą zamknięcia. Nie ma potrzeby tworzenia tradycyjnych obiektów.

Https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures

Tworzenie obiektu

Najprostszym sposobem tworzenia obiektu w JavaScript jest użycie następującej składni:

var test = {
  a : 5,
  b : 10,
  f : function(c) {
    return this.a + this.b + c;
  }
}

console.log(test);
console.log(test.f(3));

To świetnie sprawdza się przy przechowywaniu danych w uporządkowany sposób.

function Test(a, b) {
  this.a = a;
  this.b = b;
  this.f = function(c) {
return this.a + this.b + c;
  };
}

var test = new Test(5, 10);
console.log(test);
console.log(test.f(3));

To pozwala na tworzenie wielu obiektów, które mają ten sam "plan", podobny do tego, jak używasz klas w np. Java.

Można to jednak zrobić bardziej efektywnie, używając prototypu.

Gdy różne instancje funkcji mają te same metody lub właściwości, można przenieść je do prototypu tego obiektu. W ten sposób każda instancja funkcji ma dostęp do tej metody lub właściwości, ale nie musi być duplikowana dla każdej instancji.

W naszym przypadku sensowne jest przeniesienie metody f do prototypu :

function Test(a, b) {
  this.a = a;
  this.b = b;
}

Test.prototype.f = function(c) {
  return this.a + this.b + c;
};

var test = new Test(5, 10);
console.log(test);
console.log(test.f(3));

Spadek

B.prototype = Object.create(A.prototype);
B.prototype.constructor = B;

To jest podobne do robienia tego:

B.prototype = new A();

Główna różnica między nimi polega na tym, że konstruktor A nie jest uruchamiany przy użyciu Object.create, który jest bardziej intuicyjny i bardziej podobny do dziedziczenia opartego na klasach.

Zawsze możesz wybrać opcjonalne uruchomienie konstruktora A podczas tworzenia nowej instancji B przez dodanie jej do konstruktora B:

function B(arg1, arg2) {
    A(arg1, arg2); // This is optional
}

Jeśli chcesz przekazać wszystkie argumenty B do A, możesz również użyć Function.prototype.apply() :

function B() {
    A.apply(this, arguments); // This is optional
}

Jeśli chcesz mieszać inny obiekt do łańcucha konstruktora B, możesz połączyć Object.create z Object.assign :

B.prototype = Object.assign(Object.create(A.prototype), mixin.prototype);
B.prototype.constructor = B;

Demo

function A(name) {
  this.name = name;
}

A.prototype = Object.create(Object.prototype);
A.prototype.constructor = A;

function B() {
  A.apply(this, arguments);
  this.street = "Downing Street 10";
}

B.prototype = Object.create(A.prototype);
B.prototype.constructor = B;

function mixin() {

}

mixin.prototype = Object.create(Object.prototype);
mixin.prototype.constructor = mixin;

mixin.prototype.getProperties = function() {
  return {
    name: this.name,
    address: this.street,
    year: this.year
  };
};

function C() {
  B.apply(this, arguments);
  this.year = "2018"
}

C.prototype = Object.assign(Object.create(B.prototype), mixin.prototype);
C.prototype.constructor = C;

var instance = new C("Frank");
console.log(instance);
console.log(instance.getProperties());

Uwaga

Object.create można bezpiecznie używać w każdej nowoczesnej przeglądarce, w tym IE9+. Object.assign Nie działa w żadnej wersji IE ani w niektórych przeglądarkach mobilnych. Zaleca się polyfill Object.create i / lub Object.assign jeśli chcesz ich używać i wspierać przeglądarki, które ich nie implementują.

Możesz znaleźć polyfill dla Object.create tutaj i jeden dla Object.assign tutaj .

Oprócz zaakceptowanej odpowiedzi z 2009 roku. Jeśli można kierować nowoczesne przeglądarki, można skorzystać z obiektu .defineProperty .

Obiekt.metoda defineProperty() definiuje nową właściwość bezpośrednio na obiekt lub modyfikuje istniejącą właściwość obiektu i zwraca obiekt. Źródło: Mozilla

var Foo = (function () {
    function Foo() {
        this._bar = false;
    }
    Object.defineProperty(Foo.prototype, "bar", {
        get: function () {
            return this._bar;
        },
        set: function (theBar) {
            this._bar = theBar;
        },
        enumerable: true,
        configurable: true
    });
    Foo.prototype.toTest = function () {
        alert("my value is " + this.bar);
    };
    return Foo;
}());

// test instance
var test = new Foo();
test.bar = true;
test.toTest();

Możesz również spróbować tego

    function Person(obj) {
    'use strict';
    if (typeof obj === "undefined") {
        this.name = "Bob";
        this.age = 32;
        this.company = "Facebook";
    } else {
        this.name = obj.name;
        this.age = obj.age;
        this.company = obj.company;
    }

}

Person.prototype.print = function () {
    'use strict';
    console.log("Name: " + this.name + " Age : " + this.age + " Company : " + this.company);
};

var p1 = new Person({name: "Alex", age: 23, company: "Google"});
p1.print();

Wzór, Który Dobrze Mi Służy

var Klass = function Klass() {
    var thus = this;
    var somePublicVariable = x
      , somePublicVariable2 = x
      ;
    var somePrivateVariable = x
      , somePrivateVariable2 = x
      ;

    var privateMethod = (function p() {...}).bind(this);

    function publicMethod() {...}

    // export precepts
    this.var1 = somePublicVariable;
    this.method = publicMethod;

    return this;
};

Po pierwsze, możesz zmienić preferencje dodawania metod do instancji zamiast obiektu prototype konstruktora. Prawie zawsze deklaruję metody wewnątrz konstruktora, ponieważ bardzo często używam konstruktora do celów związanych z dziedziczeniem i dekoratorami.

Oto jak decyduję, gdzie są wypisywane deklaracje:

• nigdy nie deklaruj metody bezpośrednio w obiekcie context (this)
• niech var deklaracje mają pierwszeństwo przed function deklaracje
• niech prymitywy mają pierwszeństwo przed obiektami ({} i [])
• niech public deklaracje mają pierwszeństwo przed private deklaracje
• preferuj Function.prototype.bind ponad thus, self, vm, etc
• unikaj deklarowania klasy w ramach innej klasy, chyba że:
  • powinno być oczywiste, że te dwa są nierozłączne
  • Klasa wewnętrzna implementuje polecenie Wzór
  • Klasa wewnętrzna implementuje wzorzec Singletona
  • Klasa wewnętrzna implementuje wzorzec stanu
  Klasa wewnętrzna implementuje inny wzorzec projektowy, który gwarantuje to]}
• zawsze zwracaj this zzakresu leksykalnego przestrzeni zamknięcia.

Oto dlaczego pomagają:

var Super = function Super() {
    ...
    this.inherited = true;
    ...
};
var Klass = function Klass() {
    ...
    // export precepts
    Super.apply(this);  // extends this with property `inherited`
    ...
};

var Model = function Model(options) {
    var options = options || {};

    this.id = options.id || this.id || -1;
    this.string = options.string || this.string || "";
    // ...

    return this;
};
var model = new Model({...});
var updated = Model.call(model, { string: 'modified' });
(model === updated === true);  // > true

var Singleton = new (function Singleton() {
    var INSTANCE = null;

    return function Klass() {
        ...
        // export precepts
        ...

        if (!INSTANCE) INSTANCE = this;
        return INSTANCE;
    };
})();
var a = new Singleton();
var b = new Singleton();
(a === b === true);  // > true

Jak widzisz, naprawdę nie mam potrzeby thus ponieważ ja wolę Function.prototype.bind (lub .call lub .apply) nad thus. W naszej klasie Singleton, nawet nie nazwaliśmy jej thus, ponieważ INSTANCE przekazuje więcej informacji. Dla Model, zwracamy this tak, że możemy wywołać Konstruktor używając .call, aby zwrócić instancję, którą do niego przekazaliśmy. Redundantnie przypisaliśmy go do zmiennej updated, choć jest przydatny w innych scenariuszach.

Obok, wolę konstruowanie obiektów literałów za pomocą słowa kluczowego new {nawiasy}:

var klass = new (function Klass(Base) {
    ...
    // export precepts
    Base.apply(this);  //
    this.override = x;
    ...
})(Super);

var klass = Super.apply({
    override: x
});

Jak widzisz, ten ostatni nie ma możliwości nadpisania właściwości "override" swojej superklasy.

Jeśli dodam metody do obiektu prototype klasy, preferuję obiekt dosłowny -- ze słowem kluczowym new lub bez niego:

Klass.prototype = new Super();
// OR
Klass.prototype = new (function Base() {
    ...
    // export precepts
    Base.apply(this);
    ...
})(Super);
// OR
Klass.prototype = Super.apply({...});
// OR
Klass.prototype = {
    method: function m() {...}
};

Klass.prototype.method = function m() {...};

Chciałbym wspomnieć, że możemy użyć a Title lub A String do zadeklarowania obiektu.
Istnieją różne sposoby na wywołanie każdego z nich. Patrz poniżej:

var test = {

  useTitle : "Here we use 'a Title' to declare an Object",
  'useString': "Here we use 'a String' to declare an Object",
  
  onTitle : function() {
    return this.useTitle;
  },
  
  onString : function(type) {
    return this[type];
  }
  
}

console.log(test.onTitle());
console.log(test.onString('useString'));

Zasadniczo nie ma pojęcia o klasie w JS, więc używamy funkcji jako konstruktora klasy, który jest istotny z istniejącymi wzorami projektowymi.

//Constructor Pattern
function Person(name, age, job){
 this.name = name;
 this.age = age;
 this.job = job;
 this.doSomething = function(){
    alert('I am Happy');
}
}

Do tej pory JS nie ma pojęcia, że chcesz utworzyć obiekt, więc nadchodzi nowe słowo kluczowe.

var person1 = new Person('Arv', 30, 'Software');
person1.name //Arv

Ref: Professional JS for web developers-Nik Z

var Person = function (lastname, age, job){
this.name = name;
this.age = age;
this.job = job;
this.changeName = function(name){
this.lastname = name;
}
}
var myWorker = new Person('Adeola', 23, 'Web Developer');
myWorker.changeName('Timmy');

console.log("New Worker" + myWorker.lastname);