JavaScript · 有關Function

原型(對象)方法

• apply()

  var name = 'hx';
  var obj = {
      name: 'huangxin',
      fn: function() {
          var f = function(a,b) {
              console.log(this.name,a,b)
          }
          return f.call({name:'hxin'},'lala','fafa');
      }
  }
  obj.fn(); // hxin lala fafa

• call()

  var name = 'hx';
  var obj = {
      name: 'huangxin',
      fn: function() {
          var f = function(a,b) {
              console.log(this.name,a,b)
          }
          return f.apply({name:'hxin'},['lala','fafa']);
      }
  }
  obj.fn(); // hxin lala fafa

  思考1：若是apply或call的第一個參數傳 null 的話，結果會是什麼？

  答案：hx lala fafa

  思考2：若是我但願輸出是：huangxin lala fafa，該如何實現？

  答案：使用箭頭函數 var f = (a,b) => console.log(this.name,a,b)

  思考3：箭頭函數和call、apply這種改變this指向的方法混用時，由誰主導？

  答案：由箭頭函數主導，call等方法失效

• bind()

  var name = 'hx';
  var obj = {
      name: 'huangxin',
      fn: function() {
          var f = function(a,b) {
              console.log(this.name,a,b)
          }
          return f.bind({name:'hxin'})('lala','fafa');
      }
  }
  obj.fn(); // hxin lala fafa

Attention：bind只做用於直接調用它的函數

var name = 'hx';
var obj = {
   name: 'huangxin',
   fn: function() {
       console.log(this.name);
   }
 }
obj.fn.bind({name:'hxin'})();
// hxin (bind生效，this指向特定對象)

var name = 'hx';
var obj = {
   name: 'huangxin',
   fn: function() {
       console.log(this);
       var f = function() {
           console.log(this.name)
       }
       return f();
   }
 }
obj.fn.bind({name:'hxin'})();
// {name: "hxin"} (bind生效，this指向特定對象)
// hx (bind不生效，this指向Window。緣由：調用bind方法的是函數fn，而不是f，執行f()時，依舊是按普通函數對待的)

原型(對象)屬性

• callee

  // 表明函數自身，在遞歸中爲了不函數被重命名致使遞歸錯誤
  function recursion(num) {
      if (num <= 1) {
          return 1;
      } else {
          return num * recursion(num - 1);
      }
  }
  var other = recursion;
  recursion = null;
  other(6); // Uncaught TypeError: recursion is not a function
  
  //用callee改進原函數
  function recursion(num) {
      if (num <= 1) {
          return 1;
      } else {
          return num * arguments.callee(num - 1);
      }
  }
  var other = recursion;
  recursion = null;
  other(6); // 720

• arguments

  // 表明傳入函數的實參，類Array類型
  function fn() {
      console.log(arguments);
      console.log(arguments.length);
  }
  fn(1,2,3);
  // [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
  // 3

• length

  function a(a){}
  function b(){}
  function c(a,c){}
  function d(a,b=1,c){}
  function e(a=1,b,c){}
  console.log(a.length); // 1
  console.log(b.length); // 0
  console.log(c.length); // 2
  console.log(d.length); // 1
  console.log(e.length); // 0

• name

  console.log((function a(){}).name) // a
  console.log((new Function).name) // anonymous

Tips：一個綜合用例

// 修改默認全局函數parseInt，使之能夠統計代碼調用了幾回parseInt
var count = 0;
var oldParseInt = parseInt;

window.parseInt = function() {
    count += 1;
    return oldParseInt.apply(null,arguments)
}

parseInt(11.4); // 11
parseInt('10.9'); // 10
console.log(count); // 2

Attention：arguments是類數組，不是數組

var a;
function fn() {
    a = arguments;
    return parseInt(arguments);
}
fn(10.5);
// NaN

function fun() {
    return parseInt.apply(null,arguments);
}
fun(10.5);
// 10

console.log(a);
// Arguments [10.5, callee: ƒ, Symbol(Symbol.iterator): ƒ]

parseInt([10.5]);
// 10

parseInt(a);
// NaN

parseInt.apply(null,a);
// 10