js中的call,apply與bind

call,apply,bind都是一種方法。

一，call()

①：call() 是可以 調用函數的。

1 function fn() {
2   console.log(12)
3 }
4 
5 fn.call()   // 12

②：通過給call() 內部傳參，可以改變 this指向。

 1 let Dog = {
 2   name: '旺財',
 3   sayName() {
 4     console.log(this.name)
 5   },
 6 }
 7 
 8 let Cat = {
 9   name: '喵喵',
10 }
11 
12 Dog.sayName.call(Cat)   //喵喵

③：如果給 call() 內部傳遞多個參數，那麼第一個預設為 改變 this 的參數，後面為傳給函數的參數。

 1 let Dog = {
 2   name: '旺財',
 3   sayName() {
 4     console.log(this.name)
 5   },
 6   eat(food1, food2) {
 7     console.log(this.name + '吃的食物是：' + food1 + ',' + food2)
 8   },
 9 }
10 
11 let Cat = {
12   name: '喵喵',
13 }
14 Dog.eat.call(Cat, '魚', '骨頭')
15 //喵喵吃的食物是：魚,骨頭

第十四行中call()的第一個參數，改變 this 指向，所以 this.name 為‘喵喵’，後面的連個參數為傳遞給 Dog中eat方法的參數。

二：apply()

apply() 與call() 類似，唯一的區別便是，在十四行傳遞參數時，後面的傳遞的參數寫到了數組裡面。

1 //call() 方法 傳參數
2 Dog.eat.call(Cat, '魚', '骨頭')
3 
4 //apply()方法傳參數
5 Dog.eat.apply(Cat, ['魚', '骨頭'])

三：bind()

bind()傳遞參數和call()方法一樣，只是不會立即執行函數，而是會返回一個函數。

 1 let Dog = {
 2   name: '旺財',
 3   sayName() {
 4     console.log(this.name)
 5   },
 6   eat(food1, food2) {
 7     console.log(this.name + '吃的食物是：' + food1 + ',' + food2)
 8   },
 9 }
10 
11 let Cat = {
12   name: '喵喵',
13 }
14 let fn1 = Dog.eat.bind(Cat, '魚', '骨頭')
15  fn1()
16 //喵喵吃的食物是：魚,骨頭

大家只要牢記記住 call()方法怎麼使用，然後小推一下就能明白 apply() 與bind()的用法了。

實際應用場景： 

可以通過 this 的指向，進行函數方法的繼承 .可以進行單個或者多個繼承。

 1 function Animal() {
 2   this.say = function () {
 3     console.log('我能說話')
 4   }
 5 }
 6 function Fly() {
 7   this.fly = function () {
 8     console.log('我能飛')
 9   }
10 }
11 
12 function Cat() {
13   // Cat 的this指向為cat
14   Animal.call(this)
15   //Animal 中的 this 指向也為 cat
16   Fly.call(this)
17 //同理 Fly中的 this 也指向了 cat
18 }
19 let cat = new Cat()
20 cat.say()
21 cat.fly()

感謝觀看！如果錯誤，還望指出。

本文來自博客園，作者：一粒金燦米，轉載請註明原文鏈接：https://www.cnblogs.com/zy-feng/p/16864283.html