Introduction to Javascript

Introduction to JavaScript

Beijing, ChinaHong Liu

Javascript 组件

Object

ClosureFunction

Object

var foo = {}; 等价于var foo = new Object(); typeof foo // “object”typeof Object // “function”

var foo = {test: 1}; foo.constructor === Object; // truefoo.test; // 1foo[test]; // 1

Function

function(){}; // function 声明var a = function(){}; // function 表达式

function test(){}; // function test var a = function test(){}; // function 表达式 atest.name === “test” // truea.name === “test” // 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

a

context

this的指向

test

a.constructor

New

function Test() {this.value = 2;return {

foo : 1};

}var bar = new Test(); // bar is the returned object.bar.foo; // 1bar.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”; // Privatereturn { // Public

setName : function(newName) { name = newName;

},getName : function() {

return name;}

}}

Scope 作用域

Scope 作用域搜索变量名称的路径：1. 查找本作用域的局部变量2. 查找 function 参数名3. 查找 function.name4. 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; // this 指向 window

}; var bar = new foo();bar.a; // 1, this 指向 barvar test;test.x = foo;test.a; // 1, this 指向 testvar y = test.x; // y is a functiony();window.a // 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 is a \

long line” // OK

var long_line_2 = “This is a \

long line”; // 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; // set value of bar to undefinedfoo.bar = null; // set value of bar to nulldelete foo.bar; // remove bar and its value

delete foo;foo.bar // ReferenceError.foo = undefined;foo.bar // TypeError.foo = null;foo.bar // TypeError.

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

Happy Coding！