1. 程式人生 > >js語言精粹

js語言精粹

  1. 資料型別
    1.1 說明:javascript是弱型別語言,並不十分嚴謹,會有一些意想不到的情況,但並不是沒有型別,javascript可以識別下面7種不同型別的值。
    1.2 解釋:弱型別意思是指在宣告變數時不需要去宣告型別。編譯時不能發現。例如c語言中的,int a = 1
    1.3 種類:
    1.3.1 基本資料型別:
    特點:放在棧記憶體中
    String
    Number(包括浮點、負數)
    Boolean
    undefined(變數只聲名但沒有賦值)
    null(不存在的變數)
    symbol(為了引入唯一值,如兩個物件之中若有重複的屬性名,就會相互覆蓋)
    1.3.2 複雜資料型別(Object)
    特點:放在堆記憶體中
    Array
    RegExp
    Date
    Math
    Function
    1.3.3 判斷資料型別的方法
    說明:使用typeof判斷資料型別,但對複雜資料型別不符合預期
    例:
    typeof false // “boolean”
    typeof .2 // “number”
    typeof NaN // “number”
    typeof ‘’ // “string”
    typeof undefined // “undefined”
    typeof Symbol // “symbol”

typeof newDate() // “object”
typeof [] // “object”
typeof alert // “function”
typeof null // “object”
typeof not_defined_var // “undefined”
2.變數
2.1 宣告
使用關鍵字 var :函式作用域,在if、for中
使用關鍵字 let :塊作用域,一個花括號就是一個塊
直接使用:全域性作用域,在嚴格模式下會報錯,jslint、hint也會報錯
例如:
var global_var = 1;
function fn() {
var fn_var = 2;
if(fn_var > 10) {
let block_var = 3;
global_var2 = 4;
}
console.log(block_var) //block_var is not defined
}
2.2 注意點
只宣告不賦值,變數的預設值是undefined
const 關鍵字可以宣告不可變數即常量,同樣為塊級作用域。對不可變的理解在物件上的理解需要注意
const 宣告物件,可以改變物件中的內容,但是不能改變物件本身
2.3 變數提升
說明:js會把變數宣告提前
3. 函式
說明:沒有輸入也可以輸出值
3.1 定義函式方法
函式宣告
函式表示式
Function建構函式
箭頭函式
3.1.1 例:
function fn() {}
var fn = function() {}
var fn = new Function(){}
() => {}
3.2 arguments
解釋:一個包含了傳遞給當前執行函式引數的類似於陣列的物件
方法簽名拓展:在其它靜態語言中,函式若傳入不同數量的形參則會生成不同的方法簽名,而js語言方法簽名就是函式本身,所以無法像php一樣被過載,而是直接覆蓋函式。
用法:

function foo() {
	return arguments;
}

foo(1,2,3) // Arguments[3]
// { “0”: 1, “1”: 2, “2”: 3}
使用rest優化:
function foo(…args) {
return args;
}
foo(1, 2, 3) //型別是array
// [1, 2, 3]

3.3 定義函式引數預設值
例:
function fn (a = 2, b = 3) {
return a+b;
}
fn(2, 3); // 5
fn(2); // 5
fn(); // 5

  1. js的物件
    說明:js中的物件是可變鍵控集合
    拓展:es6中的鍵不一定是字串,也可以是物件或函式
    4.1 物件字面量
    var obj = {
    prop: ‘value’,
    fn: function () {}
    }
    4.2 建構函式
    var date = new Date()
    4.2.1 說明:建構函式和普通函式沒有區別,使用new關鍵字呼叫就是建構函式,使用建構函式可以例項化一個物件。
    4.2.2 返回值:
    顯示呼叫 return返回 return後表示式的求值
    沒有呼叫 return返回 undefined
    4.2.3 例:
    function People(name, age) {
    this.name
    = name;
    this.age = age;
    }
    var people = new People(‘xiaohong’, 22)
    4.2.4 建構函式返回值
    沒有返回值
    簡單資料型別
    物件型別
    前兩種情況建構函式返回構造物件的例項,例項化物件正是利用的這個特性
    第三種建構函式和普通函式表現一致,返回return後表示式的結果,jquery原始碼中常用
    例如:
    function People(name, age) {
    this.name = name;
    this.age = age;
    console.log(123)
    return {a: 1}
    }
    var people = new People(‘xiaohong’, 22) // 控制檯輸出123,並生成people例項,賦予name和age屬性
    people // 呼叫people時返回{a: 1}物件而非people例項
    4.3 prototype原型物件
    說明:
    每個函式都有一個prototype的物件屬性,物件內有一個constructor屬性,預設指向函式本身
    每個物件都有一個__proto__的屬性,指標指向其父型別的prototype
    4.4 this和作用域

4.4.1 作用域可以通俗的理解:
我是誰
我可以用到哪些變數

4.4.2 this的場景
普通函式中

  1. 嚴格模式下:預設指向undefined
  2. 非嚴格模式:預設指向全域性物件
    node:global
    瀏覽器:window
    建構函式中:預設指向物件的例項
    物件的方法中:預設指向物件本身

4.4.3 call&apply
說明:如之前所說,this在各場景中會有不同的預設值,當我們想用一個物件去呼叫其它物件中的方法時,可以用call和apply去傳入這個物件的作用域。
例1:
fn.call(context, arg1, arg2, …argn)
fn.apply(context, agrs)
例2:
function isNumber(obj) {
return Object.prototype.toString.call(obj) === ‘[object Number]’
}