Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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};...
Function
function(){};
var a = function(){};

// function声明
// function表达式

function test(){};
var a = function test(){};
...
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 = ne...
New
function Test() {
this.value = 2;
return {
foo : 1
};

}
var bar = new Test();
// bar is the returned object.
bar.foo;...
Function参数
0个参数:
所有变量类型都pass by reference.
1..n个参数: if( typeof a === “number” || typeof a === “string” ||typeof a
=== “boo...
Closure闭包
只有function(){}有, object = {}没有, if(){}, else {} 没有。
function() {
var name = “Robert”; // Private
return { // Pub...
Scope作用域
Scope作用域
搜索变量名称的路径:
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)...
This
function foo(){
this.a = 1;
};
var bar = new foo();
bar.a;
var test;
test.x = foo;
test.a;
var y = test.x;
y();
windo...
This
var Foo = {};
Foo.method = function(){
var that = this;
// this 指向 Foo;
function test() {
console.log(this);
// this ...
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 e...
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 ...
The Freak!
foo.bar = undefined;
foo.bar = null;
delete foo.bar;
delete foo;
foo.bar // ReferenceError.
foo = undefined;
fo...
The Freak!
var obj = { a: 1 };
var foo = obj;
delete obj;
foo; // {a:1}
• 不要用来删除object!
• 只用来删除object的properties.
• 对于prim...
The Freak!
var trees = ["redwood","bay","cedar","oak","maple"];
delete trees[3];
if (3 in trees) {
// doesn’t executed
}
t...
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: !! ‘’ === fals...
Introduction to Javascript
Upcoming SlideShare
Loading in …5
×

Introduction to Javascript

567 views

Published on

The essential of JavaScript language. Learn JavaScript from beginning.

Published in: Education, Business, Technology
  • Be the first to comment

  • Be the first to like this

Introduction to Javascript

  1. 1. Introduction to JavaScript Beijing, China Hong Liu
  2. 2. Javascript组件 Object Function Closure
  3. 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. 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. 5. Function 调用方法: • test() • obj.test() // 作为method • new test() // 其实是调用了test.apply • test.apply() 或 test.call()
  6. 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. 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. 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. 9. Closure闭包 只有function(){}有, object = {}没有, if(){}, else {} 没有。 function() { var name = “Robert”; // Private return { // Public setName : function(newName) { name = newName; }, getName : function() { return name; } } }
  10. 10. Scope作用域
  11. 11. Scope作用域 搜索变量名称的路径: 1. 查找本作用域的局部变量 2. 查找function参数名 3. 查找function.name 4. goto外层scope,重复1-3步。
  12. 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. 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. 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. 15. The Freak! var a = 0.1, b = 0.2, c = 0.3; // 不要每行都var (a + b) + c === a + (b + c) // false
  16. 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. 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. 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. 19. The Freak! var obj = { a: 1 }; var foo = obj; delete obj; foo; // {a:1} • 不要用来删除object! • 只用来删除object的properties. • 对于primitive type和function无效。 • delete 和释放内存没有任何关系!
  20. 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. 21. Warning! • 不要在loop里面声明function; • 不要用document.write, 用$(document.body).append • 不要new Array(); 用a = []; • 不要忘记 ‘ ; ’ • 不要用==,用===
  22. 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

×