JavaScript中5种调用函数的方法
转载 & & 投稿：junjie
这篇文章主要介绍了JavaScript中5种调用函数的方法,本文详细的介绍了Javascript中各种函数调用的方法及其原理,对于理解JavaScript的函数有很大的帮助,需要的朋友可以参考下
这篇文章详细的介绍了Javascript中各种函数调用的方法及其原理,对于理解JavaScript的函数有很大的帮助！
JavaScript,调用函数的5种方法
一次又一次的,我发现,那些有bug的Javascript代码是由于没有真正理解Javascript函数是如何工作而导致的(顺便说一下,许多那样的代码是我写的).JavaScript拥有函数式编程的特性, 当我们选择面对它的时候,这将成为我们前进的阻碍.
作为初学者,我们来测试五种函数调用的方法,从表面来看我们会认为那些函数与C#中函数的作用非常相似,但是我们一会儿可以看到还是有非常重要的不同的地方的,忽视这些差异无疑会导致难于跟踪的bug。首先让我们创建一个简单的函数,这个函数将在将在下文中使用,这个函数仅仅返回当前的this的值和两个提供的参数.
&script type="text/javascript"&
function makeArray(arg1, arg2){
&&& return [ this, arg1, arg2 ];
最常用的方法,但不幸的,全局的函数调用
当我们学习Javascript时，我们了解到如何用上面示例中的语法来定义函数。
,我们也知道调用这个函数非常的简单,我们需要做的仅仅是:
makeArray('one', 'two');
// =& [ window, 'one', 'two' ]
Wait a minute. What's that window
alert( typeof window.methodThatDoesntExist );
// =& undefined
alert( typeof window.makeArray);
window.makeArray('one', 'two');
// =& [ window, 'one', 'two' ]
我说最普遍的调用方法是不幸的是因为它导致我们声明的函数默认是全局的.我们都知道全局成员不是编程的最佳实践.这在JavaScript里是特别的正确,在JavaScript中避免使用全局的成员,你是不会为之后悔的.
JavaScript函数调用规则1
在没有通过明确所有者对象而直接调用的函数中，如myFunction()，将导致this的值成为默认对象（浏览器中的窗口）。
让我们现在创建一个简单的对象,使用 makeArray函数作为它的一个方法,我们将使用json的方式来声明一个对象,我们也来调用这个方法
//creating the object
var arrayMaker = {
&&& someProperty: 'some value here',
&&& make: makeArray
//invoke the make() method
arrayMaker.make('one', 'two');
// =& [ arrayMaker, 'one', 'two' ]
// alternative syntax, using square brackets
arrayMaker['make']('one', 'two');
// =& [ arrayMaker, 'one', 'two' ]
看到这里的不同了吧,this的值变成了对象本身.你可能会疑问原始的函数定义并没有改变,为何它不是window了呢.好吧,这就是函数在JSavacript中传递的方式,函数在JavaScript里是一个标准的数据类型,确切的说是一个对象.你可以传递它们或者复制他们.就好像整个函数连带参数列表和函数体都被复制,且被分配给了 arrayMaker里的属性make,那就好像这样定义一个 arrayMaker:
var arrayMaker = {
&&& someProperty: 'some value here',
&&& make: function (arg1, arg2) {
&&&&&&& return [ this, arg1, arg2 ];
JavaScript函数调用规则2
在一个使用方法调用语法,像 obj.myFunction()或者 obj['myFunction'](),这时this的值为obj
这是事件处理代码中bug的主要源头,看看这些例子
&input type="button" value="Button 1" id="btn1"& /&
&input type="button" value="Button 2" id="btn2"& /&
&input type="button" value="Button 3" id="btn3"& onclick="buttonClicked();"/&
&script type="text/javascript"&
function buttonClicked(){
&&& var text = (this === window) ? 'window' : this.
&&& alert( text );
var button1 = document.getElementById('btn1');
var button2 = document.getElementById('btn2');
button1.onclick = buttonC
button2.onclick = function(){&& buttonClicked();&& };
点击第一个按钮将会显示”btn”因为它是一个方法调用,this为所属的对象(按钮元素) 点击第二个按钮将显示”window”因为 buttonClicked是被直接调用的(不像 obj.buttonClicked().) 这和我们第三个按钮,将事件处理函数直接放在标签里是一样的.所以点击第三个按钮的结果是和第二个一样的.
使用像jQuery的JS库有这样的优点,当在jQuery里定义了一个事件处理函数,JS库会帮助重写this的值以保证它包含了当前事件源元素的引用,
//使用jQuery
$('#btn1').click( function() {
&&& alert( this.id ); // jQuery ensures 'this' will be the button
jQuery是如何重载this的值的呢?继续阅读
另外两个:apply()和call()
你越多的使用JavaScript的函数,你就越多的发现你需要传递函数并在不同的上下文里调用他们,就像Qjuery在事件处理函数里所做的一样,你往往经常需要重置this的值.记住我告诉你的,在Javascript中函数也是对象,函数对象包含一些预定义的方法,其中有两个便是apply()和call(),我们可以使用它们来对this进行重置.
var gasGuzzler = { year: 2008, model: 'Dodge Bailout' };
makeArray.apply( gasGuzzler, [ 'one', 'two' ] );
// =& [ gasGuzzler, 'one' , 'two' ]
makeArray.call( gasGuzzler,& 'one', 'two' );
// =& [ gasGuzzler, 'one' , 'two' ]
这两个方法是相似的,不同的是后面的参数的不同,Function.apply()是使用一个数组来传递给函数的,而Function.call()是将这些参数独立传递的,在实践中你会发现apply()在大多数情况下更方便.
JSavacript函数调用规则3
如果我们想在不复制函数到一个方法而想重载this的值的时候,我们可以使用 myFunction.apply( obj ) 或 myFunction.call( obj ).
我不想深入研究在Javascript中类型的定义,但是在此刻我们需要知道在Javascript中没有类,而且任何一个自定义的类型需要一个初始化函数,使用原型对象(作为初始化函数的一个属性)定义你的类型也是一个不错的主义,让我们来创建一个简单的类型
//声明一个构造器
function ArrayMaker(arg1, arg2) {
&&& this.someProperty = 'whatever';
&&& this.theArray = [ this, arg1, arg2 ];
// 声明实例化方法
ArrayMaker.prototype = {
&&& someMethod: function () {
&&&&&&& alert( 'someMethod called');
&&& getArray: function () {
&&&&&&& return this.theA
var am = new ArrayMaker( 'one', 'two' );
var other = new ArrayMaker( 'first', 'second' );
am.getArray();
// =& [ am, 'one' , 'two' ]
一个非常重要并值得注意的是出现在函数调用前面的new运算符,没有那个,你的函数就像全局函数一样,且我们创建的那些属性都将是创建在全局对象上(window),而你并不想那样,另一个话题是,因为在你的构造器里没有返回值,所以如果你忘记使用new运算符,将导致你的一些变量被赋值为 undefined.因为这个原因,构造器函数以大写字母开头是一个好的习惯,这可以作为一个提醒,让你在调用的时候不要忘记前面的new运算符.
带着这样的小心,初始化函数里的代码和你在其他语言里写的初始化函数是相似的.this的值将是你将创建的对象.
Javascript函数调用规则4
当你将函数用作初始化函数的时候,像MyFunction(),Javascript的运行时将把this的值指定为新建的对象.
我希望理解各种函数调用方式的不同会使你的Sjavacript代码远离bugs,有些这样的bug会确保你总是知道this的值是避免他们第一步。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具几种js中this函数的调用方式-js教程-PHP中文网QQ群微信公众号还没有收藏几种js中this函数的调用方式javascript中的this含义非常丰富，它可以是全局对象，当前对象或者是任意对象，这都取决于函数的调用方式。函数有以下几种调用方式：作为对象方法调用、作为函数调用、作为构造函数调用、apply或call调用。 对象方法调用作为对象方法调用的时候，this会被绑定到该对象。var point = {
moveTo : function(x, y) {
this.x = this.x +
this.y = this.y +
point.moveTo(1, 1)//this 绑定到当前对象，即 point 对象这里我想强调一点内容，就是this是在函数执行的时候去获取对应的值，而不是函数定义时。即使是对象方法调用，如果该方法的函数属性以函数名的形式传入别的作用域，也会改变this的指向。我举一个例子：var a = {
fun : function(x,y){
this.aa = this.aa +
this.bb = this.bb +
var aa = 1;
fun : function(){return this.}
a.fun(3,2);
document.write(a.aa);//3，this指向对象本身
document.write(b.fun());//0,this指向对象本身
(function(aa){//注意传入的是函数，而不是函数执行的结果
var c = aa();
document.write(c);//1 , 由于fun在该处执行，导致this不再指向对象本身，而是这里的window
})(b.fun);这样就明白了吧。这是一个容易混淆的地方。函数调用函数也可以直接被调用，这个时候this被绑定到了全局对象。var x = 1;
　function test(){
　　　this.x = 0;
　alert(x); //0但这样就会出现一些问题，就是在函数内部定义的函数，其this也会指向全局，而和我们希望的恰恰相反。代码如下：var point = {
moveTo : function(x, y) {
// 内部函数
var moveX = function(x) {
this.x =//this 绑定到了全局
// 内部函数
var moveY = function(y) {
this.y =//this 绑定到了全局
point.moveTo(1, 1);
point.x; //==&0
point.y; //==&0
//==&1我们会发现不但我们希望的移动呢效果没有完成，反而会多出两个全局变量。那么如何解决呢？只要要进入函数中的函数时将this保存到一个变量中，再运用该变量即可。代码如下：var point = {
moveTo : function(x, y) {
var that =
// 内部函数
var moveX = function(x) {
// 内部函数
var moveY = function(y) {
point.moveTo(1, 1);
point.x; //==&1
point.y; //==&1构造函数调用在javascript中自己创建构造函数时可以利用this来指向新创建的对象上。这样就可以避免函数中的this指向全局了var x = 2;
　function test(){
　　　this.x = 1;
　var o = new test();
　alert(x); //2apply或call调用这两个方法可以切换函数执行的上下文环境，也就是改变this绑定的对象。apply和call比较类似，区别在于传入参数时一个要求是数组，一个要求是分开传入。所以我们以apply为例：&pre name=&code& class=&html&&var name = &window&;
var someone = {
name: &Bob&,
showName: function(){
alert(this.name);
var other = {
name: &Tom&
someone.showName();
someone.showName.apply();
someone.showName.apply(other);
//Tom可以看到，正常访问对象中方法时，this指向对象。使用了apply后，apply无参数时，this的当前对象是全局，apply有参数时，this的当前对象就是该参数。箭头函数调用这里需要补充一点内容，就是在下一代javascript标准ES6中的箭头函数的 this始终指向函数定义时的 this，而非执行时。我们通过一个例子来理解var o = {
func : function() { console.log(this.x) },
test : function() {
setTimeout(function() {
this.func();
o.test(); // TypeError : this.func is not a function上面的代码会出现错误，因为this的指向从o变为了全局。我们需要修改上面的代码如下：var o = {
func : function() { console.log(this.x) },
test : function() {
var _this =
setTimeout(function() {
_this.func();
o.test();通过使用外部事先保存的this就行了。这里就可以利用到箭头函数了，我们刚才说过，箭头函数的 this始终指向函数定义时的 this，而非执行时。所以我们将上面的代码修改如下：var o = {
func : function() { console.log(this.x) },
test : function() {
setTimeout(() =& { this.func() }, 100);
o.test();这回this就指向o了，我们还需要注意一点的就是这个this是不会改变指向对象的，我们知道call和apply可以改变this的指向，但是在箭头函数中是无效的。var x = 1,
test : () =& this.x
o.test(); // 1
o.test.call(o); // 依然是1这样就可以明白各种情况下this绑定对象的区别了。以上就是几种js中this函数的调用方式的详细内容，更多请关注php中文网其它相关文章！共3篇813点赞收藏分享：.php.cn&猜你喜欢PHP中文网：独家原创，永久免费的在线，php技术学习阵地！
All Rights Reserved | 皖B2-QQ群:关注微信公众号原文链接：
任何变量或对象都有其赖以生存的上下文。如果简单地将对象理解为一段代码，那么对象处在不同的上下文，这段代码也会执行出不同的结果。
例如，我们定义一个函数&getUrl&和一个对象&pseudoWindow&。
function getUrl() {
console.log(this.document.URL);
var pseudoWindow = {
document: {
URL: "I'm fake URL"
getUrl1: getUrl,
getUrl2: function (callback) {
callback();
this.func =
this.func();
执行&getUrl()&，打印出当前页面的 URL。
执行&pseudoWindow.getUrl1()&，打印出&I'm fake URL&。
执行&pseudoWindow.getUrl2(getUrl)&，先打印出当前页面 URL，后打印&I'm fake URL&。
下面让我们用最简单粗暴的语言来解释以上代码。
什么是 this？
this 就是函数调用使用的上下文。
什么是上下文？
上下文是在句号标记法中，句号前面的那个东西。
例如&pseudoWindow.getUrl1&，&pseudoWindow&是&pseudoWindow.getUrl1()&的上下文。
什么是自由变量？
当一个变量没有绑定到任何上下文时（或者说绑定到顶级作用域时，例如浏览器中的 window），它就是&自由变量&。
什么是变量与对象？
变量就是代码中你所用的标识符，一个标识符就是一个变量，多个变量可能指向同一个对象。例如：
pseudoWindow.getUrl1 === getUrl
// 得到 true
变量所处的上下文就是对象的作用域。
调用 getUrl()
首先&getUrl&函数是定义在全局环境中，它是一个自由变量，在浏览器中（以下描述均为浏览器环境）它的上下文就是&window&，所以&window.getUrl()&和&getUrl()是等价的。因此&this&指向&window&对象，打印出当前 URL。
调用 pseudoWindow.getUrl1()
首先&pseudoWindow&是一个对象，它可以充当上下文角色。我们给它定义了一个属性&getUrl1&，你可以将属性视为被绑定到某个上下文的变量，变量&getUrl1&本身又指向了变量&getUrl&所指向的对象，所以&pseudoWindow.getUrl1 === getUrl&才会为&true&。
当我们调用&pseudoWindow.getUrl1()&时，它的意思是执行&getUrl()&这段代码，执行代码所需的参数为空，上下文为&pseudoWindow&。
所以函数中的&this&指向了&pseudoWindow&，而&pseudoWindow&对象恰好又有&document&属性，该属性恰好又有&URL&属性，因此打印出&I'm fake URL&。
调用 pseudoWindow.getUrl2(getUrl)
同理我们又定义了一个变量&getUrl2&，并绑定到&pseudoWindow&对象身上，使之成为后者的一个属性。而这个属性本身又指向一个匿名函数，我们姑且称之为 A，该函数对象接受另一个函数对象作为回调函数。
因此执行&pseudoWindow.getUrl2(getUrl)&时，意思是执行代码 A，执行代码所需的参数为&getUrl&这段代码，上下文为&pseudoWindow&。
因此函数 A 中的&this&指向了&pseudoWindow&。
当程序执行到函数 A 内部的&callback()&时，因为变量&callback&没有绑定到任何上下文，因此它相当于一个自由变量，它的上下文就指向了&window&对象，因此首先打印出当前页面的 URL。
接下来&this.func = callback&意味着三件事：
我们新申明了一个变量&func&。
通过&=&操作符，我们将该变量指向了&callback&所指向的函数对象。
通过&.&操作符，我们将该变量绑定到了&this&对象上，使之成为后者的一个属性，而本例中&this&指向的就是&pseudoWindow&对象。
于是当程序执行到&this.func()&时，它的意思是执行&callback&这段代码，执行代码所需的参数为空，上下文为&pseudoWindow&。于是打印出了&I'm fake URL&。
这段代码带来的一个副作用是我们隐式地为&pseudoWindow&对象添加了一个新的属性&func&，如果我们想要通过回调的方式打印出&pseudoWindow&的&document.URL&属性，又不想对&pseudoWindow&对象造成任何影响，那么我们可以使用函数的&apply&方法。所有函数都有&apply&方法，它会将它接收的第一个参数设置为函数的上下文。
例如本例中我们可以改写代码成这样子：
var pseudoWindow = {
document: {
URL: "I'm fake URL"
getUrl1: getUrl,
getUrl2: function (callback) {
callback();
callback.apply(this);
严格地说，你应该先检查 callback 参数类型是否是函数对象。
Javascript 支持将函数作为参数传递，回调函数变量指向的函数对象都未与任何上下文绑定，所有未与明确上下文绑定的变量都是自由变量，浏览器器中所有自由变量的上下文都是 window 对象。
阅读(...) 评论()在js中两个不同事件怎样调用一个函数_百度知道
在js中两个不同事件怎样调用一个函数
我有更好的答案
function FunPublic(obj){
alert(this.id);}&input
type=&button& id=&btn1& value=&btn1& onclick=&FunPublic(this);& /& --&alert(btn1)&input
type=&button& id=&btn2& value=&btn2& ondblclick=&FunPublic(this);& /& --&alert(btn2)
采纳率：40%
function a(){}&a onclick=&a()& onmouseover=&a()“&元素1&/a&&li onmouseover=&a()&&元素2&/li&调用同一个函数，只要把事件处理函数设置成同一个函数就可以了
封装起来 然后引用呗
跟调用方法一样
能不能详细点啊
a(){}function
为您推荐：
其他类似问题
函数的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。javascript 为什么要用callback传函数, 而不直接在这个函数里调用另一个函数_百度知道
javascript 为什么要用callback传函数, 而不直接在这个函数里调用另一个函数
javascript 为什么要用callback传函数, 而不直接在这个函数里调用另一个函数
我有更好的答案
通俗的讲就是被调用的函数不知道你要做什么, 你需要将执行的操作作为回调函数传入 比如插件,
当插件执行时你需要自定义一些操作, 插件开发者不知道你需要什么操作, 只能预留一个回调函数接口,供你传入回调函数,例如你写了一个下拉框插件, 功能是将模拟select操作, 那么当onchange的时候是需要使用者根据需求去处理的, 而你的插件是要给很多人用的, 你不知道每个人onchange的时候要做什么事情, 这个时候你在onchange你判断一下是否有A这个函数,有的话就调用,然后继续处理接下来的逻辑. , 用户如果在onchange的时候有需求, 传入A的实现即可. ,就相当于执行用户的操作了, 就叫回调函数.
采纳率：60%
回调函数在JS的API里有一段解释是这样的：A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.（不懂可以去百度翻译一下）说的很明白了~就是为了在执行完父级函数后再执行回调函数（就是为了保持这个执行顺序因为JS单线程的问题），然后再一个优点就是楼上说的了，可以作为参数，随时改传进去的函数，更灵活了~
&html& &head& &title&Callback function test&/title& &script language=&javascript& type=&text/javascript&& function main(callback) { alert(&I am main function&); alert(&Invoke callback function..&); callback(); } function b(){ alert(&I am callback function: b&); } function c(){ alert(&I am callback function: c&); } function test() { main(b); main(c); } &/script& &/head& &body& &button onClick=&test()&&click me&/button& &/body& &/html& 这里面main（b），那么b就称作回调函数，是不是很好理解？那有人会说我为什么不可以把b的调用放到main函数里呢？确实可以，但是那样你的main方法就只能调用b了。这里我们将b传递个main，或者a传递个main，那main里面的callback方法就是动态的回调函数。优点就在这里。
我的理解是javascript本身不提供多线程功能，但是需要发送异步请求，异步请求是没办法顺序执行的，回调函数一般是为了处理这种非同步请求而设计的
看需求,这个在模块类封装中很重要的
其他2条回答
为您推荐：
其他类似问题
callback的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。}