JS中改變this指向的方法(call和apply、bind),applybind

來源:互聯網
上載者:User

JS中改變this指向的方法(call和apply、bind),applybind

this是javascript的一個關鍵字,隨著函數使用場合不同,this的值會發生變化。但是總有一個原則,那就是this指的是調用函數的那個對象。

this一般指向的是當前被調用者,但也可以通過其它方式來改變它的指向,下面將介紹三種方式:

1.call用作繼承時:

function Parent(age){this.name=['mike','jack','smith'];this.age=age;}function Child(age){Parent.call(this,age);//把this指向Parent,同時還可以傳遞參數}var test=new Child(21);console.log(test.age);//21console.log(test.name);test.name.push('bill');console.log(test.name);//mike,jack,smith,bill

2.call和apply都可以改變this指向,不過apply的第二個參數是散列分布,call則可以是一個數組

console.log(Math.max.apply(null,[1,2,3,4]));//4

apply() 方法接收兩個參數:一個是在其中運行函數的範圍,另一個是參數數組。其中,第二個參數可以是 Array 的執行個體,也可以是arguments 對象。call() 方法與 apply() 方法的作用相同,它們的區別僅在於接收參數的方式不同。對於 call()
方法而言,第一個參數是 this 值沒有變化,變化的是其餘參數都直接傳遞給函數。換句話說,在使用call() 方法時,傳遞給函數的參數必須逐個列舉出來。

3.ES5還定義了一個方法:bind(),它會建立一個函數的執行個體,其this值會被綁定到傳給bind()函數的值。如

window.color='red';var o={color:'blue'};function sayColor(){console.log(this.color);}var objectSaycolor=sayColor.bind(o);//var objectSaycolor=sayColor.bind();objectSaycolor();//blue

在這裡sayColor()調用bind()並傳入對象o,建立了objectSayColor()函數。objectSayColor()函數的this值等於o,因此即使是在全域範圍中調用這個函數,也會看到blue。

以上所述是小編給大家介紹的JS中改變this指向的方法(call和apply、bind),希望對大家以上協助!

下面還有點時間給大家補充點基礎知識有關:call()與apply()區別

一、方法的定義

call方法:

文法:call(thisObj,Object)

定義:調用一個對象的一個方法,以另一個對象替換當前對象。

說明:

call 方法可以用來代替另一個對象調用一個方法。call 方法可將一個函數的物件內容從初始的上下文改變為由 thisObj 指定的新對象。

如果沒有提供 thisObj 參數,那麼 Global 對象被用作 thisObj。

apply方法:

文法:apply(thisObj,[argArray])

定義:應用某一對象的一個方法,用另一個對象替換當前對象。

說明:

如果 argArray 不是一個有效數組或者不是 arguments 對象,那麼將導致一個 TypeError。
如果沒有提供 argArray 和 thisObj 任何一個參數,那麼 Global 對象將被用作 thisObj, 並且無法被傳遞任何參數。

程式碼範例:

function Animal(name) {   this.name = name;   this.showName = function() {     console.log(this.name);   }; } function Cat(name) {   Animal.call(this, name); } Cat.prototype = new Animal(); function Dog(name) {   Animal.apply(this, name); } Dog.prototype = new Animal(); var cat = new Cat("Black Cat"); //call必須是object var dog = new Dog(["Black Dog"]); //apply必須是array cat.showName(); dog.showName(); console.log(cat instanceof Animal); console.log(dog instanceof Animal);

類比call, apply的this替換

 function Animal(name) {   this.name = name;   this.showName = function() {     alert(this.name);   }; }; function Cat(name) {   this.superClass = Animal;   this.superClass(name);   delete superClass; } var cat = new Cat("Black Cat"); cat.showName();
您可能感興趣的文章:
  • 靈活的理解JavaScript中的this指向
  • js綁定事件this指向發生改變的問題解決方案
  • JavaScript call apply使用 JavaScript對象的方法綁定到DOM事件後this指向問題
  • 改變javascript函數內部this指標指向的三種方法
  • JavaScript 嵌套函數指向this對象錯誤的解決方案
  • javascript讓setInteval裡的函數參數中的this指向特定的對象

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.