為何想要開一個javascript文集呢,主要是自己的js基礎太差了,決定從0開始重新學習,用此系列博客記錄我自己的學習路程。
值和引用
在javascript中,我們有兩種方法來保存數據:值和引用。這里要提一下js的基本數據類型和引用類數據類型。
基本數據類型:Null,undefined,boolean,String,Number,以及es6新加的symbol(一但創建就不可修改)。
引用類數據類型:Object (Function,Array,Date,RegExp)。
對于基本類型,值都是直接賦值到變量中的;而對于引用類型,變量的值都是通過指針指向內存中的對象,同一個對象可能會有多個變量同時指向自身,當其中某個變量修改對象中的值時候,其他引用此對象的變量中的值也會相應得改變。
我們來看點代碼示例:
var a = 5;
var b = 5;
a = 6;
console.log(b); // 這里的答案是5;因為a和b都是賦值為基本數據類型Number
var a = {};
var b = a;
b.addsth = something;
console.log(a.addsth);// 這里會發現a中也有了addsth屬性。因為a和b都是對對象{}的引用。
var arr = [1, 2, 3];
var testarr = arr;
arr.push(4);
console.log(arr == testarr) // true,因為兩者都是指向[1, 2, 3]這個數組對象。arr改變了原始引用對象值,導致testarr值也相應改變
var arr = [1, 2, 3];
var testarr = arr;
arr = [3, 3, 4];
console.log(testarr) // [1, 2, 3]
// 因為兩者本來都是指向同一個數組對象,但后來arr的指向改變了,testarr并沒有。
作用域
在es6之前,js中只有兩種作用域,那就是全局作用域以及函數作用域,雖然如此,但使用要格外注意。
var a = '我是全局變量';
function abc () {
var a = '我是局部變量';
console.log(a) // 如方法abc調用,則答案是'我是局部變量'
}
console.log(a) // 答案是'我是全局變量';
if (true) {
var a = '我是新值'
}
console.log(a) // 答案是'我是新值';
但是在es6中,增加了塊級作用域,并有了新的定義變量關鍵詞‘let’;這樣一來,上面代碼修改后運行結果會有一點區別。
let a = '我是全局變量'
function abc () {
let a = '我是局部變量';
console.log(a) // 如方法abc調用,則答案是'我是局部變量'
}
console.log(a) // 答案是'我是全局變量';
if (true) {
let a = '我是新值';
console.log(a) // 答案是'我是新值'
}
console.log(a) // 答案是'我是全局變量';
下面的代碼中,由于沒有在函數中聲明變量作用域,導致函數執行后,變量變成了全局作用域下的值
var a = 1;
function abc () {
a = 2
}
console.log(a); // 1
abc();
console.log(a); // 2
// 全局作用域下的a被函數中的變量修改了。
上下文
我們可以用this來訪問上下文,this主要指向你代碼所處的執行環境
var a = 123; // 全局變量a值是123
function change (x) {
this.a = x
}
change(222);
console.log(a); // a的值被修改為222
var obj = {
a: 10
}
obj.change = change
obj.change(20); // obj中a的值被修改為20,因為此時obj的change方法中的this,指向的是obj
說到改變this指向的方法,不得不說一下call(),和apply()兩個方法:apply的參數是數組形式,call的參數是單個的值,除此之外在使用上沒有差別,重點
理解這兩個函數調用的 this 改變
function changeColor (color){
var this.style.color = color;
};
// 在window對象上調用的時候無法運行,因為window對象沒有style屬性
// 比如現在有個div
var div = document.getElementById('mydiv');
changeColor.call(div, 'black');
changecolor.apply(div,['black'])
閉包
閉包是一種手段:有權訪問另一個函數作用域內變量的函數都是閉包。至少我是這么理解的~~
這里簡單介紹一下,后面會有專門的學習。
function abc (){
var a = 123;
function cc () {
console.log(a);
}
return cc;
}
var myfun = abc();
myfun(); // 答案123