JavaScript объект

Вступление

JavaScript не является полноценным объектно-ориентированным языком программирования, таким как Java, но он разработан на основе простой объектно-ориентированной модели. Объект - это конструкция со свойствами, которые содержат переменные JavaScript или другие объекты. С объектом также связаны функции, известные как метод объекта. Вы можете определить свой собственный объект в дополнение к базовым объектам JavaScript (таким как массив или математика).
Поскольку JavaScript является свободно типизированным, динамичным и выразительным языком, вы можете выполнить одну и ту же задачу различными способами. Цель этого руководства - предоставить вам руководство по раскрытию потенциала языка (в контексте создания и использования объектов) и, в свою очередь, помочь вам понять, что происходит за кулисами. Нельзя утверждать, что способы, описанные здесь, являются единственными способами делать вещи. Скорее, было бы здорово, если это все равно поможет вам выбрать свои собственные методы.

JavaScript объект

«Все» в JavaScript действует как объект, такой как String, Number, Array, Function ..., с двумя исключениями: null и undefined .

JavaScript: создание объектов

В JavaScript есть много способов создания объектов. Вы можете создать объект с помощью инициализатора объекта или написать функцию конструктора, чтобы определить тип объекта и создать экземпляр объекта с оператором new. «Инициализатор объектов» в JavaScript соответствует терминологии, используемой C ++.

Синтаксис

Используя литерал объекта - {}, вы можете создать простой объект:

 var objectName = {} 

или же

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

 var objectName = { property1: value1,
                   свойство2: значение2,
                   // ...,
                   свойствоN: значениеN } ; 

где

objectName: имя нового объекта.

property_1, property_2, ..... property_n: идентификатор (имя, число или строковый литерал).

значение1, значение2, .., значениеN: выражение, значения которого определены свойством property_1, property_2, ..... property_n.

В JavaScript вы можете создать новый объект без создания класса. Объект не принадлежит ни одному классу; это единственный в своем роде. Вы можете использовать оператор typeof, чтобы получить тип данных вновь созданного объекта. Смотрите следующий пример:

* Чтобы запустить код, наведите курсор на панель «Вывод» и нажмите кнопку «Выполнить с помощью JS». *

JS Bin на jsbin.com "> Проверьте тип объекта

Пример: инициализаторы объекта

Следующие коды создают объект «student» с тремя свойствами name, sclass и rollno.

 вар студент = {
                имя: "Дэвид Рэй", 
                шкала: "VI", 
                Rollno: 12 
               } 

Использование функции конструктора

Вот еще один способ создания объекта.

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

Чтобы написать функцию конструктора, мы должны поддерживать следующие правила.

• Имя функции конструктора будет именем типа объекта.
• В функции конструктора этот оператор используется для ссылки на текущий объект.
• Свойства / методы имеют свои значения, определенные после знака равенства '='.
• В функции конструктора не будет оператора return.

Пример функции конструктора

Вот пример функции конструктора:

 функция студент (имя, класс, ролльно)
   {
     this.name = имя;
     this.sclass = sclass;
     this.rollno = rollno;
   }

Тип вышеупомянутого объекта - студент с тремя свойствами name, sclass и rollno. Значение объекта зависит от параметров, передаваемых в функцию. Давайте создадим объект с именем studentv следующим образом:

 studentv = новый студент («Джон», «V», 10); 

Вышеприведенный оператор создает объект с именем studentv и назначает ему указанные значения для его свойств. Поэтому значением studentv.name является строка «John», studentv.sclass - строка «V», а student.rollno - целое число 10. Вы можете создать любое количество объектов ученика, используя оператор new. Например -

 studentv = новый студент («Джон», «V», 10);
studentvi = новый студент («Скотт», «VI», 2);
 

Объекты и Свойства

Свойства являются характеристиками объекта. У объекта JavaScript есть свойства, связанные с ним. Например, объект документа имеет свойство с именем fgColor, которое описывает (document.fgColor = "color_name") цвет фона этого объекта. Свойства объекта JavaScript в основном такие же, как и у переменных JavaScript, за исключением прикрепления имени объекта с точечной нотацией.

В javaScript имя объекта и имя свойства чувствительны к регистру. Вы можете определить свойство, присвоив ему значение. Предположим, что существует объект с именем student с тремя свойствами name, sclass, rollno. Они определили следующее:

 студент . name = "Дэвид Рэй";
студент . sclass = "V";
студент . rollno = 1 ; 

Свойства объектов JavaScript также можно задать с помощью записи в квадратных скобках. Объекты и массивы в JavaScript тесно связаны, фактически они представляют собой разные интерфейсы для одной и той же структуры данных. Вы можете установить свойства предыдущего объекта ученика следующим образом:

 ученик. [ "name" ] = "Дэвид Рэй";
ученик. [ "sclass" ] = "V";
ученик. [ "rollno" ] = 1 ; 

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

Доступ к свойствам

Есть два способа получить доступ к свойствам объекта через

• точечная запись
• обозначение в квадратных скобках.

