Конструкторы в объектах JavaScript

Question

Может ли классы/объекты JavaScript иметь конструкторы? Как они созданы?

Answer 1

Использование прототипов:

function Box(color) // Constructor 
{ 
    this.color = color; 
} 

Box.prototype.getColor = function() 
{ 
    return this.color; 
}; 

Скрытие "цвет" (несколько напоминает закрытую переменную):

function Box(col) 
{ 
    var color = col; 

    this.getColor = function() 
    { 
     return color; 
    }; 
} 

Использование:

var blueBox = new Box("blue"); 
alert(blueBox.getColor()); // will alert blue 

var greenBox = new Box("green"); 
alert(greenBox.getColor()); // will alert green 

Answer 2

Вот шаблон, который я иногда использую для ООП-подобного поведения в JavaScript. Как вы можете видеть, вы можете имитировать частные (как статические, так и экземпляры) члены, используя закрытие. То, что возвращает new MyClass(), является объектом с только свойствами, назначенными объекту this, и в объекте prototype «класса».

var MyClass = (function() { 
    // private static 
    var nextId = 1; 

    // constructor 
    var cls = function() { 
     // private 
     var id = nextId++; 
     var name = 'Unknown'; 

     // public (this instance only) 
     this.get_id = function() { return id; }; 

     this.get_name = function() { return name; }; 
     this.set_name = function (value) { 
      if (typeof value != 'string') 
       throw 'Name must be a string'; 
      if (value.length < 2 || value.length > 20) 
       throw 'Name must be 2-20 characters long.'; 
      name = value; 
     }; 
    }; 

    // public static 
    cls.get_nextId = function() { 
     return nextId; 
    }; 

    // public (shared across instances) 
    cls.prototype = { 
     announce: function() { 
      alert('Hi there! My id is ' + this.get_id() + ' and my name is "' + this.get_name() + '"!\r\n' + 
        'The next fellow\'s id will be ' + MyClass.get_nextId() + '!'); 
     } 
    }; 

    return cls; 
})(); 

Я спросил о наследовании, используя эту модель, так что здесь идет:

// It's a good idea to have a utility class to wire up inheritance. 
function inherit(cls, superCls) { 
    // We use an intermediary empty constructor to create an 
    // inheritance chain, because using the super class' constructor 
    // might have side effects. 
    var construct = function() {}; 
    construct.prototype = superCls.prototype; 
    cls.prototype = new construct; 
    cls.prototype.constructor = cls; 
    cls.super = superCls; 
} 

var MyChildClass = (function() { 
    // constructor 
    var cls = function (surName) { 
     // Call super constructor on this instance (any arguments 
     // to the constructor would go after "this" in call(…)). 
     this.constructor.super.call(this); 

     // Shadowing instance properties is a little bit less 
     // intuitive, but can be done: 
     var getName = this.get_name; 

     // public (this instance only) 
     this.get_name = function() { 
      return getName.call(this) + ' ' + surName; 
     }; 
    }; 
    inherit(cls, MyClass); // <-- important! 

    return cls; 
})(); 

И пример, чтобы использовать его все:

var bob = new MyClass(); 
bob.set_name('Bob'); 
bob.announce(); // id is 1, name shows as "Bob" 

var john = new MyChildClass('Doe'); 
john.set_name('John'); 
john.announce(); // id is 2, name shows as "John Doe" 

alert(john instanceof MyClass); // true 

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

Следует отметить необходимость скрывать свойства экземпляра. Фактически вы можете сделать функцию inherit пройденной через все свойства экземпляра (используя hasOwnProperty), которые являются функциями, и автоматически добавить свойство super_<method name>. Это позволит вам позвонить this.super_get_name() вместо того, чтобы хранить его во временном значении и называть его связанным, используя call.

Для методов прототипа вам не нужно беспокоиться об этом, но если вы хотите получить доступ к методам прототипов суперкласса, вы можете просто позвонить this.constructor.super.prototype.methodName. Если вы хотите сделать это менее подробным, вы можете, конечно, добавить удобства. :)

Answer 3

So what is the point of "constructor" property? Cannot figure out where it could be useful, any ideas?

Точка свойства конструктора является условием какой-то способ притворяться, что JavaScript имеет классы. Одна из вещей, которую вы не может полезно сделать, это изменить конструктор объекта после его создания. Это сложно.

