這次帶給大家在JS如何使用call、apply，在JS中使用call、apply的注意事項有哪些，以下就是實戰案例，一起來看一下。
在具體的實際應用中，this 的指向無法在函數定義時確定，而是在函數執行的時候才確定的，根據執行時的環境大致可以分為以下3種：
1、當函數作為普通函數呼叫時，this 指向全域物件
2、當函數作為物件的方法呼叫時，this 指向該物件
3、當函數作為構造當器呼叫時，this 指向新建立的物件
範例一：
window.name = 'myname';
function getName() {
console.log(this.name);
}
getName(); //输出myname登入後複製
範例二：
var boy = {
name: 'Bob',
getName: function() {
console.log(this.name);
}
}
boy.getName(); //输出Bob登入後複製
#範例三：
function Boy(name) {
this.name = name;
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Bob登入後複製
對於範例三，還有一種特殊情況，就是當建構子透過"return" 傳回的是一個物件的時候，這次運算的最終結果返回的就是這個對象，而不是新創建的對象，因此this 在這種情況下並沒有什麼用。
範例四：
function Boy(name) {
this.name = name;
return { //返回一个对象
name: 'Jack'
}
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Jack登入後複製
範例五：
function Boy(name) {
this.name = name;
return 1; //返回非对象
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Bob登入後複製
call 和apply 的作用
apply 接受兩個參數，第一個參數指定了函數體內this 的指向，第二個參數是一個數組或類別數組，用於傳遞被呼叫函數的參數列表。
範例一：
function getInfo() {
console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);
}
var boy1 = {
name: 'Bob',
age: 12
}
getInfo.apply(boy1,['sing','swimming']); //输出Bob like sing and swimming登入後複製
call 傳入參數的數量是不固定的，跟apply 相同的是，第一個參數也是用來指定函數體內this的指向，從第二個參數開始往後，每個參數依序傳入被呼叫函數。
範例二：
function getInfo() {
console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);
}
var boy1 = {
name: 'Bob',
age: 12
}
getInfo.call(boy1,'sing','shopping'); //输出Bob like sing and shopping登入後複製
此外，大部分進階瀏覽器也實作了bind 方法，它與call 和apply 的差別在於bind 只是改變函數內部this 的指向，但不會立即執行，你需要顯示呼叫它。
範例三：模擬瀏覽器的bind 方法
Function.prototype.bind = function(obj){
var self = this;
return function(){
return self.apply(obj,arguments);
}
};
var obj = {
name: 'Bob',
age: 12
};
var func = function(){
console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);
}.bind(obj);
func('sing','shopping');登入後複製
遺失的this
##在某些情況下會失去this 的指向，此時，我們就需要藉助call、apply 和bind 來改變this 的指向問題。
範例一：當"getName" 方法作為"boy" 物件的屬性呼叫時，this 指向"boy" 對象，當另外一個變數
引用 "getName" 方法時，因為它是作為普通函數調用，所以this 指向全域物件window
var boy = {
name: 'Bob',
getName: function() {
console.log(this.name);
}
}
boy.getName(); //输出Bob
var getBoyName = boy.getName;
getBoyName(); //输出undefined登入後複製
範例二：即使在函數內部定義的函數，如果它作為普通物件調用，this 同樣指向window 物件
var boy1 = {
name: 'Bob',
age: 12,
getInfo: function() {
console.log(this.name);
function getAge() {
console.log(this.age);
}
getAge();
}
}
boy1.getInfo(); //Bob
//undefined登入後複製
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
vue-element怎麼會做出音樂播放器
VueJs父子元件通訊方法總結
以上是在JS中如何使用call、apply的詳細內容。更多資訊請關注PHP中文網其他相關文章！
