Tässä opetusohjelmassa opit JavaScript-rakennustoiminnosta esimerkkien avulla.
JavaScriptissä rakenninfunktiota käytetään objektien luomiseen. Esimerkiksi,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // create an object const person = new Person();
Yllä olevassa esimerkissä function Person()on objektinrakentajafunktio.
Luodaksemme objektin konstruktoritoiminnosta käytämme newavainsanaa.
Huomaa : Rakentajafunktion ensimmäisen kirjaimen käyttäminen isona kirjaimena on hyvä käytäntö.
Luo useita objekteja rakennustoiminnolla
JavaScriptissä voit luoda useita objekteja konstruktoritoiminnosta. Esimerkiksi,
// constructor function function Person () ( this.name = 'John', this.age = 23, this.greet = function () ( console.log('hello'); ) ) // create objects const person1 = new Person(); const person2 = new Person(); // access properties console.log(person1.name); // John console.log(person2.name); // John
Yllä olevassa ohjelmassa kaksi objektia luodaan käyttäen samaa konstruktoritoimintoa.
JavaScript tämä avainsana
Kun thisavainsanaa käytetään konstruktoritoiminnossa, JavaScript thistarkoittaa objektia, kun objekti luodaan. Esimerkiksi,
// constructor function function Person () ( this.name = 'John', ) // create object const person1 = new Person(); // access properties console.log(person1.name); // John
Näin ollen kun objekti käyttää ominaisuuksia, se voi käyttää sitä suoraan nimellä person1.name.
JavaScript-rakentajan toimintoparametrit
Voit myös luoda konstruktoritoiminnon parametreilla. Esimerkiksi,
// constructor function function Person (person_name, person_age, person_gender) ( // assigning parameter values to the calling object this.name = person_name, this.age = person_age, this.gender = person_gender, this.greet = function () ( return ('Hi' + ' ' + this.name); ) ) // creating objects const person1 = new Person('John', 23, 'male'); const person2 = new Person('Sam', 25, 'female'); // accessing properties console.log(person1.name); // "John" console.log(person2.name); // "Sam"
Yllä olevassa esimerkissä olemme välittäneet argumentit konstruktori-funktiolle objektin luomisen aikana.
const person1 = new Person('John', 23, 'male'); const person2 = new Person('Sam', 25, 'male');
Näin jokaisella objektilla voi olla erilaisia ominaisuuksia. Kuten yllä on esitetty,
console.log(person1.name); antaa John
console.log(person2.name); antaa Sam
Luo objekteja: Rakentajafunktio Vs Object Literal
- Object Literalia käytetään yleensä yhden objektin luomiseen. Konstruktoritoiminto on hyödyllinen, jos haluat luoda useita objekteja. Esimerkiksi,
// using object literal let person = ( name: 'Sam' )
// using constructor function function Person () ( this.name = 'Sam' ) let person1 = new Person(); let person2 = new Person();
- Jokainen konstruktoritoiminnolla luotu objekti on ainutlaatuinen. Sinulla voi olla samat ominaisuudet kuin konstruktoritoiminnolla tai lisätä uusi ominaisuus yhteen tiettyyn objektiin. Esimerkiksi,
// using constructor function function Person () ( this.name = 'Sam' ) let person1 = new Person(); let person2 = new Person(); // adding new property to person1 person1.age = 20;
Nyt tämä ageominaisuus on yksilöllinen person1kohteelle, eikä sitä voi person2vastustaa.
Jos objekti kuitenkin luodaan objektilitraalilla ja jos muuttuja määritetään kyseisen objektiarvon kanssa, muuttujan arvon muutokset muuttavat alkuperäistä objektia. Esimerkiksi,
// using object lateral let person = ( name: 'Sam' ) console.log(person.name); // Sam let student = person; // changes the property of an object student.name = 'John'; // changes the origins object property console.log(person.name); // John
Kun objekti luodaan olion literaalilla, mikä tahansa objektista johdettu objektimuuttuja toimii alkuperäisen objektin kloonina. Näin ollen kaikki tekemäsi muutokset yhteen objektiin heijastuvat myös toiseen objektiin.
Ominaisuuksien ja menetelmien lisääminen objektiin
Voit lisätä ominaisuuksia tai menetelmiä tällaiseen objektiin:
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects let person1 = new Person(); let person2 = new Person(); // adding property to person1 object person1.gender = 'male'; // adding method to person1 object person1.greet = function () ( console.log('hello'); ) person1.greet(); // hello // Error code // person2 doesn't have greet() method person2.greet();
Tuotos
hei Uncaught TypeError: person2.greet ei ole funktio
Yllä olevassa esimerkissä objektiin lisätään uusi ominaisuus genderja uusi menetelmä .greet()person1
Tämä uusi ominaisuus ja menetelmä lisätään kuitenkin vain person1. Et voi käyttää gendertai greet()vastaanottaa person2. Siksi ohjelma antaa virheen, kun yritämme käyttääperson2.greet();
JavaScript-objektin prototyyppi
Voit myös lisätä ominaisuuksia ja menetelmiä konstruktoritoimintoon prototyypin avulla . Esimerkiksi,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects let person1 = new Person(); let person2 = new Person(); // adding new property to constructor function Person.prototype.gender = 'Male'; console.log(person1.gender); // Male console.log(person2.gender); // Male
Lisätietoja prototyypeistä on JavaScript Prototype -sivulla.
Sisäänrakennetut JavaScript-rakentajat
JavaScriptissä on myös sisäänrakennettuja rakentajia. Jotkut niistä ovat:
let a = new Object(); // A new Object object let b = new String(); // A new String object let c = new Number(); // A new Number object let d = new Boolean(); // A new Boolean object
Javascriptissa merkkijonot voidaan luoda objekteina seuraavasti:
const name = new String ('John'); console.log(name); // "John"
JavaScriptissä numerot voidaan luoda esineinä seuraavasti:
const number = new Number (57); console.log(number); // 57
JavaScriptissä booleanit voidaan luoda objekteina seuraavasti:
const count = new Boolean(true); console.log(count); // true
Huomautus : On suositeltavaa käyttää primitiivinen tietotyypit ja luoda niitä normaalilla tavalla, kuten const name = 'John';, const number = 57;jaconst count = true;
Älä merkitse merkkijonoja, lukuja ja loogisia arvoja objekteiksi, koska ne hidastavat ohjelmaa.
Huomaa : JavaScriptissä avainsana classotettiin käyttöön ES6: ssa (ES2015), jonka avulla voimme myös luoda objekteja. Luokat ovat samanlaisia kuin JavaScriptin rakennustoiminnot. Jos haluat lisätietoja, käy JavaScript-luokissa.