я написал достаточно полный кусок на нем несколько лет назад: http://joost.zeekat.nl/constructors-considered-mildly-confusing.html

Answer 4

Используя образец Ники выше, вы можете создать конструктор для объектов без параметров, используя оператор возврата в качестве последнего оператора в вашем определении объекта ,Верните функцию конструктора, как показано ниже, и она будет работать код в __construct каждый раз, когда вы создаете объект:

function Box() 
{ 
    var __construct = function() { 
     alert("Object Created."); 
     this.color = 'green'; 
    } 

    this.color = ''; 

    this.getColor = function() { 
     return this.color; 
    } 

    __construct(); 
} 

var b = new Box(); 

Answer 5

Это конструктор:

function MyClass() {} 

Когда вы

var myObj = new MyClass(); 

MyClass, и новый объект возвращается этому классу.

Answer 6

Я думаю, что опубликую, что я делаю с закрытием javascript, так как никто пока не использует закрытие.

var user = function(id) { 
    // private properties & methods goes here. 
    var someValue; 
    function doSomething(data) { 
    someValue = data; 
    }; 

    // constructor goes here. 
    if (!id) return null; 

    // public properties & methods goes here. 
    return { 
    id: id, 
    method: function(params) { 
     doSomething(params); 
    } 
    }; 
}; 

Комментарии и предложения к этому решению приветствуются. :)

Answer 7

Мне кажется, что большинство из вас дает пример геттеров и сеттеров не конструктор, то есть http://en.wikipedia.org/wiki/Constructor_(object-oriented_programming).

lunched-dan был ближе, но пример не работал в jsFiddle.

В этом примере создается функция частного конструктора, которая работает только во время создания объекта.

var color = 'black'; 

function Box() 
{ 
    // private property 
    var color = ''; 

    // private constructor 
    var __construct = function() { 
     alert("Object Created."); 
     color = 'green'; 
    }() 

    // getter 
    this.getColor = function() { 
     return color; 
    } 

    // setter 
    this.setColor = function(data) { 
     color = data; 
    } 

} 

var b = new Box(); 

alert(b.getColor()); // should be green 

b.setColor('orange'); 

alert(b.getColor()); // should be orange 

alert(color); // should be black 

Если вы хотите, чтобы назначить общие свойства, то конструктор может быть определен как таковой:

var color = 'black'; 

function Box() 
{ 
    // public property 
    this.color = ''; 

    // private constructor 
    var __construct = function(that) { 
     alert("Object Created."); 
     that.color = 'green'; 
    }(this) 

    // getter 
    this.getColor = function() { 
     return this.color; 
    } 

    // setter 
    this.setColor = function(color) { 
     this.color = color; 
    } 

} 

var b = new Box(); 

alert(b.getColor()); // should be green 

b.setColor('orange'); 

alert(b.getColor()); // should be orange 

alert(color); // should be black 

Answer 8

Эта модель хорошо служил мне. С помощью этого шаблона вы создаете классы в отдельных файлах, загружаете их в свое общее приложение «по мере необходимости».

// Namespace 
// (Creating new if not instantiated yet, otherwise, use existing and just add to it) 
var myApp = myApp || {}; 

// "Package" 
// Similar to how you would establish a package in other languages 
(function() { 

// "Class" 
var MyClass = function(params) { 
    this.initialize(params); 
} 

    // "Private Static" vars 
    // - Only accessible to functions in this class. 
    // - Doesn't get wiped out when we create a new instance. 
    var countInstances = 0; 
    var allInstances = []; 

    // "Private Static" functions 
    // - Same as above, but it's a function accessible 
    //  only to other functions in this class. 
    function doSomething(){ 
    } 

    // "Public Static" vars 
    // - Everyone has access. 
    // - Doesn't get wiped out when we create a new instance. 
    MyClass.counter = 0; 

    // "Public Static" functions 
    // - Same as above, but anyone can call this "static method". 
    // - Kinda like a singleton class situation. 
    MyClass.foobar = function(){ 
    } 

    // Public properties and methods are built into the "prototype" 
    // - This is how each instance can become unique unto itself. 
    // - Establishing "p" as "local" (Static Private) variable 
    //  simply so we don't have to keep typing "MyClass.prototype" 
    //  for each property and function. 
var p = MyClass.prototype; 

    // "Public" vars 
    p.id = null; 
    p.firstname = null; 
    p.lastname = null; 

    // "Private" vars 
    // - Only used by "this" instance. 
    // - There isn't "true" privacy for each 
    //  instance so we have to fake it. 
    // - By tradition, we indicate "privacy" 
    //  by prefixing it with an underscore. 
    // - So technically, anyone can access, but we simply 
    //  don't tell anyone about it (e.g. in your API) 
    //  so no one knows about it :) 
    p._foo = null; 

    p.initialize = function(params){ 
     this.id = MyClass.counter++; 
     this.firstname = params.firstname; 
     this.lastname = params.lastname; 
     MyClass.counter++; 
     countInstances++; 
     allInstances.push(this); 
    } 

    p.doAlert = function(theMessage){ 
     alert(this.firstname + " " + this.lastname + " said: " + theMessage + ". My id:" + this.id + ". Total People:" + countInstances + ". First Person:" + allInstances[0].firstname + " " + allInstances[0].lastname); 
    } 


// Assign class to app 
myApp.MyClass = MyClass; 

// Close the "Package" 
}()); 

