一、普通方式

 /*普通模式*/

     // 声明一个函数,并调用
function func() {
console.log("Hello World");
}
func();

二、函数表达式

 /*函数表达式*/
// 使用函数的Lambda表达式定义函数,然后调用
var func = function() {
console.log("你好,百度一下");
};
func(); //可以发现函数调用很简单,就是平时学习的一样.
//这里的关键是,在函数调用模式中,函数里的 this 关键字指全局对象,
//如果在浏览器中就是 window 对象. 例如:
var func = function() {
console.log(this);
};
func();
// 此时,会弹出对话框,打印出 [object Window]

三、方法调用模式

 /*方法调用模式*/
//函数调用模式很简单,是最基本的调用方式.
//但是同样的是函数,将其赋值给一个对象的成员以后,就不一样了.
//将函数赋值给对象的成员后,那么这个就不在称为函数,而应该叫做方法. // 定义一个函数
var func = function() {
alert("我是一个函数么?");
}; // 将其赋值给一个对象
var o = {};
o.fn = func; // 注意这里不要加圆括号
// 调用
o.fn(); //此时,o.fn 则是方法,不是函数了.
//实际上 fn 的方法体与 func 是一模一样的,但是这里有个微妙的不同. 看下面的代码:
// 接上面的代码
alert(o.fn === func);
//打印结果是 true ,这个表明两个函数是一样的东西. 但是修改一下函数的代码: // 修改函数体
var func = function() {
alert(this);
};
var o = {};
o.fn = func;
// 比较
alert(o.fn === func);
// 调用
func();
o.fn();
// 这里的运行结果是,两个函数是相同的,因此打印结果是 true.
// 但是由于两个函数的调用是不一样的,
// func的调用,打印的是 [object Window],而o.fn 的打印结果是[object Object].
// 这里便是函数调用与方法调用的区别.
// 函数调用中,this专指全局对象window,
// 而在方法中this专指当前对象. 即o.fn 中的this 指的就是对象o.

四、构造函数调用模式

 /*构造函数调用模式*/

     // 同样是函数,在单纯的函数模式下,this表示window;
// 在对象方法模式下,this指的是当前对象.
// 除了这两种情况,JavaScript中函数还可以是构造器.
// 将函数作为构造器来使用的语法就是在函数调用前面加上一个new关键字. 如代码:
// 定义一个构造函数
var Person = function() {
this.name = "百度一下";
this.sayHello = function() {
alert("你好,这里是" + this.name);
};
};
// 调用构造器,创建对象
var p = new Person();
// 使用对象
p.sayHello(); // 上面的案例首先创建一个构造函数Person,然后使用构造函数创建对象p.
// 这里使用 new语法.然后使用对象调用sayHello()方法.
// 这个使用构造函数创建对象的案例比较简单. 从案例可以看到,此时 this指的是对象本身.

五、apply、call调用模式

上篇中详细讲解了。

