您的位置:

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

本文目录一览:

在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.call(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

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

2022-11-24
js中call的使用问题,jscall

本文目录一览: 1、Js中call和apply的区别和用法是什么? 2、在JS中,call()方法和apply()方法到底该怎么应用? 3、js中的call 4、如何理解和熟练运用js中的call及a

2023-12-08
js高级程序设计笔记14(js高级程序设计笔记14页)

本文目录一览: 1、JavaScript高级程序设计 该怎么看 2、JavaScript学习笔记之数组基本操作示例 3、JS中有关sort以及return的问题 JavaScript高级程序设计 该怎

2023-12-08
js代码总结体会,js基础知识总结笔记

本文目录一览: 1、js到底难不难学? 2、JS 代码 求解释 可以详细的 说明一下 谢谢 3、浅谈js写轮播图的思路与心得 4、JavaScript与WEB前台开发课程实训总结怎么写 5、js中继承

2023-12-08
htmljs编程笔记(html代码笔记)

本文目录一览: 1、html代码和JS代码有什么区别 2、如何在html中调用js函数 3、JavaScript学习笔记之数组基本操作示例 4、HTML5初学者笔记 5、《web前端笔记7》js字符—

2023-12-08
重学java笔记,java笔记总结

2022-11-23
深入理解Call Graph

2023-05-18
js代码中script,js代码中的问号是什么意思

本文目录一览: 1、javascript中script的SRC属性 2、JS代码里加载script代码,并隐藏其内容怎么弄呢? 3、使用javascript必须使script标签吗 javascrip

2023-12-08
javascript简要笔记,JavaScript读书笔记

2022-11-17
js代码整洁随笔,js代码整理

本文目录一览: 1、如何在页面让JavaScript代码原样显示,用标签不起用,js照常运行。请看问题补充 2、怎么让JS文件代码对齐 3、怎么样格式化javascript,怎么样格式化js 4、为什

2023-12-08
jsp程序开发学习笔记2,jsp程序设计题库

本文目录一览: 1、《JSP&Servlet学习笔记》pdf下载在线阅读,求百度网盘云资源 2、林信良编著jsp&servlet学习笔记第2版课后答案吗 3、jsp有没有快速掌握的办法呀? 4、要学J

2023-12-08
java学习笔记(java初学笔记)

2022-11-14
java中使用js处理数据,js获取java变量

本文目录一览: 1、java程序中运行js脚本 2、java使用js处理逻辑 3、如何在java中调用js方法 java程序中运行js脚本 123456789101112131415161718192

2023-12-08
深入理解Bootstrap FileInput

2023-05-22
js的事件处理丶java教程网(js中事件)

本文目录一览: 1、关于js事件捕获的用法 2、JS中事件的调用 3、请简单说明javascript中处理事件的步骤 4、java中js的事件使用---$("p").style("background

2023-12-08
js经典实例大全,js案例100讲解

本文目录一览: 1、js闭包是什么? 2、js下拉菜单,怎样更简便的实现? 3、js求和小案例 求解 4、JavaScript学习笔记之数组基本操作示例 5、JavaScript实现计算多边形质心的方

2023-12-08
js多个call(js多个参数值转为数组)

本文目录一览: 1、如何理解和熟练运用js中的call及apply 2、在JS中,call()方法和apply()方法到底该怎么应用? 3、JS中 call和apply的区别和作用 4、请教一个js函

2023-12-08
js实现的分页代码(js前端分页)

本文目录一览: 1、怎么用js来实现页面的分页,有案列代码吗?请给个代码看看,谢谢 2、如何用JS将数据在页面上分页显示出来 3、JS如何控制分页 4、求JS分页实例或者servlet分页实例,最好有

2023-12-08
js和web视频(视频播放js)

本文目录一览: 1、基于webrtc以及nodejs的P2P实时视频demo 2、webrtc.js 是什么 3、vediojs嵌入到web项目中的问题 4、webview 与js怎样实现数据交互 5

2023-12-08
javascript一句话笔记,javascript基本语句

2022-11-16