JavaScript call 与apply的用法（转）

最新推荐文章于 2024-03-31 15:50:35 发布
最新推荐文章于 2024-03-31 15:50:35 发布
阅读量146 收藏 2
点赞数
分类专栏： JavaScript 文章标签： js JavaScript call apply
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangjiahao123456/article/details/84628558
版权
一、方法的定义
call方法:
语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]])
定义：调用一个对象的一个方法，以另一个对象替换当前对象。
说明：
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

apply方法：
语法：apply([thisObj[,argArray]])
定义：应用某一对象的一个方法，用另一个对象替换当前对象。
说明：
如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。


实质：通过改变this指向，改变函数的调用对象。（this指向调用时才知道指向谁）

二、例子程序：
Java代码
1. <html>
2. <head>
3. <script language="javascript">
4. /**定义一个animal类*/
5. function Animal(){
6. this.name = "Animal";
7. this.showName = function(){
8. alert(this.name);
9. }
10. }
11. /**定义一个Cat类*/
12. function Cat(){
13. this.name = "Cat";
14. }
15.
16. /**创建两个类对象*/
17. var animal = new Animal();
18. var cat = new Cat();
19.
20. //通过call或apply方法，将原本属于Animal对象的showName()方法交给当前对象cat来使用了。
21. //输入结果为"Cat"
22. animal.showName.call(cat,",");
23. //animal.showName.apply(cat,[]);
24.
25.
26. </script>
27. </head>
28. <body></body>
29. </html>


以上代码无论是采用animal.showName.call或是animal.showName.apply方法，运行的结果都是输出一个"Cat"的字符串。说明showName方法的调用者被换成了cat对象，而不是最初定义它的animal了。这就是call和apply方法的妙用！

三、小结：
call和apply方法通常被用来实现类似继承一样的功能，以达到代码复用的功效。它们的区别主要体现在参数上。

。。。。。。。。。。。你所写的，只是call和apply最基本的作用。根本不是面向对象

你代码的修改版（一般情况已经够用）
Javascript代码
1. <html>
2. <head>
3. <script language="javascript">
4.
5. function Animal(name){
6. this.name = name;
7. this.showName = function(){
8. alert(this.name);
9. }
10. }
11.
12. function Cat(name){
13. Animal.call(this, name);
14. }
15.
16. var cat = new Cat("Black Cat");
17.
18. cat.showName();
19.
20.
21. </script>
22. </head>
23. <body></body>
24. </html>


更完全版
Javascript代码
1. <html>
2. <head>
3. <script language="javascript">
4.
5. function Animal(name){
6. this.name = name;
7. this.showName = function(){
8. alert(this.name);
9. }
10. }
11.
12. function Cat(name){
13. Animal.call(this, name);
14. }
15.
16. Cat.prototype = new Animal();
17.
18. var cat = new Cat("Black Cat");
19.
20. cat.showName();
21.
22. alert(cat instanceof Animal);
23.
24.
25. </script>
26. </head>
27. <body></body>
28. </html>


call和apply都是基于this替换。把this的语义转了

模拟call, apply的this替换
Javascript代码
1. function Animal(name){
2. this.name = name;
3. this.showName = function(){
4. alert(this.name);
5. };
6. };
7.
8. function Cat(name){
9. this.superClass = Animal;
10. this.superClass(name);
11. delete superClass;
12. }
13.
14. var cat = new Cat("Black Cat");
15.
16. cat.showName();


1. function Animal(name)
2. {
3. this.name = name;
4. }
5. function Dog(name)
6. {
7. this.name = name;
8. this.base = Animal;
9. this.base('animal');
10. }
11.
12. var d = new Dog('dog.chen');
13. window.alert(d.name);


为什么Dog传递的是'dog.chen'，而结果居然是 'animal'?我想不明白
在 Dog的构造函数里面直接调用了 Animal的构造函数为什么会影响Dog的name的属性呢？

1. function Animal(name) {
2. this.name=name;
3. }
4.
5. funciton Dog(name) {
6. this.base=Animal
7. this.base(name); /*先执行父类的构造函数，此时父类构造函数中上下文的this，就是Dog构造函数中的上下文this*/
8. this.name=name //覆盖了父类中继承下来的this.name
9. }


