call窍奋,apply荐健、bind的區(qū)別:
bind綁定this的指向之后酱畅,不會(huì)立即調(diào)用當(dāng)前函數(shù),而是將函數(shù)返回江场。
而call纺酸,apply綁定this指向后會(huì)立即調(diào)用。
如果我們?cè)诓恢朗裁磿r(shí)候會(huì)調(diào)用函數(shù)的時(shí)候址否,需要改變this的指向餐蔬,那么只能使用bind。
比如:在定時(shí)器中佑附,我們想改變this的指向樊诺,但是又不能立即執(zhí)行,需要等待2秒音同,這個(gè)時(shí)候只能使用bind來(lái)綁定this词爬。
setInterval(function(){
// ...
}.bind(this), 2000);
一、Apply
方法重用
通過(guò) apply() 方法权均,您能夠編寫(xiě)用于不同對(duì)象的方法顿膨。
JavaScript apply() 方法
apply() 方法與 call() 方法非常相似:
在本例中,person 的 fullName 方法被應(yīng)用到 person1:
實(shí)例
var person = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var person1 = {
firstName: "Bill",
lastName: "Gates",
}
person.fullName.apply(person1); // 將返回 "Bill Gates"
二叽赊、call
call函數(shù)
在Function.prototype上掛載一個(gè)newCall函數(shù)表示是對(duì)call的模擬恋沃,具體邏輯看注釋
Function.prototype.newCall = function(context){
// 1 判斷context是否為object,如果是object就代表可能是Object 或者 null必指,如果不是就賦值一個(gè)空對(duì)象
if (typeof context === 'object') {
context = context || window // context 如果是null就會(huì)賦值為window
} else {
context = Object.create(null)
}
// 2 在context下掛載一個(gè)函數(shù)囊咏,函數(shù)所在的key隨機(jī)生成,防止context上已有同名key
var fn = +new Date() + '' + Math.random() // 用時(shí)間戳+隨機(jī)數(shù)拼接成一個(gè)隨機(jī)字符串作為一個(gè)新的key
context[fn] = this
// 3 newCall如果還有其他的參數(shù)傳入也要考慮用到
var args = []
for(var i = 1; i < arguments.length; i++) {
args.push('arguments['+ i + ']')
}
// 4 重點(diǎn)在這里塔橡,執(zhí)行context[fn]這個(gè)函數(shù)梅割,只能用eval,因?yàn)閚ewCall的入?yún)?shù)不確定
var result = eval('contextfn') // args是一個(gè)數(shù)組谱邪,但是當(dāng)它和字符串相加時(shí)自動(dòng)調(diào)用內(nèi)部的toString方法轉(zhuǎn)成字符串
delete context[fn] // 用完后從context上刪除這個(gè)函數(shù)
// 5 返回結(jié)果
return result
}
原理:
在要掛載的對(duì)象context上臨時(shí)添加一個(gè)方法 f
用eval執(zhí)行這個(gè)臨時(shí)添加的方法f炮捧,并拿到執(zhí)行后的結(jié)果result
刪除這個(gè)額外的方法f庶诡,并返回執(zhí)行結(jié)果result
帶參數(shù)的 apply() 方法
apply() 方法接受數(shù)組中的參數(shù):
實(shí)例
var person = {
fullName: function(city, country) {
return this.firstName + " " + this.lastName + "," + city + "," + country;
}
}
var person1 = {
firstName:"John",
lastName: "Doe"
}
person.fullName.apply(person1, ["Oslo", "Norway"]);
與 call() 方法對(duì)比:
實(shí)例
var person = {
fullName: function(city, country) {
return this.firstName + " " + this.lastName + "," + city + "," + country;
}
}
var person1 = {
firstName:"John",
lastName: "Doe"
}
person.fullName.call(person1, "Oslo", "Norway");
在數(shù)組上模擬 max 方法
您可以使用 Math.max() 方法找到(數(shù)字列表中的)最大數(shù)字:
實(shí)例
Math.max(1,2,3); // 會(huì)返回 3
由于 JavaScript 數(shù)組沒(méi)有 max() 方法惦银,因此您可以應(yīng)用 Math.max() 方法。
實(shí)例
Math.max.apply(null, [1,2,3]); // 也會(huì)返回 3
三末誓、bind方法
bind 是復(fù)制的意思扯俱,也可以改變調(diào)用其的函數(shù)或方法的 this 指向,參數(shù)可以在復(fù)制的時(shí)候傳進(jìn)去喇澡,也可以在復(fù)制之后調(diào)用的時(shí)候傳進(jìn)去迅栅。
使用語(yǔ)法:
1、函數(shù)名.bind(對(duì)象, 參數(shù)1, 參數(shù)2, ...); // 返回值是復(fù)制的這個(gè)函數(shù)
2晴玖、方法名.bind(對(duì)象, 參數(shù)1, 參數(shù)2, ...); // 返回值是復(fù)制的這個(gè)方法
1读存、函數(shù)調(diào)用 bind
function f1(x, y) {
console.log(x + y + this);
}
// 1.參數(shù)在復(fù)制的時(shí)候傳入
var ff = f1.bind(null,10,20); // 這只是復(fù)制的一份函數(shù)为流,不是調(diào)用,返回值才是
ff();
// 2.參數(shù)在調(diào)用的時(shí)候傳入
var ff = f1.bind(null); // 這只是復(fù)制的一份函數(shù)让簿,不是調(diào)用敬察,返回值才是
ff(10,20);
2、方法調(diào)用 bind
function Person(age) {
this.age = age;
}
Person.prototype.eat = function () {
console.log(this.age); // this 指向?qū)嵗龑?duì)象
};
function Student(age) {
this.age = age;
}
var per = new Person(18);
var stu = new Student(20);
var ff = per.eat.bind(stu);
ff(); // 20