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评估用户输入密码的强度(Knockout版)
Nov 30 Javascript
js判断一个元素是否为另一个元素的子元素的代码
Mar 21 Javascript
datagrid框架的删除添加与修改
Apr 08 Javascript
JavaScript中实现map功能代码分享
Jun 11 Javascript
vue中渐进过渡效果实现
Oct 27 Javascript
老生常谈的跨域处理
Jan 11 Javascript
bootstrap响应式表格实例详解
May 15 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
cocos creator Touch事件应用(触控选择多个子节点的实例)
Sep 10 Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
解决vue v-for 遍历循环时key值报错的问题
Sep 06 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
weiphp微信公众平台授权设置
2016/01/04 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
js中传递特殊字符(+,&)的方法
2014/01/16 Javascript
FF IE浏览器修改标签透明度的方法
2014/01/27 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
javascript 数组操作详解
2015/01/29 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
浅谈JS继承_借用构造函数 & 组合式继承
2016/08/16 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
2017/08/17 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
Vue一次性简洁明了引入所有公共组件的方法
2018/11/28 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
ES6 Promise对象的含义和基本用法分析
2019/06/14 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
基于Python的关键字监控及告警
2017/07/06 Python
获取Django项目的全部url方法详解
2017/10/26 Python
numpy中实现ndarray数组返回符合特定条件的索引方法
2018/04/17 Python
python日期时间转为字符串或者格式化输出的实例
2018/05/29 Python
python lxml中etree的简单应用
2019/05/10 Python
Python grequests模块使用场景及代码实例
2020/08/10 Python
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
2016/12/30 HTML / CSS
html5 button autofocus 属性介绍及应用
2013/01/04 HTML / CSS
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
俄罗斯马克西多姆家居用品网上商店:Максидом
2020/02/06 全球购物
旅游网创业计划书
2014/01/31 职场文书
股份合作协议书
2014/09/10 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
城南旧事电影观后感
2015/06/16 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers