JavaScript函數(shù)的使用方法

function 函數(shù)名稱(chēng)(參數(shù)表){
  //函數(shù)執(zhí)行部分
  return ;
}
//注意：參數(shù)列表直接寫(xiě)形參名即可

 function test ( a ) {
    a();
  }
  test(function () {
    alert(1);
  });  

function test2(){
  function test3(){
    alert(1);
  }
  test3();
}
test2();

//1 function 語(yǔ)句式
function test1 () {
  alert(1);
}

//2 函數(shù)直接量 (ECMAScript 推薦)

var test2 = function () {
  alert(2);
}


//3 function 構(gòu)造函數(shù)式
var test3 = new Function('a','b','return a+b;'); //最后一個(gè)參數(shù)是函數(shù)結(jié)構(gòu)體 
test3(10,20);

var d1 = new Date();
var t1 = d1.getTime();

for ( var i=0; i<10000000; i++ ) {
  
//        function test1 () {} // 342ms //在函數(shù)體只會(huì)被聲明一次 ，其它地方并不再解析，就可以調(diào)用 。 //靜態(tài) //只會(huì)編譯一次，放入內(nèi)存中。

  var test2 = function () {} //354ms
    
//          var test3 = new Function(); //8400ms //每次執(zhí)行，都是重新new一個(gè) 函數(shù)。 //new 完之后， 就銷(xiāo)毀了。不占用內(nèi)存。動(dòng)態(tài)創(chuàng)建一次。
  
}
var d2 = new Date();
var t2 = d2.getTime();

console.log( t2 - d1 );

function f () {
  return 1;
}         // 函數(shù)1

alert( f() );    //返回值為4 說(shuō)明第1個(gè)函數(shù)被第4個(gè)函數(shù)覆蓋

var f = new Function("return 2;");    // 函數(shù)2 

alert( f() );    //返回值為2 說(shuō)明第4個(gè)函數(shù)被第2個(gè)函數(shù)覆蓋

var f = function () { 
  return 3; 
}      // 函數(shù)3

alert( f() );      //返回值為3 說(shuō)明第2個(gè)函數(shù)被第3個(gè)函數(shù)覆蓋

function f () { 
  return 4; 
}         // 函數(shù)4

alert(f());    //返回值為3 說(shuō)明第4個(gè)函數(shù)被第3個(gè)函數(shù)覆蓋

var f = new Function("return 5");     // 函數(shù)5 

alert(f());  //返回值為5 說(shuō)明第3個(gè)函數(shù)被第5個(gè)函數(shù)覆蓋  

var f = function(){
  return 6;
}      // 函數(shù)6

alert(f());    //返回值為6 說(shuō)明第5個(gè)函數(shù)被第6個(gè)函數(shù)覆蓋

var k = 1 ; 
function t1(){
  var k = 2 ; 
//  function test(){return k ;} //2
// var test = function(){ return k}; //2
  var test = new Function('return k;'); //1  //new Function(); 是會(huì)有頂級(jí)作用域
  alert(test());
}
t1();

//js 中 函數(shù)分為 ： 形參，實(shí)參
function test ( a,b,c,d ) {
  
//        console.log( test.length ); //獲取形參的個(gè)數(shù) 4
  
  //函數(shù)的實(shí)際參數(shù) 內(nèi)部就是使用一個(gè)數(shù)組去接收實(shí)際參數(shù)。 類(lèi)數(shù)組對(duì)象
  //arguments 對(duì)象，只能在函數(shù)內(nèi)部使用。
  //arguments 對(duì)象， 可以訪問(wèn)函數(shù)的實(shí)際參數(shù) (實(shí)參的副本)
//        console.log( arguments.length ); //2
//        console.log( arguments[0] ); //10
//        // 第一種方式：
//        if ( test.length === arguments.length ) {
//          
//          return a + b;
//          
//        }
    
    //使用第二種 方式： 
    if ( arguments.callee.length === arguments.length ) {
      
      return a + b;
      
    }
  
  //arguments對(duì)象， 使用得最多的還是使用遞歸操作
//        arguments.callee; // 指向函數(shù)本身，函數(shù)體
  
}

test(10,20);

//this： this對(duì)象是指在運(yùn)行時(shí)期基于執(zhí)行環(huán)境所綁定的

var k = 10;

function test () {
  
  this.k = 20;
  
}

test();

console.log( test.k ); //undefined

//call， apply 簡(jiǎn)單 用法： 綁定一些函數(shù) 用于傳遞參數(shù) 調(diào)用

function sum ( x,y ) {
  
  return x + y;
  
}

function call1 ( num1,num2 ) {
  
  return sum.call(this,num1,num2);
  
}

function apply1 ( num1,num2 ) {
  
  return sum.apply(this,[num1,num2])
  
}

//將一個(gè)函數(shù)綁定到一個(gè)特定的作用域中，然后傳遞特定作用域中的參數(shù)。

console.log( call1(10,10) );
console.log( apply1(20,10) ); 

//擴(kuò)充作用域,底層也經(jīng)常使用這兩個(gè)方法，用于綁定不同的作用域。
//把一個(gè)函數(shù)賦給一個(gè)對(duì)象， 賦完之后，還可以重用，賦給另外一個(gè)對(duì)象。

window.color = 'pink';

var obj = {
  color: 'tan'
}

function showColor () {
  
  console.log( this.color );
  
}

showColor.call(window); 
//        showColor.call(this);
showColor.apply(obj);

function test1 ( a,b ) {
  
  return a + b;
  
}

//自定義對(duì)象
function Obj ( x,y ) {
  
  return x * y;
  
}

var obj = new Obj();

//掛載到對(duì)象上
obj.method = test1;

//執(zhí)行該函數(shù)
obj.method(10,20);

//執(zhí)行完后刪除
delete obj.method;

function b () {
  console.log(this.title);
}

function Book ( title ) {
  this.title = title;
}

var book = new Book('javascript');

// apply , call 特點(diǎn)：調(diào)用就執(zhí)行
//      b.call(book);
//      b.apply(book);

// 當(dāng)執(zhí)行一個(gè)函數(shù)的時(shí)候更改作用域 
var bBindfn = b.bind(book);

// 執(zhí)行更改作用域
bBindfn();

var color1 = "blue";

function changeColor () {
  
  var color2 = "red";

  function swapColor () {
    
    var color3 = color2; //color3 = 'red'
    color2 = color1; //color2 = 'blue'
    color1 = color3; //color1 = 'red'
    
    console.log( color1,color2,color3 ); 
    
  }
  
  swapColor();
  
}

changeColor();

//環(huán)境變量 可以一層一層的向上進(jìn)行追溯 可以訪問(wèn)它的上級(jí) 環(huán)境(變量和函數(shù))
// 作用域鏈 具有層級(jí)關(guān)系
//在大型程序中，全局變量，盡量少使用，因?yàn)槿肿兞靠偸亲詈笠淮嗡阉鳌?防止全局變量污染。//很少去定義全局變量，效率比較慢。

//垃圾收集 ，標(biāo)記清除 (模擬)

function test () {
  
  var a = 10;  //mark - 被使用
  var b = 20;  //mark - 被使用
  
}

test(); //執(zhí)行完畢 之后 ，a，b又被標(biāo)記使用。 mark - 沒(méi)有被使用
//在間隔時(shí)間中 回收。 如果mark 沒(méi)有被使用， 則回收。

//引用計(jì)數(shù)(模擬)
//如果變量被引用 ， count = 1;
function test2 () {

  var a = 10;  //count = 1;
  var b = 20;

  var c;
  c = a; //count++ = 2; //a 被 c 所使用 ，引用。

  a = 50; //count--; //重新被賦值 count--  //等待 count 為 0 的時(shí)候， 垃圾回收機(jī)制 就回收

}

//當(dāng)函數(shù)執(zhí)行之后， 變量就被回收      
  
function test () {
  
  (function () { //函數(shù)有一個(gè)單獨(dú)的作用域，外面無(wú)法訪問(wèn)到 i
    
    for ( var i=0; i<=5; i++ ) {
      
      console.log( i );
      
    }
    
  })();
  
  console.log( i ); //報(bào)錯(cuò)，無(wú)法找到
  
}

test();

var name = "xiao A";

var obj = {
  
 name : "xiao B",
  
 getName: function(){
    
    return function(){
      
      return this.name;
      
    }
    
  }
  
};

console.log(obj.getName()()); //xiao A
//類(lèi)似：
//var zf = obj.getName();//全局作用域
//zf();

var name = "xiao A";

var obj = {
  
 name : "xiao B",
  
 getName: function(){
    
  var self = this;  
    
    return function(){
      
      return self.name;
      
    }
    
  }
  
};

//console.log( obj.getName().call(obj) );
console.log( obj.getName()() );

//閉包： 一個(gè)函數(shù)， 可以訪問(wèn)另外一個(gè)作用域中的變量
//封閉性，(類(lèi)似食品包裝袋一樣，封閉起來(lái)，保質(zhì)期延長(zhǎng)，變量的訪問(wèn)范圍的延長(zhǎng)) //private 起到一個(gè)保護(hù)變量的作用

//1 level 
function f(x){ //2 level
  
  var temp = x; //局部變量  //temp 標(biāo)記 已經(jīng)沒(méi)有被使用
   
  return function(x){ //3 level  (function 有一個(gè)執(zhí)行域)
    
    temp += x;  //temp 下一級(jí)作用域仍然被引用 ， 標(biāo)記為 使用
    
    alert(temp);
  
  }
  
}        

//js 垃圾回收機(jī)制，當(dāng)函數(shù)執(zhí)行完畢后，內(nèi)部所有的局部變量都集體的被回收。

var a = f(50);

