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 学习笔记(五)
Dec 31 Javascript
Span元素的width属性无效果原因及解决方案
Jan 15 Javascript
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 Javascript
jquery处理页面弹出层查询数据等待操作实例
Mar 25 Javascript
JS中获取函数调用链所有参数的方法
May 07 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
直接拿来用的15个jQuery代码片段
Sep 23 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 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自动跳转中英文页面
2008/07/29 PHP
Yii学习总结之安装配置
2015/02/22 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
php防止表单重复提交实例讲解
2019/02/11 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
IE和Firefox下event事件杂谈
2009/12/18 Javascript
jQuery UI的Dialog无法提交问题的解决方法
2011/01/11 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
2012/03/01 Javascript
jQuery插件的写法分享
2013/06/12 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
jquery validate 自定义验证方法介绍 日期验证
2014/02/27 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
python网络爬虫采集联想词示例
2014/02/11 Python
Django如何实现内容缓存示例详解
2017/09/24 Python
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
购买原创艺术品:Zatista
2019/11/09 全球购物
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
《唯一的听众》教学反思
2014/02/20 职场文书
文明生主要事迹
2014/05/25 职场文书
2015毕业生实习工作总结
2014/12/12 职场文书
2014年小学教导处工作总结
2014/12/19 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书