JS中的call()和apply()方法总结

简介: 在js中每个函数都包含两个非继承而来的方法:call()和apply() call和apply的作用都是在特定的作用域中将函数绑定到另外一个对象上去运行,即可以用来重新定义函数的执行环境,两者仅在定义参数方式上有所区别 它们接收参数方面不同:call和apply的第一个参数都是需要调用的

在js中每个函数都包含两个非继承而来的方法:call()和apply()

call和apply的作用都是在特定的作用域中将函数绑定到另外一个对象上去运行,即可以用来重新定义函数的执行环境,两者仅在定义参数方式上有所区别

它们接收参数方面不同:call和apply的第一个参数都是需要调用的函数对象,在函数体内这个参数就是this的值,剩余的参数是需要传递给函数的值,call与apply的不同就是call传的值可以是任意的,而apply传的剩余值必须为数组

call方法

语法:

Function.call(obj,param1,param2...)
AI 代码解读

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
AI 代码解读

这个例子中的意思就是用 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! 
AI 代码解读

在例子中,我们发现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! 
AI 代码解读

我们发现,要想让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>
AI 代码解读

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" 
AI 代码解读

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 
AI 代码解读

这里,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
AI 代码解读

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
AI 代码解读

很简单,使用两个 call 就实现多重继承了。当然,js的继承还有其他方法,例如使用原型链

当然还有 apply,这两个方法基本上是一个意思,区别在于 call 的第二个参数可以是任意类型,而apply的第二个参数必须是数组,也可以是arguments
还有 callee,caller..

apply方法:

语法:

Function.apply(obj,args)
AI 代码解读

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);
AI 代码解读
目录
打赏
0
0
0
1
73
分享
相关文章
有没有方法可以保证在JavaScript中多个异步操作的执行顺序?
有没有方法可以保证在JavaScript中多个异步操作的执行顺序?
89 58
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
通过array.every()实现数据验证、权限检查和一致性检查;js数组元素检查的方法,every()的使用详解,array.some与array.every的区别(附实际应用代码)
array.every()可以用来数据验证、权限检查、一致性检查等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
382 62
JavaScript字符串的常用方法
在JavaScript中,字符串处理是一个非常常见的任务。JavaScript提供了丰富的字符串操作方法,使开发者能够高效地处理和操作字符串。本文将详细介绍JavaScript字符串的常用方法,并提供示例代码以便更好地理解和应用这些方法。
75 13
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
128 5
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
65 1
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
63 1
JavaScript中的原型 保姆级文章一文搞懂