JavaScript筆記——引用類型之Object類型和Function類型

《JavaScript高級程序設計》中介紹的幾種JavaScript的引用類型,本文只記了Object跟Function類型

Object類型

創建對象

var person = new Object();
var person = {};
//二者效果是一樣的,但使用對象字面量表示法定義對象時不會調用Object的構造函數

訪問對象屬性

  • 點表示法
  • 方括號表示法
person.name = '';
person['name'] = '';
// 方括號表示法能用變量來訪問屬性
var propertyName = 'name';
person[propertyName] = '';
//若屬性名包含會導致語法錯誤的字符或關鍵字、保留字,可以使用方括號表示法表示
person['first name'] = '';

Array類型

Date類型

RegExp類型

Function類型

(函數是對象,函數名是指針)

定義函數

  • 函數聲明
  • 函數表達式
  • Function構造函數
//函數聲明
function sum(num1, num2){
    return num1 + num2;
}

//函數表達式
var sum = function(num1, num2){
    return num1 + num2;
};

//使用Function構造函數,最後一個參數視爲函數體(不推薦)
var sum = new Function('num1', 'num2', 'return num1 + num2');

沒有重載

因爲函數名是一個指針,所以JavaScript的函數沒有重載,後面定義的函數會覆蓋前面的定義

function add(n){
    return n + 100;
}

function add(n){
    return n + 200;
}

add(100);  //300

var add = function(n){
    return n + 100;
};

var add = function(n){
    return n + 200;
};

add(100);  //300

函數聲明與函數表達式(解析順序)

函數聲明會先被解析,而函數表達式要等到執行至定義的那行代碼纔會被解析

//正常執行
alert(sum(10, 10));
function sum(n1, n2){
    return n1 + n2;
}

//報錯
alert(sum(10, 10));
var sum = function (n1, n2){
    return n1 + n2;
};

作爲值傳遞

function callFunction(f, args){
    return f(args);
}

function add(num){
    return num + 10;
}

callFunction(add, 10);  //20

//在一個函數中返回另一個函數
function callFunction(){
    return function(){

    };
}

函數內部屬性

函數內部有兩個特殊對象:arguments和this

arguments

arguments.callee屬性指向擁有arguments對象的函數,可用於遞歸調用,消除函數執行與函數名的耦合

//階乘
function factorial(num){
    if(num <= 1){
        return 1;
    } else {
        return num * arguments.callee(num - 1);  //效果相當於return num * factorial(num - 1);
    }
}

var calFactorial = factorial;

factorial = function(){
    return 0;
};

calFactorial(5);  //120
factorial(5);  //0

this

this引用的是函數執行的環境對象(當在全局作用域中調用函數,this對象引用的是window)

window.color = 'red';
var o = {color: 'blue'};

function sayColor(){
    alert(this.color);
}

sayColor();  //'red'

o.sayColor = sayColor;
o.sayColor();  //'blue'

caller屬性

函數對象的屬性,保存着調用當前函數的函數的引用,如果是在全局作用域中調用,則值爲null

function outer(){
    inner();
}

function inner(){
    alert(inner.caller);  //或alert(arguments.callee.caller);
}

outer();
/*
彈窗顯示
function outer(){
    inner();
}
*/

函數屬性和方法

length, prototype, call(), apply(), bind()

length

length表示函數希望接收命名參數的個數

function fn1(){}
function fn2(a){}
function fn3(a, b){}

alert(fn1.length);  //0
alert(fn2.length);  //1
alert(fn3.length);  //2

prototype

prototype是保存引用類型所有實例方法的地方
prototype不可枚舉,for-in無法遍歷到

call()和apply()

用途:在特定作用域中調用函數(可擴充函數的作用域)
相當於改變函數體內this所指的對象
接收的第一個參數相同,要代替原this的對象
後面的參數是要執行函數的形參,call()逐個接收,apply()可以將參數作爲數組傳入

window.num = 0;
var o = {num: 10};

function add(num1, num2){
    alert(num1 + num2 + this.num);
}

add.call(this, 10, 10);  //20
add.call(window, 10, 10);  //20
add.call(o, 10, 10);  //30

add.apply(this, [10, 10]);  //20
add.apply(window, [10, 10]);  //20
add.apply(o, [10, 10]);  //30

bind()

bind()方法會創建一個函數實例,實例的this被綁定爲傳入bind()中的參數(類似於call和apply第一個參數的作用)

window.color = 'red';
var o = {color: 'blue'};

function sayColor(){
    alert(this.color);
}

var objSayColor = sayColor.bind(o);
objSayColor();  //'blue'

基本包裝類型

單體內置對象

參考

《JavaScript高級程序設計》(第3版)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章