![Summary
Rule Example
[[Call]] operator
var bark = function() {};
bark();
Dot [[Call]] operator
var puppy = { … };
puppy.bark();
‘new’ keyword var puppy = new Dog();
‘call’ or ‘apply’
var puppy = { … };
Dog.bark.call(puppy, 1);](https://image.slidesharecdn.com/05context-150604184007-lva1-app6892/85/Context-8-320.jpg)
![__proto__
var foo = {}; //same as new Object()
foo.toString();
fn fnOBJECT
OBJECT
PROTOTYPE toString
foo
Object
null
// -> [object Object]
toString()
this](https://image.slidesharecdn.com/05context-150604184007-lva1-app6892/85/Context-10-320.jpg)
![Exercise
Write the dot [[call]] operator as if it was implemented in JS.
var Person = function(name) {
this.name = name;
}
Person.prototype.speak = function(){
console.log('Hello! ' + this.name);
}
var person = new Person('Smith');
DOTCALL( obj, propertyName, args );
DOTCALL( person, 'speak’ , [] ); //person.speak()
Hints:
• DOTCALL must retain context](https://image.slidesharecdn.com/05context-150604184007-lva1-app6892/85/Context-12-320.jpg)
Context
- 1. JavaScript Training Goal Trainers Format • Lecture • Exercises • Ask Questions! • bitovi/js-training
- 3. var dog = { barkCount: 0, bark: function(){ this.barkCount++; } } dog.bark();
- 4. var dog = { barkCount: 0, bark: function(){ this.barkCount++; } } var bark = dog.bark; bark(); window
- 5. Person = function(name){ this.name = name; } var p = new Person("Justin Meyer")
- 6. Person = function(name){ this.name = name; } var p = Person(“Justin Meyer”) window
- 7. var dog = { barkCount: 0, bark: function(barks) { this.barkCount+=barks; } }, cat = { barkCount: 0 } dog.bark.call(cat, 1);
- 8. Summary Rule Example [[Call]] operator var bark = function() {}; bark(); Dot [[Call]] operator var puppy = { … }; puppy.bark(); ‘new’ keyword var puppy = new Dog(); ‘call’ or ‘apply’ var puppy = { … }; Dog.bark.call(puppy, 1);
- 9. Dot.
- 10. __proto__ var foo = {}; //same as new Object() foo.toString(); fn fnOBJECT OBJECT PROTOTYPE toString foo Object null // -> [object Object] toString() this
- 11. Exercise Write the dot operator as if it was implemented in JS. var Person = function(name) { this.name = name; } Person.prototype.isPerson = true; var person = new Person('Smith'); DOT(person, 'name'); //person.name DOT(person, 'isPerson'); //person.isPerson Hints: • DOT takes the object and the property • DOT must walk up the __proto__ chain • object.hasOwnProperty(“PROPERTY_NAME”) returns if an object has a ‘direct’ property.
- 12. Exercise Write the dot [[call]] operator as if it was implemented in JS. var Person = function(name) { this.name = name; } Person.prototype.speak = function(){ console.log('Hello! ' + this.name); } var person = new Person('Smith'); DOTCALL( obj, propertyName, args ); DOTCALL( person, 'speak’ , [] ); //person.speak() Hints: • DOTCALL must retain context
- 13. foo getDay Summary __proto__ var d = new Date(); d.foo = 'bar'; d.hasOwnProperty(); __proto__ hasOwnProperty this OBJECT PROTOTYPEOBJECT DATE PROTOTYPE ✓❌ ❌ d
Editor's Notes
- #4: Tom: animations need to stay the same, but just make sure the font/theme matches Justin’s slides
- #5: Tom: animations need to stay the same, but just make sure the font/theme matches Justin’s slides
- #6: Tom: animations need to stay the same, but just make sure the font/theme matches Justin’s slides
- #7: Tom: animations need to stay the same, but just make sure the font/theme matches Justin’s slides
- #8: Tom: animations need to stay the same, but just make sure the font/theme matches Justin’s slides
- #9: Tom: grid should be prettier, matching Justin’s theme.
- #11: Tom: Animations should remain, but shapes/theme should match Justin’s
- #15: Tom: Summary slide; Animations should remain, but shapes/theme should match Justin’s