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高级程序设计 阅读笔记(二十) js错误处理
Aug 14 Javascript
js string 转 int 注意的问题小结
Aug 15 Javascript
ExtJS中设置下拉列表框不可编辑的方法
May 07 Javascript
javascript修改图片src的方法
Jan 27 Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
跟我学习javascript的var预解析与函数声明提升
Nov 16 Javascript
jQuery插件Validation表单验证详解
May 26 jQuery
vue.js计算属性computed用法实例分析
Jul 06 Javascript
详解mpvue实现对苹果X安全区域的适配
Jul 31 Javascript
Paypal支付不完全指北
Jun 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中的Base62类(适用于数值转字符串)
2013/08/12 PHP
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
JavaScript函数、方法、对象代码
2008/10/29 Javascript
js DOM 元素ID就是全局变量
2012/09/20 Javascript
js切换div css注意的细节
2012/12/10 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
js批量设置样式的三种方法不推荐使用with
2013/02/25 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
jQuery Validate表单验证插件实现代码
2017/06/08 jQuery
jquery与js实现全选功能的区别
2017/06/11 jQuery
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
python字典多键值及重复键值的使用方法(详解)
2016/10/31 Python
python模块简介之有序字典(OrderedDict)
2016/12/01 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
python 如何调用远程接口
2020/09/11 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
解决python3中os.popen()出错的问题
2020/11/19 Python
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
教师个人鉴定材料
2014/02/08 职场文书
我与祖国共奋进演讲稿
2014/09/13 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
服务承诺书
2015/01/19 职场文书
放假通知
2015/04/14 职场文书
初中体育教学随笔
2015/08/15 职场文书
Python爬虫:从m3u8文件里提取小视频的正确操作
2021/05/14 Python
Python中Cookies导出某站用户数据的方法
2021/05/17 Python