call、apply、bind的用法
阿新 • • 發佈:2017-12-05
就是 his 指向 一次 cat math int urn bind
數組追加
//用apply拼接 var arr1=[12,‘name:foo‘,2048]; var arr2=[‘Joe‘,‘Hello‘]; Array.prototype.push.apply(arr1,arr2); console.log(arr1);//(5) [12, "name:foo", 2048, "Joe", "Hello"] //用call拼接 var arr1=[12,‘name:foo‘,2048]; vararr2=[‘Joe‘,‘Hello‘]; Array.prototype.push.call(arr1,arr2); console.log(arr1);//(4) [12, "name:foo", 2048, Array(2)] Array(2) ["Joe", "Hello"]是arr2只占一位,然後在第三位下面又分2位
獲取數組中的最大值和最小值
//對比call和apply (參數明確時用call) var numbers=[25,456,86,-45]; var maxNum=Math.max.apply(Math,numbers)//傳入的是一個數組 console.log(maxNum);//456 var numbers=[25,456,86,-45]; var maxNum=Math.max.call(Math,25,456,86,-45)//傳入的一個個參數 console.log(maxNum);//456
驗證是否是數組(前提是toString()方法沒有被重寫過)
var arr=[1,2,3,4,5]; function isArray(obj){ returnObject.prototype.toString.call(obj) === ‘[object Array]‘ ; } isArray(arr); console.log(isArray(arr))//true
apply的用法
function log(msg) // 常規寫法 { console.log(msg); } log(1);//1 log(1,2);//1 1
用apply的方法
function log() { console.log.apply(console,arguments); } log(1);//1 log(1,2);//1 2
bind的用法
//常規寫法
var foo = { bar : 1, eventBind: function(){ console.log(this) var _this = this; $(‘.someClass‘).on(‘click‘,function(event) { // Act on the event console.log(_this.bar); //1 }); } } foo.eventBind();
//bind的寫法
var foo = { bar : 1, eventBind: function(){ $(‘.someClass‘).on(‘click‘,function(event) { // Act on the event console.log(this.bar); //1 }.bind(this)); } } foo.eventBind();
bind() 創建了一個函數,當這個click事件綁定在被調用的時候,它的 this 關鍵詞會被設置成被傳入的值(這裏指調用bind()時傳入的參數)。因此,這裏我們傳入想要的上下文 this(其實就是 foo ),到 bind() 函數中。
然後,當回調函數被執行的時候, this 便指向 foo 對象。
案例
var bar = function(){ console.log(this.x); } var foo = { x:3 } var sed = { x:4 } var func = bar.bind(foo).bind(sed); func(); //3 此時輸出的為3 var fiv = { x:5 } var func = bar.bind(foo).bind(sed).bind(fiv); func(); //3 //此時輸出的為3
在Javascript中,多次 bind() 是無效的。更深層次的原因,bind() 的實現,相當於使用函數在內部包了一個 call / apply,第二次 bind() 相當於再包住第一次 bind() ,故第二次以後的 bind 是無法生效的。
bind()返回的內容
var obj = { x: 81, }; var foo = { getX: function() { return this.x; } } var a = foo.getX.bind(obj); //81 console.log(a()); //81 // console.log(foo.getX.bind(obj)()); //81 call和apply是立即執行,而bind返回的是函數
call 方法
//使用call方法調用匿名函數 var peoples=[ {name:‘Jane‘,age:16}, {name:‘Maria‘,age:15} ] for(var i=0;i<peoples.length;i++){ (function(i){ this.print=function(){ console.log(i+"----" +this.name+"---"+this.age); } this.print(); }).call(peoples[i],i) }
//使用call方法調用父構造函數 function Product(name,price){ this.name=name; this.price=price if(price < 0){ throw RangeError(‘Connot create product‘+this.name+‘with a negative price‘); } } function Food(name,price){ Product.call(this,name,price); this.category=‘food‘; } var cheese = new Food(‘feta‘, 5); console.log(cheese);//Food {name: "feta", price: 5, category: "food"}
簡單用法
function cat(){ } cat.prototype={ food:"fish", say:function(){ alert("I love "+this.food); } } var blackCat = new cat; blackCat.say(); var whiteDog = {food:"bone"}; console.log(whiteDog); blackCat.say.apply(whiteDog);
總結:
apply 、 call 、bind 三者都是用來改變函數的this對象的指向的;
apply 、 call 、bind 三者第一個參數都是this要指向的對象,也就是想指定的上下文;
apply 、 call 、bind 三者都可以利用後續參數傳參;
apply 、 call 會立刻執行,而bind的回調函數
apply傳入的是數組apply(this,[argu1,argu2,argu3,argu4]),call是call(this,argu1,argu2,argu3,argu4),如果傳入的參數個數是已知的,可以用call方法。如果個數未知,用apply方法。
call、apply、bind的用法