2-13 Single thread, Synchronous execution

bigword alert : single thread

• one command at a time
• under the hood of the brower, maybe not

bigwod alert : synchronous

• one at a time, and in order

講師霸氣的說:現在先相信我，js是 single thread, synchronous

Comment and share

2-12 Code execution

Recall : two phases to run a js code

1. creation phase : set up global object , setup variables, outer environments …
2. execution phase : execution the code “line by line”

Comment and share

2-11 Undefined

千萬不要自己將變數的值設成undefined，以保證undefined都是js engine 所設的，方便debug

作者覺得叫notset 比較合適 😤

1
2
3

console.log(a);

//Uncaught ReferenceError: a is not defined

• a does not exist in memory

1
2
3
4
5

var a;

console.log(a);

//undefined

• a exists in memory, but is set to a special value - undefined

1
2
3
4
5
6
7
8
9

var a;

if (a === undefined){
  console.log("a is not defined");
}
else{
  console.log("a is definded");
}

Comment and share

2-10 Creation and hoisting

• hoisting : before js code is run line by line, js engine set memory space for the variables
• all variables is initialized to undefined in js

1
2
3
4
5
6
7
8
9
10
11
12

b();
console.log(a);

var a = 'Bello';
function b (){
  console.log('called b');
}
/*
called b
undefined
 */

1
2
3
4
5
6
7
8
9
10
11
12

b();
console.log(a);

function b (){
  console.log('called b');
}

/*
called b
Error!!
*/

Comment and share

2-9 Global environment and Global object

• Global objects(Ex: window, on browser) and “this” is created by javascript engine
• At globle level, ‘this’ is equal to ‘window’ inside browser
• the global (values and functions) are attached to global objects

1
2
3
4
5
6

a = 'hello world';
b = function(){};

console.log(window.a);
console.log(window.b);

Comment and share

2-7 Name/Value pairs and Objects

bigword alert : Name/Value pair

• a name which maps to an unique value
• the name may be defined more than once, but only can have one value in any given context
• value could be another key/value pari

bigword alert : Object(In javascript)

• a collection of Name/Value pairs

Comment and share

2-6 Syntax Parser, Execution Contex and Lexical Environment

bigword alert : Syntax Parser

• A program that read your code, determines what it does, and if it’s grama valid

bigword alert : Lexical Environment

• where something sits physically in the code you write
• where you write something is IMPORTANT

bigword alert : Execution Contex

• a wrapper to help manage the code that is running

Comment and share

6-57 Function creator ‘new’, and the history of javascript

history time

• javascript 之所以叫 javascript，為了吸引 Java programmer XDD
• new constructor 也是從 Java 搬來的 (笑)

new

• a operator
• ‘new’ create a empty object

1
2
3
4
5
6
7
8
9
10
11
12
13

function Person(firstname, lastname){
  console.log(this);//Person{}, a new empty object
  this.firstname = firstname;
  this.lastname = lastname;
  console.log("this function is invoked");
}

var john = new Person('John', 'Doe');
console.log(john);

var jane = new Person('Jane', 'Doe');
console.log(jane);

1. new create a brand new empty object
2. the function Person() is called
3. this in the function is point to the new empty object
4. if the function doesn’t return a value, js engine return the new object

bigword alert : Function Constructors

• A normal function that is used to construct objects.
• ‘this’ points to a new empty object.
• the new empty object is returned from the funciton automatically.

後記:
我到現在才知道在js裡，new後面的是一個function…囧

6-58 Function constructor and ‘.prototype’

Recall

• .prototype (property) is used only by functions

• .property is the prototype of any object created(use ‘new’)

• __proto__ is in all objects(includeing functions)

• __proto__ is the prototype of the the object

.prototype 是改變所有new 出來的新object 的 prototype

看下面例子，john.__proto__ 指向 Person.prototype

• good js code sets properties inside the function constructor. But methods are set on the prototype.

∵ methods(function) 也是object，放在function contstrctor，變成每個new 出來的都有一份 methods 的copy
但它們只做一樣的事情 -> 浪費記憶體

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

function Person(firstname, lastname) {

    console.log(this);
    this.firstname = firstname;
    this.lastname = lastname;
    console.log('This function is invoked.');

}

Person.prototype.getFullName = function() {
    return this.firstname + ' ' + this.lastname;
}

var john = new Person('John', 'Doe');
console.log(john);

var jane = new Person('Jane', 'Doe');
console.log(jane);



Person.prototype.getFormalFullName = function() {
    return this.lastname + ', ' + this.firstname;
}

console.log(john.getFormalFullName());

6-59 Dangerous aside : new and function

• if we invoked a function constructor without new , the function is still run. However, the function will return undefined in default.

• use capital letter for function constructor

6-60 conceuptual Aside : build-in function constructor

autobox

1
2
3
4
5
6
7
8
9
10

var a = new String('John');
var b = new Number(3);
// creating Number object, not primitive type

"John".length //4
// primitive has no methods
//js engine autobox the primitive string into Object String

3.toFixed; //err, js doesn't do autobox on numbers

1
2
3
4
5
6

// add new method to origin String Object
String.prototype.isLengthGreaterThan = function(limit){
  return this.length > limit;
}
console.log('John'.isLengthGreaterThan(3)); //true