// Usage example: 
var bob = new myApp.MyClass({ firstname : "bob", 
           lastname : "er" 
          }); 

bob.doAlert("hello there"); 

Answer 9

Я нашел этот учебник очень полезным. Этот подход используется большинством плагинов jQuery.

http://www.htmlgoodies.com/html5/tutorials/create-an-object-oriented-javascript-class-constructor.html#fbid=OVYAQL_TDpK

var Class = function(methods) { 
    var klass = function() {  
     this.initialize.apply(this, arguments);   
    }; 

    for (var property in methods) { 
     klass.prototype[property] = methods[property]; 
    } 

    if (!klass.prototype.initialize) klass.prototype.initialize = function(){};  

    return klass;  
}; 

Теперь

var Person = Class({ 
    initialize: function(name, age) { 
     this.name = name; 
     this.age = age; 
    }, 
    toString: function() { 
     return "My name is "+this.name+" and I am "+this.age+" years old."; 
    } 
}); 

var alice = new Person('Alice', 26); 
alert(alice.name); //displays "Alice" 
alert(alice.age); //displays "26" 
alert(alice.toString()); //displays "My name is Alice and I am 26 years old" in most browsers. 
//IE 8 and below display the Object's toString() instead! "[Object object]" 

Answer 10

Пример здесь: http://jsfiddle.net/FZ5nC/

Попробуйте этот шаблон:

<script> 
//============================================================ 
// Register Namespace 
//------------------------------------------------------------ 
var Name = Name||{}; 
Name.Space = Name.Space||{}; 

//============================================================ 
// Constructor - MUST BE AT TOP OF FILE 
//------------------------------------------------------------ 
Name.Space.ClassName = function Name_Space_ClassName(){} 

//============================================================ 
// Member Functions & Variables 
//------------------------------------------------------------ 
Name.Space.ClassName.prototype = { 
    v1: null 
,v2: null 
,f1: function Name_Space_ClassName_f1(){} 
} 

//============================================================ 
// Static Variables 
//------------------------------------------------------------ 
Name.Space.ClassName.staticVar = 0; 

//============================================================ 
// Static Functions 
//------------------------------------------------------------ 
Name.Space.ClassName.staticFunc = function Name_Space_ClassName_staticFunc(){ 
} 
</script> 

Вы должны отрегулировать лет ур пространства имен, если вы определяете статический класс:

<script> 
//============================================================ 
// Register Namespace 
//------------------------------------------------------------ 
var Shape = Shape||{}; 
Shape.Rectangle = Shape.Rectangle||{}; 
// In previous example, Rectangle was defined in the constructor. 
</script> 

Пример Класс:

<script> 
//============================================================ 
// Register Namespace 
//------------------------------------------------------------ 
var Shape = Shape||{}; 

//============================================================ 
// Constructor - MUST BE AT TOP OF FILE 
//------------------------------------------------------------ 
Shape.Rectangle = function Shape_Rectangle(width, height, color){ 
    this.Width = width; 
    this.Height = height; 
    this.Color = color; 
} 

//============================================================ 
// Member Functions & Variables 
//------------------------------------------------------------ 
Shape.Rectangle.prototype = { 
    Width: null 
,Height: null 
,Color: null 
,Draw: function Shape_Rectangle_Draw(canvasId, x, y){ 
    var canvas = document.getElementById(canvasId); 
    var context = canvas.getContext("2d"); 
    context.fillStyle = this.Color; 
    context.fillRect(x, y, this.Width, this.Height); 
} 
} 