a(5); //55

a(10); //65

a(20); //85

// forEach：用來(lái)遍歷數(shù)組中的每一項(xiàng)
// 1. 數(shù)組中有幾項(xiàng)，那么傳遞進(jìn)去的匿名回調(diào)函數(shù)就需要執(zhí)行幾次。
// 2. 每一次執(zhí)行匿名函數(shù)的時(shí)候，還傳遞了三個(gè)參數(shù)值：數(shù)組中的當(dāng)前項(xiàng)item，當(dāng)前項(xiàng)的索引index，原始的數(shù)組input
// forEach方法中的this是arr，匿名函數(shù)回調(diào)函數(shù)的this默認(rèn)是window
var arr = [10, 234, 23, 76, 7666, 34];
arr.forEach(function(item, index, input) {
 input[index] = item * 10; // 操作之后，修改了原數(shù)組
 console.log(arguments);
});

var obj = {name: 'zf'};
// arr.forEach(function(item, index) {
//  console.log(this);
// }.call(obj)); // 給forEach賦值的是時(shí)候，首先把匿名函數(shù)執(zhí)行，把匿名函數(shù)中的this變?yōu)閛bj，把匿名函數(shù)執(zhí)行的返回結(jié)果undefined賦值給foreach

arr.forEach(function(item, index) {
 console.log(this, '---');
}.bind(obj)); // bind 只是預(yù)先處理，先把this轉(zhuǎn)為參數(shù)的對(duì)象，到后續(xù)該執(zhí)行的時(shí)候才執(zhí)行。


// 不管是forEach，還是map都支持第二個(gè)參數(shù)，第二個(gè)參數(shù)表示：把匿名函數(shù)中的this進(jìn)行修改。
arr.forEach(function() {
 console.log(this, 'this');
}, obj);

// 兼容處理
Array.prototype._forEach = function(callback, context) {
 content = content || window;
 if ('forEach' in Array.prototype) {
  this.forEach(callback, context);
  return;
 } 
 // IE6-8,執(zhí)行回調(diào)邏輯
 for (var i=0; i<this.length; i++) {
  callback || callback.call(context, this[i], i, this);
 }
}

var arr = [10, 234, 23, 76, 7666, 34];
arr.map(function(item, index, input) { // 原有數(shù)組不變
 console.log(arguments);
 return item * 10;
});
// map和forEach非常相似，都是用來(lái)遍歷數(shù)組中的每一項(xiàng)的值
// 區(qū)別：map的回調(diào)函數(shù)中支持return返回值，return的是什么，相當(dāng)于把數(shù)組中的這一項(xiàng)改變?yōu)槭裁矗ǖ遣⒉挥绊懺瓉?lái)的數(shù)組，只是相當(dāng)于把原數(shù)組克隆一份，把克隆的這一份的數(shù)組中的對(duì)應(yīng)項(xiàng)改變）

Array.prototype._map = function(callback, context) {
 context = context || window;
 if ('map' in Array.prototype) {
  this.map(callback, context);
  return;
 } 
 // IE6-8,執(zhí)行回調(diào)邏輯
 var resArr = [];
 for (var i=0; i<this.length; i++) {
  if (typeof callback === 'function') {
   resArr[resArr.length] = callback.call(context, this[i], i, this);
  }
 }
 return resArr;
}

var arr = [10, 234, 23, 76, 7666, 34];
arrMap = arr._map(function(item, index, input) { // 原有數(shù)組不變
 // console.log(arguments, '_map');
 return item * 100;
});
console.log(arrMap);

var obj = {name: 'zf'};
function fn(num1, num2) {
 console.log(this, num1, num2)
}

// 把傳遞進(jìn)來(lái)的callback這個(gè)方法中的this預(yù)先處理為context
function bind(callback, context) {
 context = context || window;
 var outArg = Array.prototype.slice.call(arguments, 2);
 return function(ev) {
  var innerArg = Array.prototype.slice.call(arguments, 0);
  callback.apply(context, outArg.concat(innerArg));
 }
}

// document.body.onclick = fn; // fn 中的 this是document.body. num1是 MouseEven對(duì)象
document.body.onclick = fn.bind(obj, 100, 200); // 除了預(yù)先處理了this和需要手動(dòng)傳遞的參數(shù)值以外，把瀏覽器默認(rèn)給傳遞的鼠標(biāo)事件對(duì)象也進(jìn)行預(yù)先處理，傳遞到最后一個(gè)參數(shù)。
document.body.onclick = bind(obj, 100, 200)
// document.body.onclick = function() {
 // console.log(this); // this --> document.body
// }

// window.setTimeout(fn.bind(obj), 0);
// window.setTimeout(bind(fn, obj, 100, 20), 0); // 給定時(shí)器綁定方法，然后定時(shí)器到達(dá)時(shí)間的時(shí)候，讓fn執(zhí)行，并且讓fn中的this變?yōu)閛bj