javascript關于this 以及this的顯示設置(apply、call、bind)

LiveVideoStack 發布于2019-08-21 11:20 / 1092人閱讀

摘要：如果連續呢結果會是什么結果還是第一個原因是，在中，多次是無效的。更深層次的原因，的實現，相當于使用函數在內部包了一個，第二次相當于再包住第一次故第二次以后的是無法生效的。

this

1.其實js中的this沒那么難理解，當找不到this時記住一句話：
誰調我，我就指誰！new 誰指誰

function text1(){
    console.log(this);     //指window因為是window調我了
}
var text2={
    one:function(){
        console.log(this); //指text因為text調我，我就指它！
    }
}

function text3(){
    this.x=this;
}
var t=new text3();
   t.x;                     //指text3 new 誰指誰

apply、call

2.apply和call兩個方法的作用都是改變this的指向
來個栗子：

function food(){}
food.prototype={
    color:"red",
    name:"apple",
    sayName:function(){
        console.log("my name is "+this.name); 
    }
}
var text1=new food();

text1.sayName();//my name is apple

var banana={
    name:"banana"
}
var pear={
    name:"pear"
}
text1.sayName.apply(banana); //my name is banana
text1.sayName.call(pear); //my name is pear

apply與call的作用完全一樣就是接收參數的方式不同列如：

var fn=function(arg1,arg2){}
apply(fn,[arg1,arg2]);
call(fn,arg1,arg2);

那么當參數，數量固定的時候用call不固定時用apply
這里特別說下函數內的arguments對象他是一個偽數組不能直接使用push等方法
下面寫幾個栗子展示下他兩的實際用法：

//第一個栗子追加數組
var array1=[1,2,3,4,5];
var array2=[6,7,8,9,10];
Array.prototype.push.apply(array1,array2);
array1; //[1,2,3,4,5,6,7,8,9,10]

//第二個栗子求number的最大值
var numbers=[1,10,33,100,-55,423];
Math.max.apply(Math,numbers);
Math.max.call(Math,1,10,33,100,-55,423);

//來個經常用到的代理console.log方法
function log(msg){
    console.log(msg);
}
//上面是常用的寫法，但這樣 我傳的值是 log(1) 沒毛病 如果是log(1,2,3)呢？那就有毛病了
//他不管后面傳多少參數都會被舍棄掉只會打印1
//改進版本
function log(){
    console.log.apply(console,arguments);
}
//這樣不管傳多少個參數都能打印出來了

bind

bind() 方法與 apply 和 call 很相似，也是可以改變函數體內 this 的指向。

概念是：bind()方法會創建一個新函數，稱為綁定函數，當調用這個綁定函數時，綁定函數會以創建它時傳入 bind()方法的第一個參數作為 this，傳入 bind() 方法的第二個以及以后的參數加上綁定函數運行時本身的參數按照順序作為原函數的參數來調用原函數。

var say=function(){
    console.log(this.x)
}
var one={
    x:1
}
var two={
    x:2
}
var three={
    y:3
}
var fn=say.bind(one);
fn()//1
var fn2=say.bind(two).bind(one).bind(three);//如果連續bind呢？結果會是什么？
fn2();//結果還是第一個bind

原因是，在Javascript中，多次 bind() 是無效的。更深層次的原因， bind() 的實現，相當于使用函數在內部包了一個 call / apply ，第二次 bind() 相當于再包住第一次 bind() ,故第二次以后的 bind 是無法生效的。
那么call、apply、bind三者之間的區別和應用場景是什么呢？

var obj={
    x:81
}
var text={
    fn:function(){
       return this.x;
    }
}
console.log(text.fn.call(obj));//81
console.log(text.fn.apply(obj));//81
console.log(text.fn.bind(obj)());//81

結果都是81，但注意的是bind（）后面多了對調用的括號。
那么總結一下：

apply 、 call 、bind 三者都是用來改變函數的this對象的指向的；

apply 、 call 、bind 三者第一個參數都是this要指向的對象，也就是想指定的上下文；

apply 、 call 、bind 三者都可以利用后續參數傳參；

bind 是返回對應函數，便于稍后調用；apply 、call 則是立即調用。

云服務器 GPU云服務器 javascript的this JS中bind、call和apply的作 javaScript中的this javascript中this詳解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86574.html

關于Javascript中apply、call、bind方法說明

摘要：需要注意的是，指定的值并不一定是該函數執行時真正的值，如果這個函數處于非嚴格模式下，則指定為或時會自動指向全局對象瀏覽器中就是對象，同時值為原始值數字，字符串，布爾值的會指向該原始值的自動包裝對象。 JavaScript函數存在「定義時上下文」和「運行時上下文」以及「上下文是可以改變的」這樣的概念 apply和call函數 call() 和 apply()都是為了改變某個函數運行時的...

mrcode 2019-08-20 10:14 評論0 收藏0
JavaScript初學者必看“this”

摘要：因為關鍵字沒有處于一個聲明的對象內部，默認指向全局對象。這一點可能對于大部分初學者來說有點難以理解。函數會返回一個函數，并且將綁定好。自從年雙十一正式上線，累計處理了億錯誤事件，得到了金山軟件百姓網等眾多知名用戶的認可。譯者按: JavaScript的this和Java等面向對象語言中的this大不一樣，bind()、call()和apply()函數更是將this的靈活度進一步延伸。...

BlackMass 2019-08-20 16:49 評論0 收藏0
Javascript：call（），apply（）和bind（）

摘要：在面向對象的中，我們了解到在中，一切都是對象。到目前為止，我們已將函數視為由名稱可選，也可以是匿名函數組成的對象及其在調用時執行的代碼。這意味著，我們可以調用任何函數，并在調用函數中明確指定。和用于完全相同的目的。 What s this 在面向對象的JS中，我們了解到在JS中，一切都是對象。因為一切都是對象，我們開始明白我們可以為函數設置和訪問其他屬性。而this提供了一種更優雅的方...

WrBug 2019-08-30 15:54 評論0 收藏0
Javascript：call（），apply（）和bind（）

摘要：在面向對象的中，我們了解到在中，一切都是對象。到目前為止，我們已將函數視為由名稱可選，也可以是匿名函數組成的對象及其在調用時執行的代碼。這意味著，我們可以調用任何函數，并在調用函數中明確指定。和用于完全相同的目的。 What s this 在面向對象的JS中，我們了解到在JS中，一切都是對象。因為一切都是對象，我們開始明白我們可以為函數設置和訪問其他屬性。而this提供了一種更優雅的方...

Sike 2019-08-02 13:56 評論0 收藏0
Javascript：call（），apply（）和bind（）

摘要：在面向對象的中，我們了解到在中，一切都是對象。到目前為止，我們已將函數視為由名稱可選，也可以是匿名函數組成的對象及其在調用時執行的代碼。這意味著，我們可以調用任何函數，并在調用函數中明確指定。和用于完全相同的目的。 What s this 在面向對象的JS中，我們了解到在JS中，一切都是對象。因為一切都是對象，我們開始明白我們可以為函數設置和訪問其他屬性。而this提供了一種更優雅的方...

sarva 2019-08-23 14:11 評論0 收藏0