Обе записи работают одинаково. Обозначения в квадратных скобках используются для определения имени свойства, когда свойства задаются динамически (т. Е. Имя свойства не определяется до времени выполнения).

 var color = {name: 'red'};
color.name; // красный
цвет [ 'имя']; // красный
var get = 'name';
цвет [получить]; // красный 

Удаление свойств

Оператор delete удаляет свойство объекта. Если для свойства задано значение null или неопределенное, оно удаляет только значение, связанное со свойством, но не ключ. Смотрите следующий пример:

 var obj = {
    свойство1: «значение1»,
    свойство2: «значение2»,
    свойство3: «значение3»
};
obj.property1 = не определено;
obj.property2 = null;
удалить obj.property3; 

JavaScript: определение методов

В JavaScript объекты-методы запускаются «внутри» этого объекта. Метод - это функция, связанная с объектом. Ключи объектов называются свойствами, которые являются контейнерами для примитивных значений и других объектов. В случае, когда свойства содержат функции в качестве своих значений, они называются методами. Методы определяются так, как определяются нормальные функции, за исключением того, что они должны быть назначены как свойство объекта. Смотрите следующий код:

Синтаксис

  
  var myObj = {
       ...
       methodName: Myfunction (параметры) 
 {
         заявления;
  } 
 } ;

куда

• « myObj » - это имя объекта.
• « methodName » - это имя метода.
• « Myfunction » - это название функции.

Вы можете вызвать вышеуказанный метод следующим образом:

 myObj.methodName (параметры); 

Вы можете определить методы для типа объекта, включив определение метода в функцию конструктора объекта. Например, вы можете определить функцию, которая будет форматировать и отображать свойства (например, name, class, rollno) ранее определенного объекта ученика; Смотрите следующий пример:

 функция studentDetails () 
{
оповещение (
"Имя учащегося" + this.name + "Class:" + this.class + "Roll No .:" + this.rollno)
} 

где alert () - отображать данные ученика.

Чтобы сделать эту функцию методом объекта ученика, можно использовать следующий код:

this.studentDetails = studentDetails; к определению объекта.

Поэтому полное определение студента теперь будет выглядеть так:

function student(name, class, rollno)
{ 
this.name = name 
this.class = class
this.class = rollno
this.studentDetails = studentDetails
} 

Пример: объект ученика

HTML-код

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>working-with-objects-1</title>
</head>
<body>
</body>
</html>

Код JS

var fruitslist = new Array("Orange","Apple","Banana","Chery" );
var newParagraph = document.createElement("p"); 
var newText = document.createTextNode("List of Fruits : " + fruitslist); 
newParagraph.appendChild(newText); 
document.body.appendChild(newParagraph); 
var newfruitslist =fruitslist.slice(1,3);
var newParagraph = document.createElement("p"); 
var newText = document.createTextNode("Extract Fruits List : " + newfruitslist); 
newParagraph.appendChild(newText); 
document.body.appendChild(newParagraph); 

Еще пример метода JavaScript

HTML-код

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
  <title>working-with-objects-2</title>
</head>
<body>
</body>
</html>

Код JS

var myObj = { // object "myobj" with three properties: x, y, z
  x: 100, // primitive value
  y: {a: 12}, // object "y" with property a
  z: function() // function abc -> (method)
      {  
       console.log('Method myObj.z');
      }
};
console.log(myObj.x); // 100
console.log(myObj.y); // [object Object]
console.log(myObj.y.a); // 12
myObj.z(); // 'Method myObj.z'

Прототип

В нашем предыдущем разделе мы обсуждали объекты как простые пары ключей и значений. Но в объекте JavaScript есть дополнительный атрибут, указатель на другой объект, который называется прототипом объекта.

• JavaScript не поддерживает классическую модель наследования, вместо этого он использует прототип.
• Каждый объект в JavaScript содержит ссылку на свой прототип
• По умолчанию это object.prototype
• Строки используют String.prototype и т. Д.
• Прототип может иметь прототип и так далее.
• Объект наследует все свойство / методы от своего прототипа

В следующем примере мы создали функцию конструктора и добавили метод ('display') к свойству прототипа функции, а затем создали новый объект ('stu1').

HTML-код

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>working-with-objects-3</title>
</head>
<body>
</body>
</html>

Код JS

// Constructor function student
function student() {
    this.name ="Robert";
}
// add a method ti function's prototype
student.prototype.display = function() {
   console.log("My name is  " + this.name);
};
// create a new object stu1 
var stu1 = new student();
// stu1 can access the display() method
stu1.display();

Теперь вновь созданный объект 'stu1' может получить доступ ко всем свойствам, которые были определены в прототипе функции конструктора.

Удаление объектов

Используя оператор delete, мы можем удалить объект. Смотрите следующие коды, как удалить объект.

myobj = new Array (element1, element2)

удалить myobj

Практикуйте пример онлайн

См. Javascript-common-editor Pen от w3resource ( @ w3resource ) в CodePen .

Предыдущая: JavaScript: decodeURICкомпонентные функции
Далее: JavaScript: основные объекты