首頁 > web前端 > js教程 > 主體

JS中this的指向以及call、apply的作用_基礎知識

php中世界最好的语言
發布: 2018-05-12 11:38:04
原創
1304 人瀏覽過

這篇文章跟大家分享了JS基礎內容this指向以及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個人資訊檢視與密碼修改如何實作

Vue資料響應式原則分析

以上是JS中this的指向以及call、apply的作用_基礎知識的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板