Cacher is the code snippet organizer for pro developers

Call()

說明

call的使用方法是 fn.call(this, arg1, arg2..., argn)

• 第一個參數

  輸入的物件會被指定為目標函式中的 this，也可作為目標變數

• 第二以後的參數

  會作為參數傳進目標函式中，如果目標函式中不需要參數則不要傳入即可

範例一

function Product(name, price) {
  this.name = name
  this.price = price

  if (price <= 0)
    throw RangeError('Cannot create product "' + name + '" with a negative price')
    return this
  }

function Food(name, price) {
  Product.call(this, name, price)       //實作函數一次，然後在其他的物件上直接繼承它，而不用在新的物件上重寫該函數
  this.category = 'food'
  }
Food.prototype = new Product()

function Toy(name, price) {
  Product.call(this, name, price)
  this.category = 'toy'
  }
Toy.prototype = new Product()

var cheese = new Food('feta', 5)
console.log(cheese)     //Food {name: "feta", price: 5, category: "food"}
var fun = new Toy('robot', 0)

範例二

var animals = [
  {species: 'Lion', name: 'King'},
  {species: 'Whale', name: 'Fail'}
]

function print(index){
  //animals[i]會自己轉換成this並隱形
  console.log('#' + index  + ' ' + this.species + ': ' + this.name)
}

for (var i = 0; i < animals.length; i++) {
  // 但參數仍要照實傳入
  print.call(animals[i],i);
}

範例三

var fn = [].push
var retAry = []
// psuh()的實作，把0放入retAry中
fn.call(retAry,'0')

// 結果
retAry 
["0"]
  0: "0"
  length: 1
  __proto__: Array(0)

Bind()

bind 的使用方法是 fn.bind(this, arg1, arg2..., argn)

• this

  輸入的參數會被設為目標函式的this

• 第二以後的參數

  往後傳進目標函式的參數

• 回傳

  回傳目標的函式，並會把先前傳入bind的參數一起帶入目標函式中

範例ㄧ

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

var add1 = add.bind(null, 1)
console.log(add1(2))            // 3
console.log(add1(4))            // 5

範例二

簡易的Polyfill

實作 bind

function bind(t, callback) {
  var outerArgs = Array.from(arguments).slice(2);
  return function() {
    var innerArgs = Array.from(arguments);
    return callback.apply(t, outerArgs.concat(innerArgs));
  }
}
// 將[1, 5]傳入add()中，使用a, b兩參數，並回傳目標函式(尚未實作)
var addWithBind = bind(null, add, 1, 5);
// 實作回傳的目標函式，把[1, 5, 8]傳入
console.log(addWithBind(8));                // 14