1. function Animal(name){
2. this.name = name;
3. }
4. Animal.protptype.showName = function(){
5. alert(this.name);
6. }
7. function Dog(name,color){
8. Animal.call(this,name); //相当于 java的super();
9. this.color = color;
10. }
11. Dog.prototype = new Animal(); //继承父类的方法，书上说在这里调用无参数的构造函数是标准做法，但我不清楚为什么
12. Dog.prototype.showColor = function(){
13. alert(this.color);
14. }
15. var dog = new Dog('wangwang','white');
16. dog.showName(); //输出wangwang
17. dog.showColor(); //输出white


apply(),call()最常见的理解就是继承的概念，继承这个概念有点不好理解，我们可以从他的扩充函数作用域这个角度去理解：
《javascript高级程序设计》书上的例子：
window.color="red";
var o={color:"blue"};
function sayColor(){
alert(this.color);
}
sayColor();//red
sayColor().call(this);//red
sayColor.call(window);//red
sayColor.call(o);//blue

sayColor()是全局函数，
sayColor().call(this);//red
sayColor.call(window);//red
这两个是显式的在全局作用域中调用函数方式

运行sayColor.call(o);时，函数的执行环境就改变了，这是函数中的this指向了o作用域改变到o中了。

在这里，使用call()，apply()扩充作用域的最大好处在于，对象不需要和方法有任何耦合关系。

另外再次从扩充作用域的角度去回顾之前的一片文章（Javascript 中的 call 继承（转载整理））的例子：

function Person(name,age){
this.name = name;
this.age=age;
this.alertName = function(){
alert(this.name);
}
this.alertAge = function(){
alert(this.age);
}
}

function webDever(name,age,sex){
Person.call(this,name,age);//这里的Person作用域就变为了webDever里面的作用域了，Person原本的this指向的是全局，现在它的this指向webDever函数中，可以理解为webDever类就继承Person类，更加通俗的理解就是，Person函数可以在webDever的作用域中执行了
this.sex=sex;
this.alertSex = function(){
alert(this.sex);
}
}

