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 相关文章推荐
ExtJS 工具栏 分页事件参数
Mar 05 Javascript
使用js画图之饼图
Jan 12 Javascript
自定义刻度jQuery进度条及插件
Sep 02 Javascript
Angular ng-repeat 对象和数组遍历实例
Sep 14 Javascript
JavaScript之promise_动力节点Java学院整理
Jul 03 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
Apr 15 Javascript
微信小程序简单的canvas裁剪图片功能详解
Jul 12 Javascript
Vue.js的模板语法详解
Feb 16 Javascript
vantUI 获得piker选中值的自定义ID操作
Nov 04 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
PHP多个版本的分析解释
2011/07/21 PHP
PHP不用第三变量交换2个变量的值的解决方法
2013/06/02 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
2020/04/28 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
js实现计算器功能
2020/08/10 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
Python自动扫雷实现方法
2015/07/25 Python
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
详解python中的异常和文件读写
2021/01/03 Python
html5唤醒APP小记
2019/03/27 HTML / CSS
时尚孕妇装:HATCH Collection
2019/09/24 全球购物
大学生自我评价怎样写好
2013/10/23 职场文书
保险专业大学生职业规划书
2014/03/03 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
2014年个人年终总结
2015/03/09 职场文书
同意报考公务员证明
2015/06/17 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
学生安全责任协议书
2016/03/22 职场文书
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python
Android Studio实现带三角函数对数运算功能的高级计算器
2022/05/20 Java/Android