在使用var生命變量,會存在變量提高的問題。html
例1:es6
console.log(a); // undefined
{
var a = 2;
}
console.log(a) // 2
// 在js中一個{},稱爲做用域,可是第一個打印結果會存在變量提高問題。
//當解析腳本時,在腳本中遇到var聲明的變量, 會將var a 提到最上面去聲明。從而致使a成爲一個全局變量
例2:函數
var a = [] for (var i = 0; i<10; i++){ a[i] = function(){ console.log(i); }; } a[6](); // 10
1.不存在變量提高post
// var 的狀況
console.log(foo); // undefined
var foo = 2;
// let的狀況
console.log(bar); // 報錯 Uncaught ReferenceError
let bar = 2;
2.不容許重複聲明this
//new_file.html:11 Uncaught SyntaxError: Identifier 'a' has already been declared
function func(){
let a= 10;
var a = 1;
}
// 報錯
function func(){
let a= 10;
let a = 2;
}
//Uncaught SyntaxError: Identifier 'arg' has already been declared
//不能在函數內重複聲明變量
function func(arg){
let arg;// 報錯
}
function func(arg){
{
let arg;// 不報錯
}
}
3.塊級做用域es5
var a = []; for (let i = 0; i < 10; i++){ a[i] = function(){ console.log(i); }; } a[6](); // 6
const聲明的變量跟let相似,可是const聲明的是常量。spa
const一旦聲明,常量的值就不能改變code
例:htm
const PI = 3.14159;
console.log(PI); //3.14159
PI = 3 // 報錯
// 修改常量的值會報錯
const聲明的變量不得改變值, 意味着,一旦聲明變量,就必須初始化,不能留到之後賦值對象
const foo;
//Uncaught SyntaxError: Missing initializer in const declaration
// 對於const來講, 只聲明,不賦值就會報錯
const的做用域與let的做用域相同,只在聲明所在的塊級做用域內有效
if(true){
const MAX = 5;
console.log(MAX); // 5
}
MAX // 報錯
// new_file.html:13 Uncaught ReferenceError: MAX is not defined
let name = '七月';
let hobby = 'play';
let str = `我是${name}, 愛好:${hobby}`,
es5的普通函數中使用function關鍵字來聲明函數
var f = function(v){
return v;
};
// 等價於
var f = v => v;
// function(v){return v} 等價於(v)=>{return v},
//若是有傳參, 函數有返回值,能夠簡寫成:v=>v
若是箭頭函數不須要參數或者須要多個參數,就使用一個圓括號表明參數部分
var f = () =>5;
console.log(f()) // 5
//等同於
var f = function(){return 5};
console.log(f()); // 5
var sum = (num1, num2) => num1 + num2;
console.log(sum(1,2)); // 3
// 等同於
var sum = function(num1, num2){
return num1 + num2;
};
console.log(sum(1,2)); // 3
//方式一 字面量方式建立對象
var person = {
name: '七月',
age: 20,
fav:function(){
console.log('喜歡玩'); // 喜歡玩
console.log(this.age); // 20
}
};
person.fav();
//方式二, es6對象的單體模式
var person2 = {
name: '七月',
age: 20,
fav(){
// this指的是person2對象
console.log(this); // {name: "七月", age: 20, fav: ƒ}
}
};
person2.fav();
//方式三
var person3 = {
name: '七月',
age: 20,
fav:()=>{
console.log(this);
// this 指的是windo
// Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
}
};
person3.fav();
this的指向問題:要看此時在當前對象內部使用的是普通函數和對象的單體模式寫法, 仍是箭頭函數。
1.若是是普通函數或對象的單體模式寫法, 那麼該this的指向執行函數式的對象。
2.若是是箭頭函數,this指向了定義函數時的上下文(父類)