Javascript函数调用的四种模式

Javascript一共有四种调用模式:方法调用模式、函数调用模式、构造器调用模式以及apply调用模式。调用模式不同,对应的隐藏参数this值也会不同。

  函数作为对象的属性时,称为方法。此时函数(即方法)中的this对应是该对象。

复制代码
var myObject = {value:3,
  func:function(){
    alert(this.value);
  }
   };

myObject.func();  //3
复制代码

  也可以写成如下格式:

复制代码
var myObject = {value:3
};myObject.func = function() {alert(this.value);
}

myObject.func();  //3
复制代码

  上面,this对应的是myObject对象。

 

  三  函数调用模式

  函数调用模式即通常的函数调用,属于全局性调用,此时this对应的是全局对象,即Window对象。

var add = function(a, b) {return a + b;
}add(3,4);    //7

  上面也可以写成

window.add = function(a, b) {return a + b;
}

add(3,4); //7

  下面来看看下面的测试题,以检验你是否了解了this。

复制代码
<script type="text/javascript">var add = function(a, b) {return a + b;}var myObject = {value:3};myObject.func = function() {var helper = function() {this.value = add(this.value, this.value); 
        }helper();//alert(this.value);}
   myObject.func();alert(myObject.value);</script>
复制代码

  答案会是6吗?仔细想想。

  答案为6的程序应该是这样的:

复制代码
<script type="text/javascript">var add = function(a, b) {return a + b;}var myObject = {value:3};myObject.func = function() {var that = this; // this对应myObject对象   (1)var helper = function() {//this.value = add(this.value, this.value); //这里调用模式为函数调用模式,而非方法调用模式,所以this对应全局对象   (2)that.value = add(that.value, that.value);
        }helper();//alert(this.value);}myObject.func();alert(myObject.value);</script>
复制代码

  (1)处this在firefox调试如下:

  

  (2)处this在firefox调试如下:

  

 

  四  构造器调用模式

  若在函数前面通过new 来调用,其实是生成一新对象,this自然指向该新对象。

var add = function(a, b) {return a + b;
}var obj = new add(3, 4);

  obj为一对象:

  

 

  五  apply调用模式

apply方法有个参数,第一个是要绑定给this的值,第二个是一个参数数组。
var sum = add.apply(null,[3,4]);       // this对应全局变量,即window对象
var sum2 = add.apply(myObject,[3,4]);  //this对应为myObject对象

 

  六  源码

   源码下载。

 

 出处:http://www.cnblogs.com/chenyuming507950417/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/300458.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【推荐】BREW中 - 显示和图像

a. BREW 支持哪些图像格式&#xff1f; 适用版本&#xff1a; 1.0, 1.1, 2.0 BREW 支持颜色深度达到运行设备上提供的值的任何 BMP 文件。 BREW 目前尚不支持 GIF 和 JPEG 图像。 有些设备可以支持 GIF 和 JPEG 图像&#xff0c;请参阅设备数据表来查看 OEM 是否提供了支持以上…

我背着女朋友,用 Python 偷偷抓取了她的行踪

全世界只有3.14 %的人关注了青少年数学之旅1目 标 场 景有时候女朋友一个人在外面玩耍&#xff0c;问她在哪个地方&#xff0c;就是不告诉我。但是&#xff0c;你又很想知道女朋友的「位置」&#xff0c;这该如何是好&#xff1f;其实你可以这样套路女朋友&#xff0c;假装自己…

ASP.NET Core 中的规约模式(Specification Pattern )——增强泛型仓储模式

原文链接&#xff1a;https://codewithmukesh.com/blog/specification-pattern-in-aspnet-core/在本文中&#xff0c;我们将讨论在 ASP.NET Core 应用程序中实现规约模式以及它如何增强现有的泛型仓储模式。我们将从头开始构建具有泛型仓储模式、Entity Framework Core的 ASP.N…

面向过程的ado建造者模式

{*******************************************************}{ }{ ADO数据工厂 }{ }{ 版权所有 (C) 2008 咏…

Javascript:this用法

#Javascript&#xff1a;this用法整理pingan 于 星期三, 18/12/2013 - 22:32 提交 常用Javascript的人都知道&#xff0c;&#xff3b;this这个关键字在一个函式内究竟指向谁&#xff3d;的这个问题很令人头大&#xff0c;本人在这裡整理了一下Javascript中this的指向的五种不同…

动画演示男性结扎手术 | 今日趣图

全世界只有3.14 % 的人关注了青少年数学之旅流鼻涕了怎么办&#xff1f;医学教育徐琦招聘程序员啦知识萌死大丧失&#xff1b;图熊本科技把下列句子补充完整图三好学生李宇幼年的大象喝水并不会使用鼻子而是趴在水里直接用嘴大喝一顿它们9个月之后才会懂得用鼻子喝水科普斯基请…

MYSQL 只能回环口链接_loopback回环口详解

在配置OSPF路由协议的时候配置回环(loopback)接口是很重要的1件事.Cisco建议你配置OSPF的时候顺便配置回环接口.所谓回环接口,是逻辑接口而非物理接口,即不是你触摸的到的router上的真正的接口.作用是作为诊断OSPF而用.如果router的某一个接口由于故障down掉而不可用了,此时你怎…

AspNetCoreMassTransit Courier实现分布式事务

在之前的一篇博文中&#xff0c;CAP框架可以方便我们实现非实时、异步场景下的最终一致性&#xff0c;而有些用例总是无法避免的需要在实时、同步场景下进行&#xff0c;可以借助Saga事务来解决这一困扰。在一些博文和仓库中也搜寻到了.Net下实现Saga模式的解决方案MassTransit…

可能会紧急用到的Linux命令

查看当前网络连接数&#xff1a; netstat -na|grep ESTABLISHED|awk {print $5}|awk -F: {print $1}|sort|uniq -c|sort -r -n删除掉不以java和xml结尾7天没有使用的文件 : find . ! -name *.java ! -name *.xml -atime 7 -exec rm {} \;转载于:https://blog.51cto.com/guihai…

设置列表字段为主键

转贴:Sample event handler to set a field as a pr imary key (enforce no duplicates) Got this as a request from a reader- how to prevent users from adding items with same titles as ones that already exist in the list. Codeusing System;using System.Collectio…

被学校辞退、拒绝FB后:语音识别大牛Povey确认兼职北京初创公司,称主业还选中国...

全世界只有3.14 % 的人关注了青少年数学之旅由于5月的学生抗议事件&#xff0c;语音识别领域著名学者、原约翰霍普金斯大学教授Daniel Povey被学校辞退。随后&#xff0c;Daniel Povey准备进入Facebook从事语音识别系统的开发&#xff0c;但是由于Facebook要对其进行长达6周的审…

也谈子网划分和子网通信

子网划分和子网通信在小型网络中应用不多&#xff0c;但随着公司规模的扩大&#xff0c;这样的问题就会提上网管的工作计划。资料略加整理&#xff0c;希望对各位有帮助。也谈子网划分和子网通信1.网络IP地址和子网掩码的分类&#xff1a;A类&#xff1a;IP: 0.0.0.0 &#xff…

java io流学设置编码_Java学习日志(21-2-IO流-基本数据类型与字节数组对象与、编码解码)...

操作基本数据类型的流对象DataStream/*可以用于操作基本数据类型数据的流对象*/import java.io.*;class DataStreamDemo{public static void main(String[] args)throws IOException{// writeData();// readData();// writeUTFDemo();// OutputStreamWriter oswnew OutputStrea…

dotnet中的counters说明(二)

上篇说了System.Runtime&#xff0c;它负责应用运行的环境资源的收集&#xff0c;这篇要继续说AspNetCore的Hosting,Http.Connections和Server.Kestrel三个计数器。同时&#xff0c;下面指标各项()里的项目是--counters 参数[]里的项&#xff0c;用逗号分隔多项指标。Microsoft…

Asp组件中级入门与精通系列之五

我们学习来看一下Response对象。其实我们前面的教程中一直都在使用这个对象的Write方法。 这里我们用Response对象设置cookie。 ? 打开vb6,新建Activex Dll工程。工程名修改为fCom,类名修改为fZ5 引用“Microsoft Active Server Pages Object”对象库。 创建两个组件事件&…

有这些好习惯,可以让你悄悄变优秀

全世界只有3.14 %的人关注了青少年数学之旅这是一个普遍无趣的时代&#xff0c;很多人看似忙到起飞内在却空虚迷茫。今天我们为你诚意推荐几个公众号它们会成为你生活的一剂调味料&#xff0c;让你做一个学识丰富、灵魂有趣的人。快来关注&#xff0c;开启精彩的生活吧&#xf…

java设置access-allow_Java Web如何设置多个Access-Control-Allow-Origin

有没有办法让Access-Control-Allow-Origin header允许设置multiple cross-domains呢&#xff1f;如果设置response.addHeader("Access-Control-Allow-Origin","*");感觉这个接口太开放了&#xff0c;不太安全。 我想只设置自己指定的若干个域名或者端口可以…

paip.提升用户体验--提升java的热部署热更新能力

paip.提升用户体验--提升java的热部署热更新能力 想让java做到php那么好的热部署能力 "fix online"/在线修复吗&#xff1f;&#xff1f;直接在服务器上修改源码生效&#xff0c;无需重启应用。。作者Attilax 艾龙&#xff0c; EMAIL:1466519819qq.com来源&#x…

夏利车电动窗功能设定

夏利车电动窗功能设定 我车的前有门电动车窗坏了&#xff0c;所以去汽配城购买了电动升降器&#xff0c;准备自己进行更换&#xff0c;修车的要我100元RMB&#xff0c;自己购买配件花了我65省了35元呵呵&#xff0c; 但是自己花了很长时间更换完成之后发现车窗怎么也关不严&…

微软 MS Learn 上线 Blazor 入门教程

微软官方学习网站 MS Learn 上线了 Blazor 入门教程模块&#xff0c;希望通过这个课程&#xff0c;让开发人员了解如何设置开发环境&#xff0c;以及如何使用 Blazor、Visual Studio Code 和 C# 生成你的首个 Web 应用。Build a web app with Blazor - Learndocs.microsoft.com…