6-61 Dangerous Aside: build-in function constructor

• is better not to use (primitive tpye) built-in function constructors
• deal with date : moment.js

1
2
3
4
5
6
7
8
9

var a = 3;
var b = new Number(3);

a == b //true

a === b // false

var c = Number("3"); //convert string to primitive number

6-62 Dangerous Aside : Arrays and for…in

• index(0,1,2…) is the property name

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// Array.prototype.myCustomFeature = 'cool!';

var arr = ['John','Jane','Jim'];

for(var prop in arr){
  console.log(prop + ' : ' + arr[prop]);
}

/*
0 : John
1 : Jane
2 : Jim
 */

/*
0 : John
1 : Jane
2 : Jim
myCustomFeature : cool!
 */

// use standard for loop to avoid this

6-63 Object.create and Pure Prototypal Inheritance

• Pure Prototypal Inheritance
• Object.create create a empty object with prototype point to the argument

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

var person = {
  firstname : 'Default',
  lastname : 'Default',
  greet : function(){
    return 'Hi' + this.firstname;
    // this point to the object person
    // if there is no this, js engine would find firstname in greet function's execution context
    // then find firstname in outer environment(in this case, it's global object)
  }
}

var john = Object.create(person);
console.log(john);
// john has default name!! because of the prototype

john.firstname = 'John';
john.lastname = 'Doe';
console.log(john);

if browser doesn’t support Object.create… Polyfill!!

bigword alert : Polyfill

• code that adds a feature the engine may lack

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

//if object.create not exist, undefined
// undefined is coerced to boolean
if (!Object.create) {
  Object.create = function (o) {
    if (arguments.length > 1) {
      throw new Error('Object.create implementation'
      + ' only accepts the first parameter.');
    }
    function F() {}
    F.prototype = o;
    return new F();
  };
}

var person = {
    firstname: 'Default',
    lastname: 'Default',
    greet: function() {
        return 'Hi ' + this.firstname;
    }
}

var john = Object.create(person);
john.firstname = 'John';
john.lastname = 'Doe';
console.log(john);

6-64 ES6 and Classes

• ES6 has new keywords : class
• 但作者認為這只是個syntatic sugur, 本質上還是 prototypal inheritance
• 仍然建議使用prototypal inheritance 的方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// note that this is a Object, a created object
// it exist in memory already
class Person{
  constructor(firstname, lastname){
    this.firstname = firstname;
    this.lastname = lastname;
  }

  greet(){
  return 'Hi ' + firstname;
  }
}

 var john = new Person('John', 'Doe');

Comment and share

#5-53 Classical vs prototypal ingeritance

bigword alert : Inheritance

• one object gets access to the properties and methods of another object

#5-54 Understanding Prototype

• every object in js has a property called proto
• proto is a object too.
• js engine do the search in prototype chain for the properties and methods
• this in __proto__ point to the origin object, not the __proto__ object

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

var person = {
  firstname : 'Default',
  lastname : 'Default',
  getFullName : function(){
    return this.firstname + ' ' + this.lastname;
  }
}

var john = {
  firstname : 'John',
  lastname : 'Doe'
}

var jane = {
  firstname : 'Jane'
}

// don't do this EVER! for demo purposes only!!
// performance issue
john.__proto__ = person;
jane.__proto__ = person;
console.log(john.getFullName());
console.log(john.firstname);
console.log(jane.getFullName);

#5-55 Every things is an object(or a primitive)

• all thing has __proto__, except basic object
• Object is the bottom of prototype chain

1
2
3
4
5
6
7
8

var a = {};
var b = function(){};
var c = [];

a.__proto__ //object{}
b.__proto__ //Empty(){}
c.__proto__ //[]

#5-56 Reflection and Extend

bigword alert : Reflection

• an object can look at itself, listing and changing its properties and methods.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

var person = {
  firstname : 'Default',
  lastname : 'Default',
  getFullName : function(){
    return this.firstname + ' ' + this.lastname;
  }
}

var john = {
  firstname : 'John',
  lastname : 'Doe'
}

// don't do this EVER! for demo purposes only!!
john.__proto__ = person;

for(var prop in john){
  console.log(prop + ' : ' + john[prop]);//show all properties including proto's
  //use object.hasOwnProperty to check
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// require underscore

var john = {
  firstname : 'John',
  lastname : 'Doe'
}

var jane = {
  address : '111 Main St.';
  getformalFullName : function (){
    return this.lastname + ', ' + this.firstname;
  }
}

var jim = {
  getFirstName : function(){
    return firstname;
  }
}

_.extend(john, jane, jim);
console.log(john);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// Extend a given object with all the properties in passed-in object(s).
_.extend = createAssigner(_.allKeys);

// An internal function for creating assigner functions.
var createAssigner = function(keysFunc, undefinedOnly) {
  return function(obj) {
    var length = arguments.length;
    if (length < 2 || obj == null) return obj;
    for (var index = 1; index < length; index++) {
      var source = arguments[index],
          keys = keysFunc(source),
          l = keys.length;
      for (var i = 0; i < l; i++) {
        var key = keys[i];
        if (!undefinedOnly || obj[key] === void 0) obj[key] = source[key];
      }
    }
    return obj;
  };
};

Comment and share