JavaScript is one of the most popular skills in today’s job market. It allows you to create both client- and server-side applications quickly and easily. Having a solid understanding of this powerful and versatile language is essential to anyone who uses it.
“Practical JavaScript Programming” does not only focus on best practices, but also introduces the fundamental concepts. This course will take you from JavaScript basics to advanced. You’ll learn about topics like Data Types, Functions, Events, AJAX and more.
3. Outline
3
Practical JavaScript Programming
Chapter 5.
● Function Definitions
● Function Parameters
● The Arguments Object
● What is ‘this’?
● Function Invocation
● Closures
Functions
Chapter 6.
Constructors And Prototypes
● Constructors
● Prototypes
● Inheritance
● Class
4. 4
Wilson Su
Front-end Developer, HIE
● 6 years in web design
● Specialize in JavaScript /
CSS / HTML / OOP / Git
● Familiar with PHP / Design
Pattern
● Interested in UI & Ix Design
wilson_su@trend.com.tw
10. 3 Ways To Define A Function
10
1. /* Function declarations */
2. function name ([param[, param[..., param]]]) {
3. [statements]
4. }
5.
6. /* Function expressions */
7. var name = function [name] ([param[, param[..., param]]]) {
8. [statements]
9. }
10.
11. /* Function Constructor */
12. var name = new Function([param[, param[..., param]],] body);
16. The Function() Constructor Create Functions In The Global Scope
16
1. var uppercaser = function (skill) {
2. return new Function('return skill.toUpperCase()');
3. };
4. var uppercase = uppercaser('html');
5. var skill = 'css';
6.
7. uppercase('js'); // ?
1. var uppercaser = function (skill) {
2. return new Function('return skill.toUpperCase()');
3. };
4. var uppercase = uppercaser('html');
5. var skill = 'css';
6.
7. uppercase('js'); // 'CSS'
28. Default And Destructured Parameters
28
1. function fn1 (x = 0) {}
2.
3. function fn2 (x = y(), z = []) {}
4.
5. function fn3 (x, y = x, z = y + 1) {}
6.
7. function fn4 ({ multiplier = 3 }, [x, y, z = 5]) {}
29. Rest Parameters
29
1. function join (...args) {
2. return args.join(' ');
3. }
4. function sum (...[x, y, z]) {
5. return x + y + z;
6. }
7.
8. join('Ryan', 'likes', 'JS'); // 'Ryan likes JS'
9.
10. sum(1); // NaN
11. sum(1, 2, 3); // 6
12. sum(1, 2, 3, 4); // 6
64. Closures
64
1. function doubler (n) { return function () { return n * 2; }; }
2. function subtractor (x) { return (y) => (x = x - y); };
3.
4. var sixteen = doubler(8);
5. var subtract = subtractor(100);
6.
7. sixteen(); // 16
8.
9. subtract(15); // ?
10. subtract(20); // ?
1. function doubler (n) { return function () { return n * 2; }; }
2. function subtractor (x) { return (y) => (x = x - y); };
3.
4. var sixteen = doubler(8);
5. var subtract = subtractor(100);
6.
7. sixteen(); // 16
8.
9. subtract(15); // 85
10. subtract(20); // ?
1. function doubler (n) { return function () { return n * 2; }; }
2. function subtractor (x) { return (y) => (x = x - y); };
3.
4. var sixteen = doubler(8);
5. var subtract = subtractor(100);
6.
7. sixteen(); // 16
8.
9. subtract(15); // 85
10. subtract(20); // 65
65. 1. function doubler (n) {
2. return function () {
3. return n * 2;
4. };
5. }
6. var sixteen = doubler(8);
65
Closure
The instance sixteen maintains a reference to its lexical environment,
within which the variable n exists.
66. Using Closure To Define Private Properties
66
1. function Circle (radius) {
2. this.getRadius = function () { return radius; };
3. this.setRadius = function (value) { radius = value; };
4. }
5. var circle = new Circle(10);
6.
7. circle.radius; // undefined
8. circle.getRadius(); // 10
9. circle.setRadius(20); // 20
10. circle.getRadius(); // 20
67. A Common Mistake With Closure
67
1. var i = 0, fn = {};
2.
3. for (; i < 5; ++i) {
4. fn['get' + i] = function () {
5. console.log(i);
6. };
7. }
8.
9. fn.get2(); // ?
1. var i = 0, fn = {};
2.
3. for (; i < 5; ++i) {
4. fn['get' + i] = function () {
5. console.log(i);
6. };
7. }
8.
9. fn.get2(); // 5
74. Prototype-based Programming
Prototype-based programming is a style of object-oriented programming in
which behaviour reuse is performed via a process of reusing existing
objects via delegation that serve as prototypes. – Wiki
74
Prototypes
75. The Special Object Properties
75
● object.prototype returns a reference to the prototype for a class of
objects.
● object.__proto__ returns a reference to the internal prototype of the
specified object.
Prototypes
76. The Prototype Chain Of An Instance
76
1. function Fruit (name) {
2. this.name = name;
3. }
4.
5. var kiwi = new Fruit();
6.
7. kiwi.__proto__ === Fruit.prototype; // true
8. kiwi.__proto__.__proto__ === Object.prototype; // true
9. kiwi.__proto__.__proto__.__proto__; // * null
10.
11. kiwi.__proto__ === Object.getPrototypeOf(kiwi); // true
77. 77
var kiwi = new Object();
kiwi.__proto__ = Fruit.prototype;
Fruit.call(kiwi);
1
2
3
What Does The new Operator Do?
Prototypes
var kiwi = new Fruit();
⇒
return kiwi;4
78. The Prototype Chain Of A Constructor
78
1. function Dog () {}
2. Dog.prototype.self = function () { return this; };
3.
4. var dog = new Dog();
5.
6. Dog.__proto__ === Function.prototype; // true
7. Dog.__proto__.__proto__ === Object.prototype; // true
8. Dog.__proto__.__proto__.__proto__; // * null
9.
10. Dog.prototype.constructor === Dog; // true
11. dog.constructor === Dog; // true
79. FunctionsInstances Prototypes
d1
function Function () {}
function Object () {}
function Dog () {}
Function.prototype
Object.prototype
Dog.prototype
var … = new Dog();
d2
o1
var … = new Object();
o2
__proto__
prototype
constructor
null
102. Static Methods
102
1. class Food {
2. static calorie () {}
3. }
4.
5. function Drink () {}
6. Drink.calorie = function () {}
103. The best thing about JavaScript is
its implementation of functions. It
got almost everything right. But, as
you should expect with JavaScript,
it didn't get everything right.
- Douglas Crockford
103