Modern JavaScript

Object-Oriented JavaScript
A fundamental aspect of JavaScript is the concept of references. A reference is a pointer to an actual location of an object.


+操作会创建一个新的对象
// Set item equal to a new string object
var item = "test";
// itemRef now refers to the same string object
var itemRef = item;
// Concatenate some new text onto the string object
// NOTE: This creates a new object, and does not modify
// the original object.
item += "ing";


参数个数的检查用arguments.length
类型检查用if (typeof num == "string")


The first way of checking the type of an object is by using the obvious-sounding typeof operator.


Scope概念:
An interesting aspect of browser-based JavaScript is that all globally 


scoped variables are actually just properties
of the window object.
全局变量，实际上就是window对象的一个property
var test = "test";
alert(window.test == test);

var foo = "test";
        alert(foo);
        
        if (true) {
            var foo = "new test"; //foo 为new test
        }
        alert(foo);


        function test() {
            var foo = "old test"; //foo仍然为new test;
        }


        test();
        alert(foo);


如果改成(去掉var)
function test() {
            foo = "old test"; //foo为old test;
        }


        test();
        alert(foo);


闭包:
function a() {
           var i = 0; 
           function b() {
               alert(++i);
           }
           return b;
       }
       var c = a();
       c();
这段代码有两个特点：
1、函数b嵌套在函数a内部；
2、函数a返回函数b


当函数a的内部函数b被函数外的一个变量引用的时候，就创建了一个闭包。


闭包的作用：
闭包的作用就是在a执行完并返回后，闭包使得Javascript的垃圾回收机制GC不会


收回a所占用的资源，因为a的内部函数b的执行需要依赖a中的变量。


闭包的应用场景：
1.保护函数内的变量引用；比如函数a中变量只有通过函数b访问，而无法通过其他途径访问，保护了变量的安全性
2.内存中维持一个变量；不会垃圾回收

Javascript的垃圾回收机制：
如果一个对象不被引用，那么会被回收；如果两个对象互相引用，且不被第三者引用，也会被回收；因为函数a被b引用，b又被a外的c引用，所以不会被回收

Closures:
Closures are means through which inner functions can refer to the variables present in their outer enclosing function after their parent functions have already 
terminated.


一个显示特定时间message的例子：
// A generic function for displaying a delayed alert message
function delayedAlert( msg, time ) {
// Initialize an enclosed callback
setTimeout(function(){
// Which utilizes the msg passed in from the enclosing function
alert( msg );
}, time );
}


把大量的变量放在全局空间是不好的习惯；建议采用匿名函数（(function(){})();）:self-executing,
anonymous function you can essentially hide all normally global variables from being seen by other code.


Context：面向对象里面的概念，an object within which it is operating.

//定义一个obj的对象，里面有函数yes,no;
 var obj = {
            yes: function () {
                this.val = true;
            },
            no: function () {
                this.val = false;
            }
        };
        alert(obj.val);


        obj.yes();
        alert(obj.val);


        obj.no();
        alert(obj.val);


        window.yes = obj.yes;
        window.yes();//不影响obj.val值!!!
        alert(window.val);//false;
        
        alert(obj.val);//yes
call vs apply
The main difference is that apply lets you invoke the function with arguments as an array; call requires the parameters be listed 

explicitly.
theFunction.apply(valueForThis, arrayOfArgs)
theFunction.call(valueForThis, arg1, arg2, ...)


Object-Oriented Basics
function User(name) {
            this.name = name;
        }


        var me = new User("my name");
        alert(me.name);


        User("your name");//此处的This指的window对象
        alert(this.name);
        alert(this == window);


Public Methods:
Prototype(包括基类引用),simply contains an object that will act
as a base reference for all new copies of its parent object. 

Essentially, any property of the prototype（Prototype的任何属性都存在实例化的对象）
will be available on every instance of that object。


Attaching new properties to a prototype will make them a part of every object instantiated from the original prototype, effectively making all the properties public.


  User.prototype.getName = function () {
            return this.name;
        };




Private Methods:simple, private methods and variables are important for 


keeping your code free of collisions


Privileged Methods:
Privileged methods is a term coined by Douglas Crockford to refer to 


methods that are able to view and manipulate private variables (within 


an object) while still being accessible to users as a public method.


Prototypal Inheritance:
// Create the constructor for a Person object
        function Person(name) {
            this.name = name;
        }


        // Add a new method to the Person object
        Person.prototype.getName = function () { return this.name; };


        // Create a new User object constructor
        function User(name, password) {
            this.name = name;
            this.password = password;
        }


        // The User object inherits all of the Person object's methods
        User.prototype = new Person();


        // We add a method of our own to the User object
        User.prototype.getPassword = function () {
            return this.password;
        };


DOM:
getElementById(“everywhere”): This method, which can only be run on the document object, finds all elements that have an ID equal to everywhere. This is 
a very powerful function and is the fastest way to immediately access an element.
getElementsByTagName(“li”): This method, which can be run on any element, finds all descendant elements that have a tag name of li and returns them as a 

NodeList (which is nearly identical to an array).


Event:
1.Java Script
// Attach an load event hanlder to the page
window.onload = function(){ … };
2. W3C.AddEventListener//attachEvent

// Find the first <form> element and attach a 'submit' event handler to it 

document.getElementsByTagName("form")[0].addEventListener

('submit',function(e){
// Stop all form submission attempts
return stopDefault( e );
}, false);
// Attach a keypress event handler to the <body> element of the document
document.body.addEventListener('keypress', myKeyPressHandler, false);
// Attach an load event hanlder to the page
window.addEventListener('load', function(){ … }, false);
window.attachEvent('onload', function(){ … });




Event:
1.MouseEvent; mouseover,mouseout,click;
2.KeyboardEvent:keypress,keydown,keyup
3.UI Event:focus, blur(lost focus)
4.Form Event:submit, change, select
5.Loading and error events: page.load,unload,beforeload,