一向很难明白js中的call apply bind,在w3schools,mdn阅读了,也看了许多相干的文章,本日我来写下我明白的call apply bind
起首建立一个函数
function man(){}
man.prototype = {
name: "Jack",
love: "Rose",
say: function(){
console.log(this.name +" love " + this.love)
}
}
var James = new man
James.say() //Jack love Rose
如今有一个新的对象Mike,但Mike里没有say的要领,然则又要运用say要领应当怎样办呢,那就能够用call和apply来挪用James的say要领
var Mike = {
name: "唐老鸭",
love: "小朋友"
}
James.say.call(Mike)
James.say.apply(Mike)
此处能够看出,call于apply的用法险些雷同,只要一个区分,就是call()要领接收的是若干个参数的列表,而apply()要领接收的是一个包括多个参数的数组。
下面的示例,展现了call所传参数的情势
经由过程call来完成继续
建立一个组织函数product
function product(name, price){
this.name = name
this.price = price
}
再建立一个组织函数food,援用product
function food(name, price){
product.call(this, name, price)
this.category = "food"
}
var rice = new food("东北大米", "50")
rice //food {name: "东北大米", price: "50", category: "food"}
运用food组织函数建立的对象实例具有在country组织函数增加的属性name和price,但category属性是在food组织函数中定义的。
这里也能够看出,call接收的参数第一位是须要通报的this对象,在非严厉形式下,假如不须要对this举行转变,可把第一个值设为null,会自动指定到全局对象。背面的值是函数通报进来的参数
运用call挪用匿名函数
建立以下函数
var animals = [
{species: "Lion", name: "King"},
{species: "Whale", name: "Fail"}
]
for (var i = 0; i < animals.length; i++) {
(function(i) {
this.print = function() {
console.log('#' + i + ' ' + this.species + ': ' + this.name)
}
this.print()
}).call(animals[i], i)
}
此函数经由过程call挪用了匿名函数
apply
apply() 要领挪用一个函数, 其具有一个指定的this值,以及作为一个数组(或相似数组的对象)供应的参数。
例1,数组之间的追加
var arr1 = ["hello", "world"]
var arr2 = ["animals", "friends"]
Array.prototype.push.apply(arr1, arr2)
例2,猎取数组最大最小值
var num = [50, 10, 255, 800]
var maxNum = Math.max.apply(Math, num)
var minNum = Math.min.apply(Math, num)
var maxNum1 = Math.max.call(Math, 50, 10, 255, 800)
console.log(maxNum) //800
console.log(minNum) //10
num须要掏出最大最小值,运用apply挪用Math的要领即可
例3,类数组,伪数组运用数组要领
Array.prototype.slice.apply(document.querySelectorAll("div")) //打印出一切div
Array.prototype.slice.apply(document.querySelectorAll("div"), [1, 3])
//打印下标1最先3之前完毕的div
bind
bind( ) 函数会建立一个新函数(称为绑定函数),新函数与被调函数(绑定函数的目的函数)具有雷同的函数体(在 ECMAScript 5 范例中内置的call属性)。当新函数被挪用时 this 值绑定到 bind( ) 的第一个参数,该参数不能被重写。绑定函数被挪用时,bind( ) 也接收预设的参数供应给原函数。一个绑定函数也能运用new操作符建立对象:这类行动就像把原函数当做组织器。供应的 this 值被疏忽,同时挪用时的参数被供应给模仿函数。
例子:
建立一个函数,运用这个函数不论怎样挪用都只要一个this的值
this.x = 100
var dog = {
x: 10,
getX: function() {
console.log(this.x)
}
}
dog.getX() //10
var hello = dog.getX
hello() //100 这里由于this指向全局作用域
这里怎样才挪用dog的getX要领呢?
bind能够帮到你
var bindHello = hello.bind(dog)
bindHello() //10
从hello函数建立一个绑定函数,把this的值绑定到新的函数上,然后就能够兴奋的挪用了
总结
call、apply和bind都是转变函数this对象的指向的,bind返回新的函数,而call和apply会马上实行函数