JS中的call()和apply()要领总结

在js中每一个函数都包括两个非继续而来的要领:call()和apply()

call和apply的作用都是在特定的作用域中将函数绑定到别的一个对象上去运转,即能够用来从新定义函数的实行环境,二者仅在定义参数体式格局上有所区分

它们吸收参数方面差别:call和apply的第一个参数都是须要挪用的函数对象,在函数体内这个参数就是this的值,盈余的参数是须要传递给函数的值,call与apply的差别就是call传的值可所以恣意的,而apply传的盈余值必需为数组

call要领
语法:
Function.call(obj,param1,param2…)
obj:这个对象将替代Function类里的this对象

params:这是一个参数列表

注重: 挪用call的对象必需是一个函数对象,由于 call这个要领是在Function的prototype里的

定义:
挪用一个对象的一个要领,以另一个对象替代当前对象

关于call的定义很拗口。我的明白:a.call(b,arg1,arg2..)就是a对象的要领运用到b对象上

function add(a,b){

alert(a+b);

}
function reduce(a,b){

alert(a-b);

}
add.call(reduce,1,3) //将add要领运用到reduce,效果为4
这个例子中的意义就是用 add 来替代 reduce,add.call(reduce,3,1) == add(3,1) ,所以运转效果为:alert(4); // 注重:js中的函数实际上是对象,函数名是对 Function 对象的援用

window.firstName = “diz”;
window.lastName = “song”;
var myObject = { firstName: “my”, lastName: “Object” };
function HelloName() {

console.log("Hello " + this.firstName + " " + this.lastName, " glad to meet you!"); 

}
HelloName.call(window); //Hello diz song glad to meet you!
HelloName.apply(myObject); //Hello my Object glad to meet you!
在例子中,我们发明apply()和call()的真正用法是能够扩大函数赖以运转的作用域,假如我们想用传统的要领完成,请见下面的代码:

window.firstName = “diz”;
window.lastName = “song”;
var myObject = { firstName: “my”, lastName: “Object” };
function HelloName() {

console.log("Hello " + this.firstName + " " + this.lastName, " glad to meet you!"); 

}
HelloName(); //Hello diz song glad to meet you!
myObject.HelloName = HelloName;
myObject.HelloName(); //Hello my Object glad to meet you!
我们发明,要想让HelloName()函数的作用域在对象myObject上,我们须要动态建立myObject的HelloName属性,此属性作为指针指向HelloName()函数,如许,当我们挪用myObject.HelloName()时,函数内部的this变量就指向myObject,也就可以够挪用该对象的内部其他大众属性了

<input type=”text” id=”myText” value=”input text”>
<script>
function Obj(){this.value=”对象!”;}
var value=”global 变量”;
function Fun1(){alert(this.value);}
window.Fun1(); //global 变量
Fun1.call(window); //global 变量
Fun1.call(document.getElementById(‘myText’)); //input text
Fun1.call(new Obj()); //对象!
window.Fun1(); //global 变量
</script>
call能够转变this指向
function Animal(){

this.name=”animal”;
this.showName=function(){
    alert(this.name)
}

}
function Cat(){

this.name=”cat”;

}
var animal = new Animal();
var cat = new Cat();
animal.showName(); //效果为animal
animal.showName.call(cat); //经由过程call要领将底本属于Animal对象的showName()要领交给对象cat来运用,输入效果为”Cat”
call 的意义是把 animal 的要领放到cat上实行,本来cat是没有showName() 要领,现在是把animal 的showName()要领放到 cat上来实行,所以this.name 应该是 Cat

bind()要领
支撑此要领的浏览器有IE9+、Firefox4+、Safari5.1+、Opera12+、Chrome。它属于ECMAScript5的要领:

window.color = “red”;
var o = { color: “blue” };
function sayColor(){

console.log(this.color); 

}
var OSayColor = sayColor.bind(o);
OSayColor(); //blue
这里,sayColor()挪用bind()要领,并传入o对象,返回了OSayColor()函数,在OSayColor()中,this的值就为o对象

完成继续
function Animal(name){

this.name=name;
this.showName=function(){
    alert(this.name)
}

}
function Cat(name){

Animal.call(this,name);  

}
var cat = new Cat(“Black Cat”);
cat.showName(); //浏览器弹出Black Cat
Animal.call(this) 的意义就是运用 Animal对象替代this对象,那末 Cat中不就有Animal的一切属性和要领了吗,Cat对象就可以够直接挪用Animal的要领以及属性了

多重继续
function s1(name){

this.name = name;

}
var s2 = function(sex){

this.sex = sex;

}
var s3 = function(age){

  this.age = age;

}
var Student = function(name,sex,age,score){

s1.call(this,name);
  s2.call(this,sex);
  s3.call(this,age);
  this.score = score;

}
Student.prototype.construction = Student;
var s = new Student(‘jack’,’male’,’12’,’100′);
console.log(s.name); //输出:jack
console.log(s.sex); //输出:male
console.log(s.age); //输出:12
console.log(s.score);//输出:100
很简单,运用两个 call 就完成多重继续了。固然,js的继续另有其他要领,比方运用原型链

固然另有 apply,这两个要领基本上是一个意义,区分在于 call 的第二个参数可所以恣意范例,而apply的第二个参数必需是数组,也可所以arguments
另有 callee,caller..

apply要领:
语法:
Function.apply(obj,args)
obj:这个对象将替代Function类里this对象(就是定义函数代码块内里的this)

args:这个是数组,它将作为参数传给Function(args–>arguments),这个可所以数组也可所以 arguments

定义:
运用某一对象的一个要领,用另一个对象替代当前对象。

什么情况下用apply,什么情况下用call
在给对象参数的情况下,假如参数的情势是数组,比方apply示例内里传递了参数arguments,这个参数是数组范例,并且在挪用Animal的时刻参数的列表是对应一致的(也就是Animal和Cat的参数列表前两位是一致的) 就可以够采纳 apply , 假如我的Animal的参数列表是如许的(age,name),而Cat的参数列表是(name,age,kind),如许就可以够用call来完成了,也就是直接指定参数列表对应值的位置(Person.call(this,age,name,kind));

apply的一些其他奇妙用法:

apply能够将一个数组默默的剖析成一个一个的参数,能够将一个数组默许的转换为一个参数列表([param1,param2,param3] 转换为 param1,param2,param3) ,应用aplly这个特性我们就可以够用在一些针对字符串操纵的要领了:比方

1.Math.max 能够完成获得数组中最大的一项

由于Math.max 参数内里不支撑Math.max([param1,param2]) 也就是数组,然则它支撑Math.max(param1,param2,param3…),所以能够依据适才apply的谁人特性来处理
var max=Math.max.apply(null,array),如许随意马虎的能够获得一个数组中最大的一项 (apply会将一个数组装换为一个参数接一个参数的传递给要领) 这块在挪用的时刻第一个参数给了一个null,这个是由于没有对象去挪用这个要领,我只须要用这个要领帮我运算,获得返回的效果就行,.所以直接传递了一个null过去(应用Math要领然则不转变this的指向)

2.Math.max 能够完成获得数组中最小的一项

和 max是一个道理 var min=Math.min.apply(null,array)

3.Array.prototype.push 能够完成两个数组兼并

arr1=new Array(“1″,”2″,”3”);
var arr2=new Array(“4″,”5″,”6”);
Array.prototype.push.apply(arr1,arr2);

    原文作者:非玉
    原文地址: https://segmentfault.com/a/1190000018561625
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