This document provides an introduction and overview of JavaScript concepts including objects, functions, closures, scope, callbacks, and this keyword. It discusses how to declare and call functions, how new works with constructor functions, and function parameters. It also covers data types, type conversion, common mistakes, and JavaScript quirks.

1. Introduction to JavaScript
Beijing, China
Hong Liu

2. Javascript组件
Object
Function
Closure

3. Object
var foo = {}; 等价于
var foo = new Object();
typeof foo
typeof Object
// “object”
// “function”
var foo = {test: 1};
foo.constructor === Object;
foo.test;
foo[test];
// true
// 1
// 1

4. Function
function(){};
var a = function(){};
// function声明
// function表达式
function test(){};
var a = function test(){};
test.name === “test”
a.name === “test”
// function test
// function表达式 a
// true
// true

5. Function
调用方法：
• test()
• obj.test() // 作为method
• new test() // 其实是调用了test.apply
• test.apply() 或 test.call()

6. New
var a = test;
// a为test的拷贝
var a = test();
// a为test的返回值
var a = new test; // 如果constructor无参数, 无()和有()是一样的
var a = new test();
// a为object
context
this的指向
test
a.constructor
a

7. New
function Test() {
this.value = 2;
return {
foo : 1
};
}
var bar = new Test();
// bar is the returned object.
bar.foo;
// 1
bar.value; // undefined

8. Function参数
0个参数:
所有变量类型都pass by reference.
1..n个参数: if( typeof a === “number” || typeof a === “string” ||typeof a
=== “boolean” ) {pass by value;}
if( typeof a === “object” || typeof a === “function” ) {pass by
reference;}
function test(obj) { obj.name = ‘foo’; }
var myObj = {};
test(myObj);
myObj.name;
// ‘foo’

9. Closure闭包
只有function(){}有， object = {}没有, if(){}, else {} 没有。
function() {
var name = “Robert”; // Private
return { // Public
setName : function(newName) {
name = newName;
},
getName : function() {
return name;
}
}
}

10. Scope作用域

11. Scope作用域
搜索变量名称的路径：
1. 查找本作用域的局部变量
2. 查找function参数名
3. 查找function.name
4. goto外层scope，重复1-3步。

12. Callback
Array.forEach(function(item){
console.log(item);
});
Array.prototype.forEach = function(cb) {
for (var i in this) {
if (this.hasOwnProperty(i)) {
cb(this[i]);
}
}
};

13. This
function foo(){
this.a = 1;
};
var bar = new foo();
bar.a;
var test;
test.x = foo;
test.a;
var y = test.x;
y();
window.a
// this 指向window
// 1, this 指向 bar
// 1, this 指向 test
// y is a function
// 1, this 指向window

14. This
var Foo = {};
Foo.method = function(){
var that = this;
// this 指向 Foo;
function test() {
console.log(this);
// this 指向window.
console.log(that);
// that 指向Foo;
}
test();
}

15. The Freak!
var a = 0.1,
b = 0.2,
c = 0.3; // 不要每行都var
(a + b) + c === a + (b + c) // false

16. The Freak!
字符串多行声明：
var long_line_1 = “This
long
var long_line_2 = “This
long
is a
line”
is a
line”;
// OK
// Syntax error

17. The Freak!
var arr = [];
arr[0] = 'a„, arr[1] = 'b„, arr[2] = 'c„, arr[5] = 5;
Array.prototype.foo = 1;
for (var i = 0; i < arr.length; i += 1) {
console.log(arr[i]);
// a, b, c, undefined × 2, 5
}
for (var p in arr) {
console.log(arr[p]);
}
// a, b, c, 5, 1

18. The Freak!
foo.bar = undefined;
foo.bar = null;
delete foo.bar;
delete foo;
foo.bar // ReferenceError.
foo = undefined;
foo.bar // TypeError.
foo = null;
foo.bar // TypeError.
// set value of bar to undefined
// set value of bar to null
// remove bar and its value

19. The Freak!
var obj = { a: 1 };
var foo = obj;
delete obj;
foo; // {a:1}
• 不要用来删除object！
• 只用来删除object的properties.
• 对于primitive type和function无效。
• delete 和释放内存没有任何关系！

20. The Freak!
var trees = ["redwood","bay","cedar","oak","maple"];
delete trees[3];
if (3 in trees) {
// doesn’t executed
}
trees[4]=undefined;
if (4 in trees) {
// executed
}

21. Warning!
• 不要在loop里面声明function;
• 不要用document.write, 用$(document.body).append
• 不要new Array(); 用a = [];
• 不要忘记 ‘ ; ’
• 不要用==，用===

22. 类型转换( Type Cast )
• Number to String: ‘’ + 10 === ‘10’
• String to Number: + ‘10’ === 10
• Cast to Boolean: !! ‘’ === false
!! ‘0’ === true
!! ‘1’ === true
!! {} === true
!! Function(){} === true
!! 0 === true
!! -1 === true
!! null === false
!! undefined === false