一、普通方式

 /*普通模式*/

     // 声明一个函数,并调用
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. SSM-CRUD入门项目——修改与PUT请求

    修改 分析: 点击编辑,弹出用户修改的模态框,    模态框中显示用户的信息,    点击更新完成修改! 第一步先复制添加员工的模态框进行修改调整,完成修改员工的模态框的创建:(当然,相应的生成员工数 ...

  2. flex tooltip css

    <?xml version="1.0"?> <!-- tooltips/ToolTipStyleManager.mxml --> <mx:Applic ...

  3. 20155305 2016-2017-2 《Java程序设计》实验三 敏捷开发与XP实践

    20155305 2016-2017-2 <Java程序设计>实验三 敏捷开发与XP实践 实验内容 XP基础 XP核心实践 相关工具 实验步骤 (一)敏捷开发与XP 1.敏捷开发 敏捷开发 ...

  4. 20155308 2016-2017-2 《Java程序设计》实验二 Java面向对象程序设计

    20155308 2016-2017-2 <Java程序设计>实验二 Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UM ...

  5. 20155339 2016-2017 2 《Java程序设计》第2周学习总结

    20155339 2016-2017-2 <Java程序设计>第2周学习总结 教材学习内容总结 这周学习了课本的第三章,主要内容是JAVA的基础语法,在这章的学习过程中我发现大部分与c语言 ...

  6. 记boost在gcc的一个库链接问题generic_category()

    报错大致如下: main.cpp:(.text+0x49): undefined reference to `boost::system::generic_category()'main.cpp:(. ...

  7. I/O: std::ios_base::openmode

    I/O: std::ios_base::openmode std::ios_base::openmode std::ios_base::in:  打开文件进行读操作,即读取文件中的数据 如果指定路径中 ...

  8. Python数据分析开发环境

    准备工作 下载并安装最新版本的Anaconda 下载并安装最新版本的Visual Studio Code 编辑器 Tips: 可以选择自己喜欢并且熟悉的编辑器或IDE.如:VIM.Emacs.Note ...

  9. PHP版本的讲解

    原文地址:http://dev.meettea.com/show-90-1.html 最近发现很多PHP程序员对PHP版本知识了解不是很清楚,其中不乏PHP产品主力开发人员. PHP版本主要分三支:P ...

  10. i3wm随笔 1

    快捷键 mod+0 退出 mod+v 垂直分割 mod+h 水平风格