//============================================================ 
// Static Variables 
//------------------------------------------------------------ 
Shape.Rectangle.Sides = 4; 

//============================================================ 
// Static Functions 
//------------------------------------------------------------ 
Shape.Rectangle.CreateSmallBlue = function Shape_Rectangle_CreateSmallBlue(){ 
    return new Shape.Rectangle(5,8,'#0000ff'); 
} 
Shape.Rectangle.CreateBigRed = function Shape_Rectangle_CreateBigRed(){ 
    return new Shape.Rectangle(50,25,'#ff0000'); 
} 
</script> 

Пример конкретизации:

<canvas id="painting" width="500" height="500"></canvas> 
<script> 
alert("A rectangle has "+Shape.Rectangle.Sides+" sides."); 

var r1 = new Shape.Rectangle(16, 12, "#aa22cc"); 
r1.Draw("painting",0, 20); 

var r2 = Shape.Rectangle.CreateSmallBlue(); 
r2.Draw("painting", 0, 0); 

Shape.Rectangle.CreateBigRed().Draw("painting", 10, 0); 
</script> 

функции Примечание определяются как A.B = функция a_b(). Это упрощает отладку вашего сценария.Открыть в Chrome Осмотрите панель Element, запустите этот сценарий, и расширить отладки трассировки:

<script> 
//============================================================ 
// Register Namespace 
//------------------------------------------------------------ 
var Fail = Fail||{}; 

//============================================================ 
// Static Functions 
//------------------------------------------------------------ 
Fail.Test = function Fail_Test(){ 
    A.Func.That.Does.Not.Exist(); 
} 

Fail.Test(); 
</script> 

Answer 11

При использовании большого шаблона Blixt от выше, я узнал, что это не очень хорошо работает с Наследованием многоуровневого (MyGrandChildClass проходящее MyChildClass расширяя MyClass) - он циклически вызывает вызов конструктора первого родителя снова и снова. Так вот простое решение - если вам нужно наследование многоуровневого, вместо того, чтобы использовать this.constructor.super.call(this, surName); использовать chainSuper(this).call(this, surName); с функцией цепи, определенной как это:

function chainSuper(cls) { 
    if (cls.__depth == undefined) cls.__depth = 1; else cls.__depth++; 
    var depth = cls.__depth; 
    var sup = cls.constructor.super; 
    while (depth > 1) { 
    if (sup.super != undefined) sup = sup.super; 
    depth--; 
    } 
    return sup; 
} 

Answer 12

Они делают, если вы используете Typescript - с открытым исходным кодом от MicroSoft :-)

class BankAccount { 
balance: number; 
constructor(initially: number) { 
this.balance = initially; 
} 
deposit(credit: number) { 
this.balance += credit; 
return this.balance; 
} 
} 

Typcript позволяет создавать фальшивые конструкты OO, которые скомпилированы в конструкции javascript. Если вы начинаете большой проект, это может сэкономить вам много времени, и он просто достиг версии 1.0.

http://www.typescriptlang.org/Content/TypeScript%20Language%20Specification.pdf

Приведенный выше код получает 'скомпилированных' в:

var BankAccount = (function() { 
    function BankAccount(initially) { 
     this.balance = initially; 
    } 
    BankAccount.prototype.deposit = function (credit) { 
     this.balance += credit; 
     return this.balance; 
    }; 
    return BankAccount; 
})(); 

Answer 13

http://www.jsoops.net/ довольно хорошо для ЛСГ в Js. Если вы предоставляете частную, защищенную, общедоступную переменную и функцию, а также функцию наследования. Пример кода:

var ClassA = JsOops(function (pri, pro, pub) 
{// pri = private, pro = protected, pub = public 

    pri.className = "I am A "; 

    this.init = function (var1)// constructor 
    { 
     pri.className += var1; 
    } 

    pub.getData = function() 
    { 
     return "ClassA(Top=" + pro.getClassName() + ", This=" + pri.getClassName() 
     + ", ID=" + pro.getClassId() + ")"; 
    } 

    pri.getClassName = function() { return pri.className; } 
    pro.getClassName = function() { return pri.className; } 
    pro.getClassId = function() { return 1; } 
}); 

var newA = new ClassA("Class"); 

//***Access public function 
console.log(typeof (newA.getData)); 
// function 
console.log(newA.getData()); 
// ClassA(Top=I am A Class, This=I am A Class, ID=1) 

