1 數(shù)據(jù)類型
1.1 數(shù)據(jù)類型列表
字符串煞檩、數(shù)字、布爾而涉、數(shù)組、對象联予、Null啼县、Undefined
1.2 true or false
1.2.1 == 與 ===
==
相等運算材原,如果比較對象類型不同,JavaScript 會先將比較對象轉(zhuǎn)化成相同類型再做比較季眷。
===
嚴格相等運算余蟹,比較對象類型和數(shù)值都相同是才返回true。
console.log("" == false); // true
console.log(" " == false); // true
console.log("1" == true); // true
console.log(0 == false); // true
console.log(1 == true); // true
console.log((1 == "1")); // true
console.log((1 === "1")); // false
console.log((null == undefined)); // true
console.log((NaN == NaN)); // false
1.2.2JavaScript中的5個假值:
undefined,
null,
0,
空字符串(如"", " ", " ")
NaN
2 函數(shù)
2.1 聲明函數(shù) 與 函數(shù)表達式 的區(qū)別
log1("log1 start");
log2("log2 start"); // Uncaught TypeError: log2 is not a function
// 函數(shù)聲明
function log1(message) {
console.log(message);
}
// 函數(shù)表達式
var log2 = function (message) {
console.log(message);
};
log1("log1 end");
log2("log2 end");
調(diào)用時機的差異
聲明函數(shù)
可以聲明前調(diào)用子刮,而函數(shù)表達式
不行威酒。
上面的代碼log2("log2 start");
那一行會報錯:Uncaught TypeError: log2 is not a function
。
原因:
瀏覽器分兩遍讀取網(wǎng)頁: 第一遍讀取所有的函數(shù)定義挺峡,第二遍開始執(zhí)行代碼葵孤。
聲明函數(shù)會在第一遍時被加載,而函數(shù)表達式要等到第二次才會被加載橱赠。在瀏覽器第二遍從上往下執(zhí)行代碼的時候log2("log2 start");
比var log2 = function (message) {
執(zhí)行得早尤仍,所以log2在調(diào)用的時候還沒賦值,于是報錯狭姨。
2.2 閉包
閉包 = 有 自由變量 的 函數(shù)
function makeCounter() {
var count = 0; // 自由變量
function counter() {
count = count + 1;
return count;
}
return counter; // 這是一個閉包宰啦,在其環(huán)境中存儲了變量count
}
var counter1 = makeCounter();
var counter2 = makeCounter(); // 每個counter都有各自的計數(shù)變量count,互不干擾
console.log(counter1()); // 1
console.log(counter1()); // 2
console.log(counter1()); // 3
console.log(counter2()); // 1
console.log(counter2()); // 2
console.log(counter2()); // 3
3 對象
3.1 對象的創(chuàng)建與使用
var tom = {
id: 1,
name: "tom",
age: 2,
say: function (message) {
console.log(this.name + " say: " + message);
}
};
tom.say("hello");
tom.father = "big tom"; // 動態(tài)添加屬性
console.log(tom.father); //big tom
delete tom.father; // 動態(tài)刪除屬性
console.log(tom.father); //undefined
3.2 構造方法
function People(name, age) {
this.name = name;
this.age = age;
this.say = function (message) {
console.log(this.name + " [age:" + age + "] say: " + message);
}
}
// new 對象方式1
var jack = new People("jack", 1); // 注意構造方法前面要加 new
jack.say("hello");
// new 對象方式2
var mikeParams = {
name: "Mike",
age: 20
};
var mike = new People(mikeParams);
mike.say("Hi");
3.3 原型
通過原型(prototype
)可以給類的所有實例對象的同時添加屬性送挑。
當單個實例修改prototype屬性時绑莺,不影響其他實例對象的prototype的值。
People.prototype.gender = "man";
console.log(jack.gender); // man
console.log(mike.gender); //man
jack.gender = "woman";
console.log(jack.gender); // woman
console.log(mike.gender); // man
4 事件
網(wǎng)頁加載完畢后方能通過getElementById獲取到DOM對象惕耕,而網(wǎng)頁加載完畢的事件是window.onload
window.onload = init;
function init() {
console.log("init");
}
5 HTML文件結(jié)構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function log(message) {
console.log(message)
}
</script>
</head>
<body>
<button onclick="log('hello js')">click me</button>
</body>
</html>