JS中改變this指向的方法(call和apply、bind)
this是javascript的一個關(guān)鍵字,隨著函數(shù)使用場合不同,this的值會發(fā)生變化。但是總有一個原則,那就是this指的是調(diào)用函數(shù)的那個對象。
this一般指向的是當(dāng)前被調(diào)用者,但也可以通過其它方式來改變它的指向,下面將介紹三種方式:
1.call用作繼承時:
function Parent(age){ this.name=['mike','jack','smith']; this.age=age; } function Child(age){ Parent.call(this,age);//把this指向Parent,同時還可以傳遞參數(shù) } 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的第二個參數(shù)是散列分布,call則可以是一個數(shù)組
console.log(Math.max.apply(null,[1,2,3,4]));//4
apply() 方法接收兩個參數(shù):一個是在其中運(yùn)行函數(shù)的作用域,另一個是參數(shù)數(shù)組。其中,第二個參數(shù)可以是 Array 的實(shí)例,也可以是arguments 對象。call() 方法與 apply() 方法的作用相同,它們的區(qū)別僅在于接收參數(shù)的方式不同。對于 call()
方法而言,第一個參數(shù)是 this 值沒有變化,變化的是其余參數(shù)都直接傳遞給函數(shù)。換句話說,在使用call() 方法時,傳遞給函數(shù)的參數(shù)必須逐個列舉出來。
3.ES5還定義了一個方法:bind(),它會創(chuàng)建一個函數(shù)的實(shí)例,其this值會被綁定到傳給bind()函數(shù)的值。如
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()調(diào)用bind()并傳入對象o,創(chuàng)建了objectSayColor()函數(shù)。objectSayColor()函數(shù)的this值等于o,因此即使是在全局作用域中調(diào)用這個函數(shù),也會看到blue。
以上所述是小編給大家介紹的JS中改變this指向的方法(call和apply、bind),希望對大家以上幫助!
下面還有點(diǎn)時間給大家補(bǔ)充點(diǎn)基礎(chǔ)知識有關(guān):call()與apply()區(qū)別
一、方法的定義
call方法:
語法:call(thisObj,Object)
定義:調(diào)用一個對象的一個方法,以另一個對象替換當(dāng)前對象。
說明:
call 方法可以用來代替另一個對象調(diào)用一個方法。call 方法可將一個函數(shù)的對象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對象。
如果沒有提供 thisObj 參數(shù),那么 Global 對象被用作 thisObj。
apply方法:
語法:apply(thisObj,[argArray])
定義:應(yīng)用某一對象的一個方法,用另一個對象替換當(dāng)前對象。
說明:
如果 argArray 不是一個有效的數(shù)組或者不是 arguments 對象,那么將導(dǎo)致一個 TypeError。
如果沒有提供 argArray 和 thisObj 任何一個參數(shù),那么 Global 對象將被用作 thisObj, 并且無法被傳遞任何參數(shù)。
代碼示例:
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();
相關(guān)文章
利用js實(shí)現(xiàn)在瀏覽器狀態(tài)欄顯示訪問者在本頁停留的時間
本文為大家介紹下利用JavaScript實(shí)現(xiàn)在瀏覽器狀態(tài)欄顯示停留時間即在狀態(tài)欄上顯示訪問者在本頁停留的時間2013-12-12javascript實(shí)現(xiàn)左右緩動動畫函數(shù)
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)左右緩動動畫函數(shù),文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-11-11原生js模擬淘寶購物車項(xiàng)目實(shí)戰(zhàn)
這篇文章主要向大家推薦了一個原生js模擬淘寶購物車項(xiàng)目實(shí)戰(zhàn),包括商品的單選、全選、刪除、修改數(shù)量、價格計(jì)算、數(shù)目計(jì)算、預(yù)覽等功能的實(shí)現(xiàn),感興趣的小伙伴們可以參考一下2015-11-11Javascript中找到子元素在父元素內(nèi)相對位置的代碼
因?yàn)橄胱詣佣ㄎ坏阶釉?,所以一直在找各種找尋元素位置的代碼。 不過總是找不到可以定位子元素相對位置的代碼2012-07-07javascript實(shí)現(xiàn)input file上傳圖片預(yù)覽效果
這篇文章主要介紹了javascript實(shí)現(xiàn)input file上傳圖片預(yù)覽效果,感興趣的小伙伴們可以參考一下2015-12-12JS上傳圖片前實(shí)現(xiàn)圖片預(yù)覽效果的方法
這篇文章主要介紹了JS上傳圖片前實(shí)現(xiàn)圖片預(yù)覽效果的方法,涉及javascript操作圖片的技巧,需要的朋友可以參考下2015-03-03