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两段代码,两个小技巧
Feb 04 Javascript
自己整理的一个javascript日期处理函数
Oct 16 Javascript
jquery购物车实时结算特效实现思路
Sep 23 Javascript
js中的this关键字详解
Sep 25 Javascript
a标签click和href执行顺序探讨
Jun 23 Javascript
再探JavaScript作用域
Sep 24 Javascript
javascript中return,return true,return false三者的用法及区别
Nov 17 Javascript
jQuery mobile 移动web(4)
Dec 20 Javascript
bootstrap vue.js实现tab效果
Feb 07 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
JavaScript无操作后屏保功能的实现方法
Jul 04 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 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
神族 Protoss 剧情介绍
2020/03/14 星际争霸
PHP实现根据浏览器跳转不同语言页面代码
2013/08/02 PHP
分享10段PHP常用代码
2015/11/11 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
php curl发送请求实例方法
2019/08/01 PHP
javascript的console.log()用法小结
2012/05/31 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
jQuery文本框(input textare)事件绑定方法教程
2013/04/24 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
2016/02/25 Javascript
JavaScript必知必会(三) String .的方法来自何方
2016/06/08 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
微信小程序 PHP后端form表单提交实例详解
2017/01/12 Javascript
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
Django之模型层多表操作的实现
2019/01/08 Python
详解Python3 pandas.merge用法
2019/09/05 Python
简单了解python中的与或非运算
2019/09/18 Python
AUC计算方法与Python实现代码
2020/02/28 Python
详解Pycharm出现out of memory的终极解决方法
2020/03/03 Python
python+selenium+chromedriver实现爬虫示例代码
2020/04/10 Python
keras 解决加载lstm+crf模型出错的问题
2020/06/10 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
美国最大的团购网站:Groupon
2016/07/23 全球购物
绿色小区申报材料
2014/08/22 职场文书
销售人员工作自我评价
2014/09/21 职场文书
毕业证代领委托书
2014/09/26 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server
Python的代理类实现,控制访问和修改属性的权限你都了解吗
2022/03/21 Python