var test= new webDever("愚人码头",28,"男");
test.alertName();//愚人码头
test.alertAge();//28
test.alertSex();//男
心有浩然
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【JavaScript】JavaScript中call、apply与bind的区别：进阶特性与应用场景
Allen-
04-27 1298
JavaScript 中的call()apply()和bind()📢call()方法：提供了即时调用函数并设定其上下文环境的能力，同时允许通过逗号分隔的参数列表传递具体参数。这对于需要精确控制函数执行时this指向以及直接传递参数的场景尤为适用。📚apply()方法：与call()类似，同样能够改变函数调用的上下文，并立即执行函数。不同之处在于，apply()接收一个数组或类数组对象作为参数，这些数组元素将被展开并分别作为单独参数传递给目标函数。
JavaScript中call和apply的用法与区别
MyBlog
03-29 175
call和apply的用法 例子 function Car(color,size) { this.color = color; this.size = size; } function SmallCar(color,size,date) { Car.call(this,color,size); this.date = date; } var car = new SmallCar('blue',12,23); 在new的时候，SmallCar方法中的this指向car，然后通过Car.call()
Javascript 中 apply、call、bind用法汇总
weixin_44302503的博客
05-30 1443
apply、call 在 javascript 中，call 和 apply 都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部 this 的指向。 JavaScript 的一大特点是，函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。 举个例子： function fruits() {} fruits.prototype = { color: "red", say: function() { console.log("
JavaScript call与apply的使用方式
M_Andrain的博客
08-05 17
关于call与apply的规则表达式说明 FunName.Call(instance,arg1,arg2,....) FunName.apply(instance,[arg1,arg2,...]) ...
JavaScript中call与apply的区别
流楚丶格念的博客
01-27 3526
文章目录一 使用：二 异同三 两个方法该如何选择？ 一 使用： function log (...args) { console.log(...args) } function log () { console.log.apply(console, arguments) } log(1, 2, 3) log.bind() call() 定义：调用一个对象的一个方法，以另一个对象替换当前对象。 调用call的对象必须是个函数function call
JavaScript call，apply，bind详解及实现
Niall_Tonshall的博客
01-27 1064
1.前言 call，apply，bind这三个方法都是用来改变函数的this指向，如果有对this不熟悉的朋友，可以先看看笔者的这篇博客。 call & apply call()语法： function.call(thisArg, arg1, arg2, ...) thisArg 可选的。在 function 函数运行时使用的 this 值。请注意，this可能不是该方法看到的实际值：如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象，原始值
JavaScript中call、apply、bind详解及手写实现
to_the_Future的博客
03-31 1033
首先，我们都知道JavaScript中的this指向分为软绑定及硬绑定。并且this的指向与执行上下文有关系。在全局执行上下文中，this指向 全局对象（），在对象调用其内部方法时，this指向调用的地方，这就称为。那么如何使用呢？这就需要使用JavaScript中内置的方法来实现了。
Javascript的call和apply方法
mrgao的博客
04-09 273
在JavaScript中call、apply、bind是Function 对象自带的三个方法，这三个方法的主要作用是改变函数中的 this 指向，从而可以达到接花移木的效果。 一个例子： //有刀没肉 function peopleOne(name,name2){ var knife="西瓜刀"; console.log(name,name2,"使用",knife,"切",th...
JavaScript进阶 —— 深入理解 call，apply 和 bind
金戈鐡馬
03-28 1653
在JavaScript 中，call、apply 和 bind 是 Function 对象自带的三个方法，这三个方法的主要作用是改变函数中的 this 指向，从而可以达到`接花移木`的效果。本文将对这三个方法进行详细的讲解，并列出几个经典应用场景。1、call。
Javascript call 和 apply 用法
qq_35086581的博客
10-11 247
Call 和 Apply 的一个小例子function changeColor(color){ this.style.backgroundColod = color; } //1 changeColor('#000'); //Error: window 没有style属性//2 var container = document.getElementById('container'); cha
javascript call和apply方法
10-30
另一方面，`apply`方法与`call`非常相似，也是用于改变`this`的值，但它接受一个参数数组。这使得`apply`更适合于处理动态数量的参数。`apply`的基本语法如下： ```javascript functionName.apply(object, [arg1, ...
javascript中call和apply方法浅谈
10-26
`apply`方法与`call`类似，但它处理参数的方式略有不同。`apply`也接受两个参数：第一个参数同样是`this`的指向，第二个参数是一个数组或类数组对象，其元素会被作为单独的参数传递给被调用的函数。继续使用上面的...
javascript中call apply 与 bind方法详解
10-22
`bind()`方法与前两者不同，它不会立即执行函数，而是返回一个新的函数，新函数的`this`值被绑定到了`bind()`的第一个参数。基本语法为：`fun.bind(thisArg[, arg1[, arg2[, ...]]])`。 举例说明： ```...
Javascript call和apply区别及使用方法
10-26
JavaScript中通过call或者apply用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象
javascript中call和apply的用法示例分析
10-24
主要介绍了javascript中call和apply的用法示例分析，非常的详细,需要的朋友可以参考下
性能~问题业务场景稳定性测试
07-25
1
《AI大模型应用》--百度AI 文心一言.zip
07-25
个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！
b112日常办公用品直售推荐系统-springboot+vue.zip（可运行源码+sql文件+）
最新发布
07-25
日常办公用品直售推荐系统是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 日常办公用品直售推荐系统是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 日常办公用品直售推荐系统是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 日常办公用品直售推荐系统是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 日常办公用品直售推荐系统是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 日常办公用品直售推荐系统是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 日常办公用品直售推荐系统是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。
Android个性化书架应用构建.rar
07-25
Android个性化书架应用构建
"深度解析JavaScript中的apply与call方法
而call方法与apply方法的第一个参数是相同的，只不过第二个参数是一个参数列表，而不是一个数组或类数组。 本文还对apply和call的用法进行了进一步的详细解释。我们以具体的代码示例来说明如何使用apply和call，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值