![Student-Grade Example
function Student(x) {
this.name = x;
this.grade = [];
}
Student.prototype = {
addGrade: function(x) {
this.grade.push(x);
}
};
var Tom = new Student("Tom");
Tom.addGrade(82);
Tom.addGrade(75);
Tom.addGrade(70);](https://image.slidesharecdn.com/function-and-prototypedefinedclassesinjavascript-170624230641/85/Function-and-prototype-defined-classes-in-JavaScript-7-320.jpg)
![How does the new operator work in
JavaScript?
• The new operator uses the
internal [[Construct]] method, and it basically
does the following:
– Initializes a new object
– Sets the internal [[Prototype]] of this object, pointing
to the constructor function prototype property.
– If the constructor function's prototype property is
not an object (but a primitive value, such as a
Number, String, Boolean, Undefined or
Null), Object.prototype is used instead.](https://image.slidesharecdn.com/function-and-prototypedefinedclassesinjavascript-170624230641/85/Function-and-prototype-defined-classes-in-JavaScript-11-320.jpg)
![• { name: 'Tom', grade: [ 82, 75, 70 ] } { name:
'Sarah', grade: [ 83, 88, 91 ] } { name: 'Vu',
grade: [ 85, 79, 84 ] }](https://image.slidesharecdn.com/function-and-prototypedefinedclassesinjavascript-170624230641/85/Function-and-prototype-defined-classes-in-JavaScript-13-320.jpg)
![Inheritance with the Prototype Chain
• When it comes to inheritance, JavaScript only has
one construct: objects. Each object has a private
property (referred to as [[Prototype]] ) which
holds a link to another object called
its prototype. That prototype object has a
prototype of its own, and so on until an object is
reached with null as its prototype. By
definition, null has no prototype, and acts as the
final link in this prototype chain.](https://image.slidesharecdn.com/function-and-prototypedefinedclassesinjavascript-170624230641/85/Function-and-prototype-defined-classes-in-JavaScript-15-320.jpg)
Function-and-prototype defined classes in JavaScript
- 1. Function-and-Prototype Defined Classes in JavaScript Hong Langford June 24, 2017
- 2. Overview • Objects and prototypes • Student-Grade example • this keyword • Constructor function • How does the new operator work in JavaScript • Inheritance with the prototype chain • The instanceof operator in JavaScript • References
- 3. Objects and Prototypes • Objects are JavaScript’s fundamental data structure. Intuitively, an object represents a table relating strings to values. But when you dig deeper, there is a fair amount of machinery that goes into objects.
- 4. • Like many object-oriented languages, JavaScript provides support for implementation inheritance: the reuse of code or data through a dynamic delegation mechanism. But unlike many conventional languages, JavaScript’s inheritance mechanism is based on prototypes rather than classes. For many programmers, JavaScript is the first object-oriented language they encounter without classes.
- 5. • JavaScript classes introduced in ECMAScript 2015 (ES6) are primarily syntactical sugar over JavaScript's existing prototype-based inheritance. The class syntax is not introducing a new object-oriented inheritance model to JavaScript. JavaScript classes provide a much simpler and clearer syntax to create objects and deal with inheritance for programmers who are used to classes.
- 6. • In many languages, every object is an instance of an associated class, which provides code shared between all its instances. JavaScript, by contrast, has no built-in notion of classes. Instead, objects inherit from other objects. Every object is associated with some other object, known as its prototype. Working with prototypes can be different from classes, although many concepts from traditional object-oriented languages still carry over.
- 7. Student-Grade Example function Student(x) { this.name = x; this.grade = []; } Student.prototype = { addGrade: function(x) { this.grade.push(x); } }; var Tom = new Student("Tom"); Tom.addGrade(82); Tom.addGrade(75); Tom.addGrade(70);
- 8. var Sarah = new Student("Sarah"); Sarah.addGrade(83); Sarah.addGrade(88); Sarah.addGrade(91); var Vu = new Student("Vu"); Vu.addGrade(85); Vu.addGrade(79); Vu.addGrade(84); console.log(Tom, Sarah, Vu);
- 9. this keyword • A function's this keyword behaves a little differently in JavaScript compared to other languages. In most cases, the value of this is determined by how a function is called. It may be different each time the function is called.
- 10. Constructor Function • Constructor function – A "constructor" in JavaScript is "just" a function that happens to be called with the new operator.
- 11. How does the new operator work in JavaScript? • The new operator uses the internal [[Construct]] method, and it basically does the following: – Initializes a new object – Sets the internal [[Prototype]] of this object, pointing to the constructor function prototype property. – If the constructor function's prototype property is not an object (but a primitive value, such as a Number, String, Boolean, Undefined or Null), Object.prototype is used instead.
- 12. – After creating the object, it calls the function, providing the object as its this value. – If the return value of the called function, is a primitive, the object created internally is returned. – Otherwise, if an object is returned, the object created internally is lost.
- 13. • { name: 'Tom', grade: [ 82, 75, 70 ] } { name: 'Sarah', grade: [ 83, 88, 91 ] } { name: 'Vu', grade: [ 85, 79, 84 ] }
- 15. Inheritance with the Prototype Chain • When it comes to inheritance, JavaScript only has one construct: objects. Each object has a private property (referred to as [[Prototype]] ) which holds a link to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. By definition, null has no prototype, and acts as the final link in this prototype chain.
- 16. • Nearly all objects in JavaScript are instances of Object constructor which sits on the top of a prototype chain. And the prototype of Object’s prototype is not pointing anywhere but just null .
- 17. The instanceof operator in JavaScript • The instanceof operator tests presence of constructor.prototype in object's prototype chain.
- 18. References 1. David Herman, Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript (Effective Software Development Series), Addison-Wesley Professional, 1 edition (December 6, 2012). 2. https://stackoverflow.com/questions/6750880/ how-does-the-new-operator-work-in-javascript 3. https://developer.mozilla.org/en- US/docs/Web/JavaScript/Reference
- 19. Thank You!
Editor's Notes
- #8: C:\Users\Hong\WebstormProjects\studentgradeproj Question: what’s the result?
- #9: Question: what’s the result?
- #10: Later, we will see what the value of this is in our example.
- #13: So in our example, the value of this is Tom when executing var Tom = new Student("Tom"); Any questions? See Example 2 returnobject.js // defining constructors function C() { this.name = "Jack"; //return {a:1}; }; function D() { this.name = "Linda"; } var o = new C(); var o2 = new D(); console.log(o, o2); //C { name: 'Jack' } D { name: 'Linda' }
- #15: Question: Why use prototypes? Using prototypes can save memory. Any questions?
- #16: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain Mention example.
- #18: See Example 3 instanceof.js in webstorm. // defining constructors function C() {} function D() {} var o = new C(); // true, because: Object.getPrototypeOf(o) === C.prototype console.log(o instanceof C); // false, because D.prototype is nowhere in o's prototype chain console.log(o instanceof D); console.log(o instanceof Object); // true, because: console.log(C.prototype instanceof Object) // true