Javascript 函数的四种调用模式


Posted in Javascript onNovember 05, 2016

Javascript 函数的四种调用模式

1  函数模式

     最普通的函数调用

// 声明式函数
function fn1 () {
   console.log(this);
}
// 函数表达式函数
var fn2 = function() {
   console.log(this);
};
// 调用 函数中this表示全局对象,在浏览器中就是指window
fn1();   //window
fn2();   //window

 2 方法模式

     函数依附于一个对象,是对象的一个属性,我们再调用这个函数。这种模式就是方法调用模式。

var obj = {
  name: "zhangSan",
  sayHi: function () {
    console.log(this);
  }
};
obj.sayHi(); //obj对象

3 构造器调用模式

即是构造函数的调用,一般是通过new + 函数名( ),这种模式和以上的方法模式没本质的区别

function Person() {}
var tom = new Person(); // 这就是构造器函数的调用 

// 构造函数调用的详细过程
// 1 会在内部创建一个对象o
// 2 给对象赋值(this), 然后执行各种操作
// 3 返回这个对象o


// 构造函数的返回值:
 //
 //  有一个默认的返回值,新创建的对象(实例);
 //  当手动添加返回值后(return语句):
 //     1. 返回值是基本数据类型-->真正的返回值还是那个新创建的对象(即实例)
 //    2. 返回值是复杂数据类型(对象)-->真正的返回值是这个对象

4 上下文模式

本质--对象借用不属于该对象的方法(函数),即我们自定义this的指向

这时候就需要call和apply这两个方法

//Function.prototype.call ()
  //Function.prototype.apply ()
  //——>任何函数都可以调用call和apply方法

  // 第一个参数控制this的指向,第二个参数:
        在使用 上下文调用的 时候, 原函数(方法)可能会带有参数, 那么这个参数在上下文调用中使用 第二个( 第 n 个 )参数来表示
//伪数组
  var o={ 0:10,1:20,length:2 };

  //让o对象借用数组的push方法来添加元素
  //[].push.call(o,30,50,70)
  [].push.apply(o,[1,2,3])
  console.log(o);//其中对象o中length属性的值也会改变的哦

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
HTTP状态代码以及定义(解释)
Feb 02 Javascript
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
复制js对象方法(详解)
Jul 08 Javascript
JavaScript中数组继承的简单示例
Jul 29 Javascript
Highcharts学习之坐标轴
Aug 02 Javascript
js动态生成form 并用ajax方式提交的实现方法
Sep 09 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 Javascript
Javascript中click与blur事件的顺序详析
Apr 25 Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 Javascript
详解webpack的文件监听实现(热更新)
Sep 11 Javascript
vue实现下拉菜单树
Oct 22 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
Nov 04 #Javascript
jQuery中 $ 符号的冲突问题及解决方案
Nov 04 #Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
Nov 04 #Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
Nov 04 #Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 #Javascript
AngularJS过滤器filter用法实例分析
Nov 04 #Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 #Javascript
You might like
水质对咖图啡风味的影响具体有哪些
2021/03/03 冲泡冲煮
通过对服务器端特性的配置加强php的安全
2006/10/09 PHP
PHP抽象类 介绍
2012/06/13 PHP
PHP打印输出函数汇总
2016/08/28 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
2015/11/13 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
Vue利用History记录上一页面的数据方法实例
2018/11/02 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
Python+matplotlib+numpy绘制精美的条形统计图
2018/01/02 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
python中的for循环
2018/09/28 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
Python逐行读取文件中内容的简单方法
2019/02/26 Python
Python进阶之迭代器与迭代器切片教程
2020/01/29 Python
python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例
2020/02/28 Python
如何在sublime编辑器中安装python
2020/05/20 Python
JAVA高级程序员面试题
2013/09/06 面试题
销售总监工作职责
2013/11/21 职场文书
《埃及的金字塔》教学反思
2014/04/07 职场文书
营销总经理岗位职责范本
2014/09/02 职场文书
村委会贫困证明范本
2014/09/17 职场文书
房产协议书范本2014
2014/09/30 职场文书
护理见习报告范文
2014/11/03 职场文书
财务出纳岗位职责
2015/03/31 职场文书
2016大一新生军训感言
2015/12/08 职场文书
小学体育课教学反思
2016/02/16 职场文书
mysql的数据压缩性能对比详情
2021/11/07 MySQL