Html5 JumpStart学习笔记4：JavaScript Core Capabilities

Module Agenda

1. Overview

(1)History

1995: started in the browser (Brendan Eich | Netscape)
1997: formalized by ECMAScript
2009: moved to the backend (node.js)
2012: moved to the client (Windows 8)

(2)Language Characteristics

prototype(原型；标准)-based
dynamic and weakly-typed
first-class functions
C-like syntax

2. Variables

types(string,number,boolean,array,object,null,undefined)
declarations

3. Functions

(1)callable behaviors

(2)implemented as objects

(3)hoisting(提升；升高)

app.onready = function(e){
log(f1());//right
log(f2());//wrong

function f1(){

}

var f2 = function(){
};
}

(4)arguments

app.onready = function(e){
log(f1("one",2,0.78,{},[]));

function f1(){
debugger;
}
}

function justDo(){...}
function getSomething(){... return something;}
function doWithArg(arg){
//use arg
}
function doWithArgs(arg1,arg2){
//use arg1 or arg2
}

(5)Methods

var ops = {
add:function addNumbers(n1,n2){
return n1 + n2;
}
};
var x = ops.add(3,5);//x == 8
var y = ops.addNumbers(3,5);//not valid

4. Function scope(范围)

(1)defining what is accessible in code and where

(2)encapsulation(封装；包装)

//Demo1:Scope
var x = 2000;
function someFunc(){
var y = 12;
return y;
}
var z = x + y;         //invalid use of y
var z = x + someFunc();//z == 2012

//Demo2:Functions in Functions
function outerFunction(n){
function innerFunction(){
return n*n;
}
return innerFunction();
}
var x = outerFunction(4);//x == 16
//innerFunction cannot be called directly

(3)Immediate Functions

(function(){...}());
or
(function(){...})();

大体的意思是这样的：“()”将方法括起来，表示立即执行。上面第一种写法是先调用函数，然后立即执行；第二种写法是先执行，然后调用。效果是一样的，都会执行函数，并返回函数的返回值。

//Module Pattern
var mod = (function(){
var m = 2000,c = 0,d = 10,y = 2;
return {
getHiddenYear: function(){
return m + c + d + y;
}
}
}());
var x = mod.getHiddenYear(); // x == 2012

(function(){
function add(n1,n2){
return n1 + n2;
}
function calc(n1,n2,processForCalc){
return processForCalc(n1,n2);
}
function executeMath(){
setOutput(calc(4,4,add));
})();

上面第一个例子，因为函数立即执行后返回了getHiddenYear方法，并把这个返回结果赋给了mod，所以mod对象就有了getHiddenYear()方法。

5. Array

simple declaration/instantiation(实例化)

array fucntions: push, pop, concat, map, filter, some, every, forEach, reduce, sort, splice, slice, join, reverse

app.onready = function(e){
var fruit = ["apple", "orange", "banana", "strawberry", "cherry"];
var vegetables = ["carrot", "broccoli", "cauliflovd"];
fruit.push("pear");
fruit.pop();//pop pear(the last pushed)
fruit = fruit.concat(vegetables);//合并多个数组
fruit = fruit.slice(0,1);//截取数组（0起始（含），1结束（不含））
fruit.splice(1,2,"melon","grape");//splice(拼接)，1起始，2长度，"melon"和"grape"是替换的元素，返回被替换掉的元素
fruit = fruit.map(function(i){return i.toUpperCase()});
fruit = fruit.filter(function(i){return i[0] === "a";});//按条件筛选数组
log(fruit.every(function(i){return i[0] === "a";}));//如果每一个元素的首字母都是"a"，则返回true
log(fruit.some(function(i){return i[0] === "a"}));//如果有至少一个元素的首字母是"a"，则返回true
fruit.forEach(function(i){

});
log(fruit.sort());//sort按字母顺序排列
}

6. Object

//声明方式一
var dog = {};
dog.breed = "German Shepherd";
dog.bark = function(){log("woof");};
//声明方式二
var dog = {
breed:"German Shepherd",
bark:function(){log("woof");}
};