//***You can not access constructor, private and protected function 
console.log(typeof (newA.init));   // undefined 
console.log(typeof (newA.className));  // undefined 
console.log(typeof (newA.pro));    // undefined 
console.log(typeof (newA.getClassName)); // undefined 

Answer 14

просто для того, чтобы предложить некоторые разновидности. ds.oop - хороший способ объявить классы с конструкторами в javascript. Он поддерживает все возможные типы наследования (включая 1 тип, который даже не поддерживает C#), а также интерфейсы, которые хороши.

var Color = ds.make.class({ 
    type: 'Color', 
    constructor: function (r,g,b) { 
     this.r = r;      /* now r,g, and b are available to */ 
     this.g = g;      /* other methods in the Color class */ 
     this.b = b;      
    } 
}); 
var red = new Color(255,0,0); // using the new keyword to instantiate the class 

Answer 15

В большинстве случаев вам необходимо как-то объявить требуемое свойство, прежде чем вы сможете вызвать метод, который передает эту информацию. Если вам не нужно сначала устанавливать свойство, вы можете просто вызвать метод внутри объекта, например. Наверное, это не самый красивый способ сделать это, но это все еще работает.

var objectA = { 
    color: ''; 
    callColor : function(){ 
     console.log(this.color); 
    } 
    this.callColor(); 
} 
var newObject = new objectA(); 

Answer 16

В JavaScript тип вызова определяет поведение функции:

• Прямой вызов func()
• вызов метода на объекте obj.func()
• Конструктор вызов new func()
• Непрямой вызова func.call() или func.apply()

---

Функция вызывается как конструктор при вызове с помощью new оператора:

function Cat(name) { 
    this.name = name; 
} 
Cat.prototype.getName = function() { 
    return this.name; 
} 

var myCat = new Cat('Sweet'); // Cat function invoked as a constructor 

Любой экземпляр или объект-прототип в JavaScript имеют свойство constructor, которая относится к функции конструктора ,

Проверьте this post о собственности объекта недвижимости.

Answer 17

Да, вы можете определить конструктор внутри объявления класса, как это:

class Rectangle { 
    constructor(height, width) { 
    this.height = height; 
    this.width = width; 
    } 
} 

Answer 18

Может быть, это стало немного проще, но ниже того, что я придумал сейчас в 2017 году:

class obj { 
    constructor(in_shape, in_color){ 
    this.shape = in_shape; 
    this.color = in_color; 
    } 

    getInfo(){ 
    return this.shape + ' and ' + this.color; 
    } 
    setShape(in_shape){ 
    this.shape = in_shape; 
    } 
    setColor(in_color){ 
    this.color = in_color; 
    } 
} 

При использовании класса выше, я следующее:

var newobj = new obj('square', 'blue'); 

//Here, we expect to see 'square and blue' 
console.log(newobj.getInfo()); 

newobj.setColor('white'); 
newobj.setShape('sphere'); 

//Since we've set new color and shape, we expect the following: 'sphere and white' 
console.log(newobj.getInfo()); 

Как вы можете видеть, конструктор Tak es в двух параметрах, и мы устанавливаем свойства объекта. Мы также изменяем цвет и форму объекта с помощью функций setter и доказываем, что его изменение оставалось после вызова getInfo() после этих изменений.

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

Answer 19

Здесь мы должны заметить одну точку в java-скрипте, но это язык без классов, но мы можем достичь этого, используя функции в java-скрипте. Наиболее распространенным способом для достижения этой цели нам необходимо создать функцию в Java Script и использовать новыйключевое слово создать объект и использовать этотключевое слово определить свойство и methods.Below является примером.

// Function constructor 

    var calculator=function(num1 ,num2){ 
    this.name="This is function constructor"; 
    this.mulFunc=function(){ 
     return num1*num2 
    }; 

}; 

var objCal=new calculator(10,10);// This is a constructor in java script 
alert(objCal.mulFunc());// method call 
alert(objCal.name);// property call 

//Constructors With Prototypes 

var calculator=function(){ 
    this.name="Constructors With Prototypes"; 
}; 

calculator.prototype.mulFunc=function(num1 ,num2){ 
return num1*num2; 
}; 
var objCal=new calculator();// This is a constructor in java script 
alert(objCal.mulFunc(10,10));// method call 
alert(objCal.name); // property call