理解js中的call,js深入理解

发布时间：2022-11-24

本文目录一览：

1、在JS中，call()方法和apply()方法到底该怎么应用？
2、JS中关于call()方法的一个问题，如图中所示，求高手详解。
3、js中call和apply的区别
4、如何理解和熟练运用js中的call及apply
5、js中的call
6、[对于javascript 中的call函数的理解问题](#对于javascript 中的call函数的理解问题)

在JS中，call()方法和apply()方法到底该怎么应用？

  1. apply 与 call 是更改对象的内部指针，即改变对象的 this 指向的内容；
  2. call 与 apply 的第一个参数都是要传入给当前对象的对象（即函数内部的 this），后面的参数都是传递给当前对象的参数。

详细用法如下：

1. call()

  • 语法：obj1.call(obj2[, param1, param2, ...])
  • 定义：用 obj2 对象来代替 obj1，调用 obj1 的方法。即将 obj1 应用到 obj2 上；
  • 说明：call 方法可以用来代替另一个对象调用一个方法，call 方法可将一个函数的对象上下文从初始的上下文改变为由 obj2 指定的新对象。如果没有提供 obj2 参数，那么 Global 对象被用作 obj2。

2. apply()

  • 语法：obj1.apply(obj2[, arrArg])
  • 定义：用 obj2 对象来代替 obj1，调用 obj1 的方法，即将 obj1 应用到 obj2 上；
  • 说明：call() 和 apply() 作用一样，但是 call() 可以接收任何类型的参数，而 apply() 只能接收数组参数。

3. 基本用法

4. 继承特性

JS中关于call()方法的一个问题，如图中所示，求高手详解。

在分析这四种代码前，首先得弄清楚，如果一个对象 obj 调用了 f 函数，这个 obj 会发生什么样的变化。

obj.f();

上面的代码中对象 obj 调用了 f 函数，在 f 函数里，第一句是 this.a = 'A'。那么这个 this 是指什么？如果你不清楚，那我直接说好了。this 就是指那个调用 f 函数的对象，显然在这里是 obj。那么 this.a = 'A' 实际上就是 obj.a = 'A'，也就是说，obj 多了一个属性 a，其值为 A。同样的道理，第二句代码给 obj 添加了一个属性 b，其值是一个函数，alert 出一个 B。 明白了吗？obj.f() 的直接影响就是 obj.a = 'A'，obj.b = function(){alert('B')}。 弄明白了 obj.f() 的影响，接下来要搞清楚的就是 f.call(obj) 是一种怎么样的调用。如果你了解 call 这个函数，你可以知道的更多些；如果你不了解，希望你自己去仔细研究下，我这里只能直接告诉你：

f.call(obj) 相当于 obj.f()

看到了吗，这就是为什么要先讲清楚 obj.f() 的影响。因为 f.call(obj) 其实就是 obj.f()。 此时再来看这四种调用。

第一种：

首先来看看第一句，根据前面的分析，我们知道，此时 e.a = 'A'。那么第二句 alert(a) 干了什么呢？显然这 a 和 e 是没有关系的，由于变量 a 事先没有定义，在 JS 中不能直接使用未定义的变量，alert(a) 其实出错了，所以你没有看到任何反应。但如果你使用开发者工具，就能看到，这样的写法已经报错了。错误的代码，自然没有任何反应。

第二种：

第二种比较绕，还是来看看它的调用过程吧。f.call(e.t)，这个 e.t 是什么？因为 e 没有 t 这个属性，所以这句相当于 f.call(undefined)。当 call 函数的第一个参数是 undefined 或者 null 时，f.call(undefined) 就相当于 f()，也相当于 window.f()。那么根据开头的分析，这时 f 函数的调用者就是 window 了，也就是说 window.a = 'A' 了。第二句 alert(a)，显然在函数 e 的作用域里，变量 a 是不存在的，所以 JS 会到 window 的作用域去查找属性 a，而 window 的属性 a 是有的，它的值是 A，所以这个时候 alert(a) 就是 alert(window.a)，alert 的结果就是 A。

第三种：

我觉得看了前两种调用的分析，你应该知道 f.call(y.t) 相当于什么，它相当于 y.t.f()，但遗憾的是，y 这个变量并没有定义，无论是在函数 e 的作用域内还是 window 的作用域内，y 都是不存在的，而使用一个未定义的变量，是一种错误的语句，所以第三种调用和第一种一样，是错了，alert(a) 根本就没有执行，因此没有任何反应；当然，就算执行了 alert(a) 也是错的，它和第一种调用的错误就一样了。

第四种：

第四种应该是比较容易理解的了。根据开头的分析，f.call(e)，e.a = 'A'，这个没有意见吧？所以第二句 alert(e.a) 就 alert 出了 A。

js中call和apply的区别

call 方法

调用一个对象的一个方法，以另一个对象替换当前对象。

call([thisObj[, arg1[, arg2[, ..., argN]]]])

参数

  • thisObj：可选项。将被用作当前对象的对象。
  • arg1, arg2, ..., argN：可选项。将被传递方法参数序列。

说明

call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。 说明白一点其实就是更改对象的内部指针，即改变对象的 this 指向的内容。这在面向对象的 JS 编程过程中有时是很有用的。 引用网上一个代码段，运行后自然就明白其道理。

<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()); // 对象！
</script>

