Прототипы - urfu-2018.github.io · Объекты разны х типов const student =...
TRANSCRIPT
![Page 1: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/1.jpg)
Прототипы
1
![Page 2: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/2.jpg)
Объекты разных типов
const student = { name: 'Billy', getName() {
return this.name; }, sleep() {} };
const lecturer = { name: 'Sergey', getName() {
return this.name; }, talk() {} };
2
![Page 3: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/3.jpg)
Объекты разных типов
const student = { name: 'Billy', getName() {
return this.name; }, sleep() {} };
const lecturer = { name: 'Sergey', getName() {
return this.name; }, talk() {} };
const person = { getName() { return this.name; } };
3
![Page 4: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/4.jpg)
Прототип
const person = { getName() { return this.name;
} }; const student = { name: 'Billy' }; const lecturer = { name: 'Sergey' }; Object.setPrototypeOf(student, person); Object.setPrototypeOf(lecturer, person); student.getName(); // Billy lecturer.getName(); // Sergey
4
![Page 5: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/5.jpg)
create
const person = { getName() { return this.name;
} }; const student = Object.create(person, { name: { value: 'Billy' } });
5
![Page 6: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/6.jpg)
super
const person = { getName() { return this.name;
} }; const student = { name: 'Billy', getName() { return 'Student ' + super.getName(); } }; Object.setPrototypeOf(student, person); student.getName(); // Student Billy 6
![Page 7: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/7.jpg)
Объекты одного типа
const billy = { name: 'Billy', getName() {
return this.name; } };
const willy = { name: 'Willy', getName() {
return this.name; } };
7
![Page 8: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/8.jpg)
Конструированиеобъектов
8
![Page 9: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/9.jpg)
Фабрика
function createStudent(name) { return { name,
getName() { return this.name; } }; } const billy = createStudent('Billy');
9
![Page 10: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/10.jpg)
Фабрика
const studentProto = { getName() { return this.name;
} }; function createStudent(name) { const student = { name }; Object.setPrototypeOf(student, studentProto); return student; }
10
![Page 11: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/11.jpg)
Фабрика
const studentProto = { getName() {} };
function createStudent(name) { return Object.create(studentProto, { name: { value: name } }); }
11
![Page 12: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/12.jpg)
Фабрика
const studentProto = { getName() {} };
function createStudent(name) { return Object.create(studentProto, { name: { value: name, enumerable: true, writable: true } }); }
12
![Page 13: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/13.jpg)
Фабрика
const studentProto = { getName() {} };
function createStudent(name) { const student = Object.create(studentProto); student.name = name; return student; }
13
![Page 14: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/14.jpg)
Фабрика
const studentProto = { getName() {} };
function createStudent(name) { const student = Object.create(studentProto); return Object.assign(student, { name }); }
14
![Page 15: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/15.jpg)
Фабрика
const personProto = { getName() {} };
const studentProto = Object.create(personProto); function createStudent(name) { const student = Object.create(studentProto); return Object.assign(student, { name }); }
15
![Page 16: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/16.jpg)
Фабрика
const personProto = { getName() {} };
const studentProto = Object.create(personProto); studentProto.getName = function () { return 'Student ' + this.name; } function createStudent(name) { const student = Object.create(studentProto); return Object.assign(student, { name }); } 16
![Page 17: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/17.jpg)
Фабрика
const personProto = { getName() {} };
const studentProto = Object.create(personProto); studentProto.getName = function () { return 'Student ' + super.getName(); Error } function createStudent(name) { const student = Object.create(studentProto); return Object.assign(student, { name }); } 17
![Page 18: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/18.jpg)
Фабрика
const personProto = { getName() {} };
const studentProto = { getName() { return 'Student ' + super.getName(); } }; Object.setPrototypeOf(studentProto, personProto); function createStudent(name) { // ... } 18
![Page 19: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/19.jpg)
Фабрика
const { createServer } = require('http'); const server = createServer((req, res) => {
res.end('Hello, World!'); }) server.listen(8080);
19
![Page 20: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/20.jpg)
Person
LecturerStudent
20
![Page 21: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/21.jpg)
Person
LecturerStudent
DesignerDeveloperDesignerDeveloper
21
![Page 22: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/22.jpg)
Person
LecturerStudent
Employee
DeveloperDesigner
22
![Page 23: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/23.jpg)
Student Designer
Lecturer Designer
Student Developer
Lecturer Developer
23
![Page 24: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/24.jpg)
Favor object composition over classinheritance
24
![Page 25: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/25.jpg)
Миксины
const studentProto = { getName() {} };
const developerProto = { getSalary() {} }; const proto = Object.assign({}, studentProto, developerProto); function create({ name, salary }) { const instance = Object.create(proto); return Object.assign(instance, { name, salary }); } 25
![Page 26: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/26.jpg)
Object.assign не переносит свойстваполей, неперечисляемые поля, а также
set/get
26
![Page 27: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/27.jpg)
Копирование полей со свойствами
const objTo = {}; const properties = Object.getOwnPropertyNames(objFrom);
for (const property of properties) { Object.defineProperty( objTo, property, Object.getOwnPropertyDescriptor(objFrom, property); ); }
27
![Page 28: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/28.jpg)
Конструкторы
function createStudent(name) { this.name = name; }
const billy = new createStudent('Billy');
28
![Page 29: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/29.jpg)
Функция, вызванная оператором new,работает как конструктор объектов
29
![Page 30: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/30.jpg)
this внутри конструкторов ссылается насоздаваемый объект
30
![Page 31: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/31.jpg)
Конструкторы
function createStudent(name) { // const this = {}; this.name = name;
// return this; } const billy = new createStudent('Billy');
31
![Page 32: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/32.jpg)
Конструкторы
function Student(name) { // const this = {}; this.name = name;
// return this; } const billy = new Student('Billy');
32
![Page 33: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/33.jpg)
Чтобы отличить функции-конструкторы отпростых функций принято именовать их с
заглавной буквы
33
![Page 34: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/34.jpg)
Конструкторы
function Student(name) { this.name = name; }
const billy = Student('Billy');
34
![Page 35: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/35.jpg)
Конструкторы
'use strict'; function Student(name) {
this.name = name; } const billy = Student('Billy');
35
![Page 36: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/36.jpg)
Конструкторы
function Student(name) { this.name = name;
return { name: 'Willy' }; } const billy = new Student('Billy');
console.info(billy.name); // Willy
36
![Page 37: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/37.jpg)
Конструкторы
function Student(name) { this.name = name;
return 1703; } const billy = new Student('Billy');
console.info(billy.name); // Billy
37
![Page 38: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/38.jpg)
.prototype
function Student(name) { this.name = name; }
Student.prototype = { getName() {} } const billy = new Student('Billy'); billy.getName(); // Billy
38
![Page 39: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/39.jpg)
.prototype
function Student(name) { // const this = {}; // Object.setPrototypeOf(this, Student.prototype);
this.name = name; // return this; } Student.prototype = { getName() {} } const billy = new Student('Billy'); billy.getName(); // Billy
39
![Page 40: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/40.jpg)
.constructor
function Student(name) { this.name = name; }
Student.prototype.constructor === Student; // true
40
![Page 41: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/41.jpg)
.prototype
function Student(name) { // const this = {}; // Object.setPrototypeOf(this, Student.prototype);
this.name = name; // return this; } Object.assign(Student.prototype, { getName() {} }); const billy = new Student('Billy'); billy.getName(); // Billy
41
![Page 42: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/42.jpg)
.prototype
function Student(name) { // const this = {}; // Object.setPrototypeOf(this, Student.prototype);
this.name = name; // return this; } Student.prototype = { constructor: Student, getName() {} }; const billy = new Student('Billy'); billy.getName(); // Billy 42
![Page 43: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/43.jpg)
Object.prototype
const obj = {};
43
![Page 44: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/44.jpg)
Object.prototype
const obj = new Object(); function Object() {}
Object.prototype = { constructor: Object, hasOwnProperty() {}, toString() {} };
44
![Page 45: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/45.jpg)
Конструкторы
function Person() {} Object.assign(Person.prototype, {
getName() {} }); function Student(name) { this.name = name; } Object.assign(Student.prototype, { getCourse() {} }); Object.setPrototypeOf(Student.prototype, Person.prototype); 45
![Page 46: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/46.jpg)
«Классы»
class Student { constructor(name) { this.name = name;
} getName() { return this.name; } }
typeof Student; // function Student.prototype.hasOwnProperty('getName'); // true
46
![Page 47: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/47.jpg)
«Классы» нельзя использовать без new
47
![Page 48: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/48.jpg)
«Классы» не всплывают
48
![Page 49: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/49.jpg)
«Классы» не всплывают
const student = new Student(); function Student() {}
const lecturer = new Lecturer(); Error class Lecturer {}
ReferenceError: Lecturer is not defined
49
![Page 50: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/50.jpg)
get/set
class Student { constructor(firstName, lastName) { this.firstName = firstName;
this.lastName = lastName; } get fullName() { return this.firstName + ' ' + this.lastName; } }
50
![Page 51: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/51.jpg)
Статичный метод
class User { constructor(role, name) { this.name = name;
this.role = role; } static createAdmin(name) { return new User('admin', name); } static createGuest(name) { return new User('guest', name); } } User.createAdmin('Billy'); 51
![Page 52: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/52.jpg)
Все методы не перечислимы
52
![Page 53: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/53.jpg)
Все методы поддерживают super
53
![Page 54: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/54.jpg)
Все методы работают в строгом режиме
54
![Page 55: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/55.jpg)
extends
class Person { constructor(name) { this.name = name;
} } class Student extends Person { constructor(name, course) { super(name); this.course = course; } } const billy = new Student('Billy', 4);
55
![Page 56: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/56.jpg)
extends
class Student extends Person { constructor(name, course) { this.course = course;
super(name); } } const billy = new Student('Billy', 4); Error
ReferenceError: Must call super constructor inderived class before accessing or returning
from derived constructor56
![Page 57: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/57.jpg)
Objectbilly
name
[[Prototype]]course
FunctionStudent
prototype
[[Prototype]]
constructor
FunctionPerson
prototype
[[Prototype]]
constructor
FunctionObject
prototypeconstructor
getCourse getName hasOwnProperty[[Prototype]]
null
57
![Page 58: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/58.jpg)
Наследоваться можно либо от другогоконструктора («класса»), либо от null
58
![Page 59: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/59.jpg)
extends
class Student extends null {}
59
![Page 60: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/60.jpg)
isPrototypeOf
class Student {} const billy = new Student();
Student.prototype.isPrototypeOf(billy); // true
60
![Page 61: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/61.jpg)
instanceof
class Student {} const billy = new Student();
billy instanceof Student; // true
61
![Page 62: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/62.jpg)
instanceof
class Student extends Person {} const billy = new Student();
billy instanceof Student; // true billy instanceof Person; // true
62
![Page 63: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/63.jpg)
billy instanceof Person
billy.[[Prototype]] === Person.prototype; // false // Может, там null?
billy.[[Prototype]] === null; // false // Идём дальше по цепочке billy.[[Prototype]].[[Prototype]] === Person.prototype; // true // Возвращаем true
63
![Page 64: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/64.jpg)
Развитие JavaScript
64
![Page 65: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/65.jpg)
TC39 (Technical Committee 39)
65
![Page 66: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/66.jpg)
Microso�, Google, IBM, Intel, Yahoo,Facebook, Airbnb, Netflix, PayPal, Hewlett
Packard
66
![Page 67: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/67.jpg)
встречаются ирассматривают (proposals)
Переодическипредложения
67
![Page 68: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/68.jpg)
Заметки со встреч ,а решения принимаются большинством
голосов
размещаются на Github
68
![Page 69: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/69.jpg)
0. Идея (Strawman)
Идея может быть предложена командойTC39 или любым человеком
как контрибуторзарегистрированным
69
![Page 70: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/70.jpg)
1. Предложение (Proposal)
Выбирается ответственный запредложение из TC39. Подготавливается
подробное описание с примерами.Пишутся полифилы.
70
![Page 71: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/71.jpg)
2. Черновик (Dra�)
Подготавливается описание на языкеспецификации ECMAScript. Пишутся две
реализации (одна из них длятранспилера).
71
![Page 72: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/72.jpg)
3. Кандидат (Candidate)
Описание финализируется и проходитревью других членов TC39. Пишутся две
полноценные реализации.
72
![Page 73: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/73.jpg)
4. Спецификация (Finished)
Пишутся тесты . Реализациипроходят все тесты. Редакторы ECMAScript
подписыват спецификацию.
Test262
73
![Page 74: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/74.jpg)
Стандарт
Раз в год в июле обновлённаяспецификация становится новым
стандартом
74
![Page 75: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/75.jpg)
+ (Candidate)
class Student { #name = null;
constructor(value) { this.#name = value; } getName() { return 'Student ' + this.#name; } }
Class fields Private methods
75
![Page 76: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/76.jpg)
(Dra�)
class Student { @enumerable(true) getName() {
return this.name; } } function enumerable(value) { return (target, propertyName, descriptors) => { // target === Student.prototype descriptors.enumerable = value; }; }
Декораторы методов
76
![Page 77: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/77.jpg)
(Dra�)
@debug class Student {}
function debug(Class) { return (...args) => { console.trace(Class.name, args); return new Class(...args); }; }
Декораторы классов
77
![Page 78: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/78.jpg)
npm install -g babel-cli babel-node --plugins transform-decorators script.js
Babel
78
![Page 79: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/79.jpg)
(Proposal)
class C { static f() { ... } g() { C.f(); } }
Доступ к статичным полям через class
79
![Page 80: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/80.jpg)
(Proposal)
class C { static f() { ... } g() { class.f(); } }
Доступ к статичным полям через class
80
![Page 81: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/81.jpg)
(Proposal)
module.exports = class { static f() { ... } g() { class.f(); } }
Доступ к статичным полям через class
81
![Page 82: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/82.jpg)
Почитать
Speaking JavaScript Chapter 17. Objects and Inheritance.
Speaking JavaScript Chapter 17. Objects and Inheritance
Exploring ES6
Layer 3: Constructors—Factories for Instances
Layer 4: Inheritance Between Constructors
15. Classes82
![Page 83: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/83.jpg)
Почитать
Eric Elliott
Лекции 2015 года
Common Misconceptions About Inheritancein JavaScript
Про this
83
![Page 84: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/84.jpg)
Почитать
Современный учебник Javascript
Современный учебник Javascript Современные возможности ES-2015
ООП в прототипном стиле
Классы
84
![Page 85: Прототипы - urfu-2018.github.io · Объекты разны х типов const student = { name: 'Billy', getName() { return this.name; }, sleep() {} }; const lecturer](https://reader035.vdocuments.site/reader035/viewer/2022081614/5fcadce3bb415a3e7735e579/html5/thumbnails/85.jpg)
Почитать
Dr. Axel Rauschmayer The TC39 process for ECMAScript features
85