第196天:js---调用函数的五种方式的更多相关文章

  1. JS调用函数的两种方式

    <script type="text/javascript"> window.onload = init; //onload 表示页面全部加载完毕后,再调用init() ...

  2. JS定义函数的2种方式以及区别简述(为什么推荐第二种方式)

     无意中看到了阮一峰大神多年前的一篇博客: 12种不宜使用的Javascript语法    看到第9条的时候受到了启发,感觉之前没怎么理解清楚的一些问题好像突然就清晰了,如下图 可能光这样看,有些小伙 ...

  3. JS定义函数的两种方式:函数声明和函数表达式

    函数声明 关于函数声明的方式,它的一个重要的特性就是函数声明提升(function declaration hoisting),意思是在执行代码之前会先读取函数声明.这就意味着可以把函数声明放在调用它 ...

  4. js实现继承的五种方式

    function Parent(firstname) { this.fname=firstname; ; this.sayAge=function() { console.log(this.age); ...

  5. JS调用webservice的两种方式

    协议肯定是使用http协议,因为soap协议本身也是基于http协议.期中第二种方式:只有webservice3.5以后版本才可以成功 第一种方式:构造soap格式的body,注意加粗的黄色标识,比如 ...

  6. js中声明Number的五种方式

    转载自:http://www.jb51.net/article/34191.htm <!DOCTYPE html> <html> <head> <meta c ...

  7. js setTimeout 传递带参数的函数的2种方式

      js setTimeout 传递带参数的函数的2种方式 Created by Marydon on 2018年9月14日 1.准备工作 function sayYourName(param) { ...

  8. resize函数有五种插值算法

    转自http://blog.csdn.net/fengbingchun/article/details/17335477 最新版OpenCV2.4.7中,cv::resize函数有五种插值算法:最近邻 ...

  9. JS创建对象,数组,函数的三种方式

    害怕自己忘记,简单总结一下 创建对象的3种方法 ①:创建一个空对象   var obj = {}; ②:对象字面量 var obj = { name: "Tom", age: 27 ...

随机推荐

  1. 20155212 mybash的实现

    mybash的实现 题目 使用fork,exec,wait实现mybash 写出伪代码,产品代码和测试代码 发表知识理解,实现过程和问题解决的博客(包含代码托管链接) 准备 通过man命令了解fork ...

  2. 20155231 cho2 课下作业

    20155231 cho2 课下作业 2 调用附图代码,编写一个程序 "week0602学号.c",用show_int(), show_float()打印一下你的4位学号,参考教材 ...

  3. 20155318 《Java程序设计》实验三 (敏捷开发与XP实践)实验报告

    20155318 <Java程序设计>实验三 (敏捷开发与XP实践)实验报告 实验内容 XP基础 XP核心实践 相关工具 实验步骤 (一)敏捷开发与XP 软件工程是把系统的.有序的.可量化 ...

  4. 20155331 丹增旦达 2006-2007-2 《Java程序设计》第二周学习总结

    20155331 丹增旦达 2006-2007-2 <Java程序设计>第二周学习总结 教材学习内容总结 一 ,类型.变量与运算符 一.数据类型 1, 分类: 基本数据类型 byte:字节 ...

  5. 微信小程序判断按钮是否显示,或者隐藏

    js中: onLoad:function(options) { this.setData({ orderstate:'待送检' }) },   WXML中: <view wx:if=" ...

  6. #ifdef 支持Mac #ifndef 支持Windows #if defined (Q_OS_WIN) 应该可以再两个系统通用

    //mac qt可以运行 #ifdef Q_OS_MAC qDebug()<<QSysInfo::MacintoshVersion; #endif //Mac不运行 #ifndef Q_O ...

  7. Arduino 101/Genuino101使用-第2篇

    1. Arduino 101编程只是在ARC的核心上进行,其具体架构为ARCv2EM.. 2. 而Quark核心,从目前可知的信息来看,其应该运行着名为Zephyr的RTOS 3.101并没有EEPR ...

  8. 【xml_Class、xmlElementNode_Class 类】使用说明

    xml_Class.xmlElementNode_Class这两个类是针对XML相关操作的类. 1.xml_Class类是针对XML文档操作的类 目录: 类型 原型 参数 返回 说明 Sub Sub ...

  9. 内网集群准同步shell脚本

    在公司的内网中配置集群同步,可能是代理问题,ntpd和chrony都没有用,所以只好写shell脚本解决 前提条件集群中各台机器已经配置好了免密登录 一.免密登录配置 1. 用 root 用户登录.每 ...

  10. js页面跳转,url带url参数解决方案

    今天,在做一个项目的时候,向后端发送了一个Ajax请求,后端返回了一个字符串,告诉我未登录.那么我需要跳转到登录页面,同时告诉登录页面,登录成功后,需要跳回的url.也就是标题所说,url中的一个参数 ...