這篇文章給大家分享的是有關(guān)JS中this指向以及call、apply有什么用的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

成都創(chuàng)新互聯(lián)是一家專業(yè)提供永寧企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、做網(wǎng)站、HTML5建站、小程序制作等業(yè)務(wù)。10年已為永寧眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。

在具體的實(shí)際應(yīng)用中，this 的指向無(wú)法在函數(shù)定義時(shí)確定，而是在函數(shù)執(zhí)行的時(shí)候才確定的，根據(jù)執(zhí)行時(shí)的環(huán)境大致可以分為以下3種：

1、當(dāng)函數(shù)作為普通函數(shù)調(diào)用時(shí)，this 指向全局對(duì)象

2、當(dāng)函數(shù)作為對(duì)象的方法調(diào)用時(shí)，this 指向該對(duì)象

3、當(dāng)函數(shù)作為構(gòu)造器調(diào)用時(shí)，this 指向新創(chuàng)建的對(duì)象

示例一：

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

對(duì)于示例三，還有一種特殊情況，就是當(dāng)構(gòu)造函數(shù)通過(guò) "return" 返回的是一個(gè)對(duì)象的時(shí)候，此次運(yùn)算的最終結(jié)果返回的就是這個(gè)對(duì)象，而不是新創(chuàng)建的對(duì)象，因此 this 在這種情況下并沒(méi)有什么用。

示例四：

function Boy(name) {
  this.name = name;
  return { //返回一個(gè)對(duì)象
    name: 'Jack'
  }
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //輸出Jack

示例五：

function Boy(name) {
  this.name = name;
  return 1; //返回非對(duì)象
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //輸出Bob

call 和 apply 的作用

apply 接受兩個(gè)參數(shù)，第一個(gè)參數(shù)指定了函數(shù)體內(nèi) this 的指向，第二個(gè)參數(shù)是一個(gè)數(shù)組或類數(shù)組，用于傳遞被調(diào)用函數(shù)的參數(shù)列表。

示例一：

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 傳入?yún)?shù)的數(shù)量是不固定的，跟 apply 相同的是，第一個(gè)參數(shù)也是用于指定函數(shù)體內(nèi) this 的指向，從第二個(gè)參數(shù)開(kāi)始往后，每個(gè)參數(shù)被依次傳入被調(diào)用函數(shù)。

示例二：

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

此外，大部分高級(jí)瀏覽器還實(shí)現(xiàn)了 bind 方法，它與 call 和 apply 的區(qū)別在于 bind 只是改變函數(shù)內(nèi)部 this 的指向，但不會(huì)立即執(zhí)行，你需要顯示調(diào)用它。

示例三：模擬瀏覽器的 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

在某些情況下會(huì)丟失 this 的指向，此時(shí)，我們就需要借助 call、apply 和 bind 來(lái)改變 this 的指向問(wèn)題。

示例一：當(dāng) "getName" 方法作為 "boy" 對(duì)象的屬性調(diào)用時(shí)，this 指向 "boy" 對(duì)象，當(dāng)另外一個(gè)變量引用 "getName" 方法時(shí)，因?yàn)樗亲鳛槠胀ê瘮?shù)調(diào)用，所以 this 指向全局對(duì)象window

var boy = {
  name: 'Bob',
  getName: function() {
    console.log(this.name);
  }
}
boy.getName(); //輸出Bob
var getBoyName = boy.getName;
getBoyName(); //輸出undefined

示例二：即使在函數(shù)內(nèi)部定義的函數(shù)，如果它作為普通對(duì)象調(diào)用，this 同樣指向 window 對(duì)象

var boy1 = {
  name: 'Bob',
  age: 12,
  getInfo: function() {
    console.log(this.name);
    function getAge() {
      console.log(this.age);
    }
    getAge();
  }
}
boy1.getInfo(); //Bob
        //undefined

感謝各位的閱讀！關(guān)于“JS中this指向以及call、apply有什么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)站題目：JS中this指向以及call、apply有什么用
網(wǎng)址分享：http://jinyejixie.com/article28/gdghjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、ChatGPT、網(wǎng)站導(dǎo)航、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)