call 函数和 apply 方法的第一个参数都是要传入给当前对象的对象，即函数内部的 this。后面的参数都是传递给当前对象的参数。 运行如下代码：

<script>
var func = new function() { this.a = "func"; }
var myfunc = function(x) {
    var a = "myfunc";
    alert(this.a);
    alert(x);
}
myfunc.call(func, "var");
</script>

可见分别弹出了 func 和 var。到这里就对 call 的每个参数的意义有所了解了。 对于 apply 和 call 两者在作用上是相同的，但两者在参数上有区别。 对于第一个参数意义都一样，但对第二个参数：

  • apply 传入的是一个参数数组，也就是将多个参数组合成为一个数组传入；
  • call 则作为 call 的参数传入（从第二个参数开始）。 例如：
func.call(func1, var1, var2, var3)

对应的 apply 写法为：

func.apply(func1, [var1, var2, var3])

同时使用 apply 的好处是可以直接将当前函数的 arguments 对象作为 apply 的第二个参数传入。

如何理解和熟练运用js中的call及apply

必须先理解 this 上下文是个什么东西，这样你才知道 call、apply、bind 是为了解决什么问题才诞生的。才能知道该怎么使用它们。 《你不知道的 JavaScript》上卷讲的其中就包含 this，你可以去看下，这本书对于 this 的讲解是最通俗易懂和最详细的。

js中的call

Java 中对象包含属性和方法，方法即函数，只有对象可以调用方法。 但是 JS 中一切皆对象，函数是对象，函数也可以调用方法。

Function.prototype.call
Function.prototype.apply
Function.prototype.bind
Function.prototype.toString

为什么 JS 语言会在 function 原型上挂上这四个函数？ 因为好处太多了，现在我就说一说 call 的应用。 再深入思考一下，call 语法是基于什么形成的呢？ 了解底层语法有助于我们理解高级的语法。 因为在底层的语法眼中，高级语法只不过是工具，根本不算是语法，不过是由我定义构建处理来的。 理解 call 函数，核心必要知识： 哈哈哈，V8 内部的不知道，反正 JS 基于现有语法就有这个能力（还有解法，基于 __proto__，原型链的方式，var temp = Object.create(null)），利用干净的地方，防止覆盖原对象的函数。 显然，我们自己的上面的 mycall 还要很多问题。 这里我们就实现了自己的 call，以后看见 call 就知道都不过是些雕虫小技了（当然真实的实现方式肯定需要考虑更多因素和性能，而且在 V8 更大的环境下，可能还不止一种实现方式，保持谦虚）。

对于javascript 中的call函数的理解问题

标准解释：

call 方法是将一个对象的方法在另一个对象的上下文环境中执行。

详细解释：

你的例子中，myFun.call(myObject, 13, 3, 95) 执行时是这样的：

  1. 调用 myFun 函数；
  2. 将 13，3，95 三个参数传递给它（你的 myFun 方法中没有处理这些参数的代码，所以传了也没有用）；
  3. 将 myFun 函数中的所有 this 用 myObject 代替（同样，你的 myFun 函数中没有使用 this，所以执行结果和直接调用 myFun() 是一样的）。 修改一下你的例子，帮助你理解：
function myFun(p1, p2, p3) {
    this.para1 = p1;
    this.para2 = p2;
    this.para3 = p3;
}
var myObject = new Object();
alert(myObject.para1); // 显示 undefined
myFun.call(myObject, 13, 3, 95); 
/* 执行的时候，myFun 方法中的 this 全部用 myObject 对象代替，所以在这个例子中，执行 myFun 方法和直接写下面的语句效果是一样的： */
myObject.para1 = 13;
myObject.para2 = 3;
myObject.para3 = 95;
alert(myObject.para1); // 显示 13
推荐文章