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 相关文章推荐
关于JavaScript的gzip静态压缩方法
Jan 05 Javascript
JQuery中层次选择器用法实例详解
May 18 Javascript
JavaScript对HTML DOM使用EventListener进行操作
Oct 21 Javascript
理解javascript封装
Feb 23 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
Jun 28 Javascript
vue-router项目实战总结篇
Feb 11 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
Jun 14 Javascript
js自定义input文件上传样式
Oct 26 Javascript
Vuepress 搭建带评论功能的静态博客的实现
Feb 17 Javascript
原生js实现trigger方法示例代码
May 22 Javascript
Vue实现导航栏的显示开关控制
Nov 01 Javascript
js实现页面图片消除效果
Mar 24 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 Image Resize图片大小调整的函数代码
2011/01/17 PHP
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
PHP 数组和字符串互相转换实现方法
2013/03/26 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
为何说PHP引用是个坑,要慎用
2018/04/02 PHP
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
自制微信公众号一键排版工具
2016/09/22 Javascript
vue实现列表的添加点击
2016/12/29 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
2018/09/03 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
Python中无限元素列表的实现方法
2014/08/18 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
Python安装模块的常见问题及解决方法
2018/02/05 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
旅游管理毕业生自荐信范文
2014/03/19 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
Java使用jmeter进行压力测试
2021/07/09 Java/Android
Python循环之while无限迭代
2022/04/30 Python