補充點：1、let const 2、字符串模板 3、箭頭函數 4、對象的單體模式 5、面向對象
一、定義變量
A、var
特點：
1、定義全局變量
2、可以重復定義
3、變量名提升
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>聲明變量</title>
</head>
<body>
<script>
{
var a =66;
console.log('in'+ a);
}
// 在塊級作用域的變量，可以在全局中使用
// 1.var 定義的是全局變量
console.log('out'+ a);
// 2.var可以重新定義變量
var a = 88;
console.log('new'+a);
// 3.變量名提升
// 過程 var b -> 提升， 打印 b, b沒有賦值，結果：undefined
console.log(b); //undefined
var b = 10;
</script>
</body>
</html>
B、let
特點：
1、塊級變量
2、在同一作用域中，不可以重新定義
3、不支持變量名提升
{ let b = 5; console.log('b1', b) } // 1.let 聲明塊級變量 // console.log('b2', b); // b is not defined let b = 10; console.log('b3', b) // 2.let 不能重新聲明變量 // let b = 20; // console.log('b4', b) // Identifier 'b' has already been declared // 3. let不支持變量提升 console.log(c); // Cannot access 'c' before initialization let c = 2;
C、const
特點：
1、定義常量
2、在同一作用域中，不能重復定義
3、不支持變量提升
const a = 10; // 1.const 定義的是常量，常量不能被修改 // a = 20; // console.log(a) // Assignment to constant variable. // 2. 不能重復聲明 // const a = 20; // console.log(a) // Identifier 'a' has already been declared // 3. const 定義變量，不支持變量提升 console.log(b); const b = 30; // Cannot access 'b' before initialization
二、字符串模板
1、反引號(table鍵，上面的鍵)
2、格式：${變量名}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>字符串模板</title>
</head>
<body>
<script>
var name = 'tom';
var age = 24;
// 注意：
// 1. 反引號
// 2.${變量名}
var info = `${name},今年${age}歲!!!`;
console.log(info)
</script>
</body>
</html>
三、箭頭函數
A、簡介
格式：
f = function(a, b){} ---> f = (a, b)=>{}
注意：
1、形參為一個數時，括號可以省略不寫
2、{}中只要return 時，{}也可以省略不寫
B、箭頭函數的坑
1、this
傳統函數的this，指向調用的對象
箭頭函數的this，指向聲明對象的對象
// 字面量方式創建對象 var person = { name: 'tom', age: 24, inf0: function(){ // 1. 普通函數 this 指向 調用 對象 既 person console.log(this); // {name: "tom", age: 24, inf0: ƒ} } }; person.inf0(); // 字面量方式創建對象 var person2 = { name: 'alex', age: 43, info: ()=>{ // 1.箭頭函數 this 指向 聲明 對象 及 windows console.log(this); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …} } }; person2.info();
2、arguments
// 2.箭頭函數不能使用 arguments var foo = function(){ console.log(arguments); // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ] } foo(1, 2, 3); var bar = ()=>{ console.log(arguments); // Uncaught ReferenceError: arguments is not defined } bar(3, 2, 1);
四、對象的單體模式
目的：解決箭頭函數的this坑
// 字面量方式創建對象 var person = { name: 'tom', age: 34, // 格式對比： // info: ()=>{} // info(){} info(){ console.log(this.name); // tom } } person.info();
五、面向對象
1、ES5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 構造函數的方法創建對象，注意名字要大寫
function Person(name, age){
self.name = name;
self.age = age;
}
// 創建該對象的方法
Person.prototype.showname = function(){
console.log(self.name);
}
// 實例化對象
var p1 = new Person('tom', 24);
p1.showname(); // tom
</script>
</body>
</html>
ES6
// 定義類 class Person{ // 構造方法 constructor(name, age){ self.name = name; self.age = age; } // 自定義方法 showname(){ console.log(self.name); } } // 實例化對象 var p2 = new Person('tom', 24); // 調用方法 p2.showname(); // tom
注意：ES6面向對象的語法比ES5面向對象的語法更像面向對象