首頁 > web前端 > js教程 > JS中改變this指向的方法(call和apply、bind)_javascript技巧

JS中改變this指向的方法(call和apply、bind)_javascript技巧

WBOY
發布: 2016-05-16 15:08:08
原創
1909 人瀏覽過

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);//21
console.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();
登入後複製
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板