狠狠撸

Introduction to JavaScript
Beijing, China
Hong Liu

Javascript组件
Object

Function

Closure

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

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

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

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

New
function Test() {
this.value = 2;
return {
foo : 1
};

}
var bar = new Test();
// bar is the returned object.
bar.foo;
// 1
bar.value; // undefined

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’

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

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

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]);
}
}
};

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

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

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

The Freak!
字符串多行声明：
var long_line_1 = “This
long
var long_line_2 = “This
long

is a
line”
is a
line”;

// OK
// Syntax error

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

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

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

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
}

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

类型转换( 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

狠狠撸

Introduction to Javascript

More Related Content

Introduction to Javascript