1. 程式人生 > 程式設計 >js函式和this用法例項分析

js函式和this用法例項分析

本文例項講述了js函式和this用法。分享給大家供大家參考,具體如下:

js的所有程式碼都是由funtion組成,funtion即函式的型別。

一.函式有兩種寫法

-----1.定義式

function test() { //定義一個函式
    console.log("function test called!!");
}

-----2.變數式

var test2 = function () {
    console.log("var test2 function called!!");
};

我們可以呼叫typeof()檢視型別

var type = typeof(test2);
console.log(type); //function

二.函式也是物件

-----1.函式既然是物件,即就可以有屬性和功能。函式也可以動態的增加屬性,如下:

function test() {
    console.log("function test() called!!!");
}
test.user_name = "zhangsan";
console.log(test.user_name); //zhangsan

三.函式的例項化

函式的例項化也有兩種方式:

---------1.直接在函式名後面加上"()" @@@@@常用這種方式

function test() {
    console.log("function test() called!!!");
}
test(); //function test() called!!!

---------2.使用關鍵字"new"進行例項化

function test() {
    console.log("function test() called!!!");
}
new test(); //function test() called!!!

四.this機制

//=====================this機制==================
function my_func(rhs,lhs) {
    console.log(this,rhs,lhs);
}
 
//顯示不確定的this
//my_func(); //console顯示
 
//--------------顯示傳遞this-----------
//函式名.call(this,引數...) 顯示傳遞this
my_func.call({ 0: "jade" },2,3);
//------------------------------------
 
var tools = {
    my_func: my_func,};
 
//表.key() --->this是表
tools.my_func(2,3); //this是tools
// 相當於
tools.my_func.call(tools,3);
 
//強制繫結this,優先順序最高
//函式.bind,不會改變原來函式物件的this,而是會產生一個新的臨時的物件
//bind好了this
var new_func = my_func.bind({ name: "jade" });
new_func(3,4);
 
tools.my_func = new_func;
tools.my_func(3,4); //this是表{name:"jade"}
my_func(3,4); //this不變,consloe
 
//====call與bind有什麼區別呢?==
//bind最牛的地方是什麼?是繫結this的時候,//不是由呼叫者來決定的
 
new_func.call({ 0: 1 },3,4); //this還是表{name:"jade"},不是{0:1}
 
//==================總結=============================
//在函式裡面訪問this,this是由呼叫的環境來決定的,不確定,一般不使用
//1.顯示的傳遞this,函式.call(this物件,引數)
//2.隱式的傳遞this,表.key_函式(引數),this---》表
//3.bind優先級別是最高的

感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具:http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。

更多關於JavaScript相關內容可檢視本站專題:《JavaScript常用函式技巧彙總》、《javascript面向物件入門教程》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程式設計有所幫助。