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中String和StringBuffer的速度之争
Apr 01 Javascript
WEB 浏览器兼容 推荐收藏
May 14 Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 Javascript
Jquery 数组操作大全个人总结
Nov 13 Javascript
JS实现的相册图片左右滚动完整实例
Nov 23 Javascript
vue中简单弹框dialog的实现方法
Feb 26 Javascript
Vue中使用webpack别名的方法实例详解
Jun 19 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
js实现直播点击飘心效果
Aug 19 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 Javascript
vue使用echarts实现折线图
Mar 21 Vue.js
详解利用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安全编程之加密功能
2006/10/09 PHP
PHP的开发框架的现状和展望
2007/03/16 PHP
Window下PHP三种运行方式图文详解
2013/06/11 PHP
PHP生成随机数的方法实例分析
2015/01/22 PHP
Yii 2中的load()和save()示例详解
2017/08/03 PHP
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
2013/02/26 Javascript
使用js+jquery实现无限极联动
2013/05/23 Javascript
AngularJS基础知识
2014/12/21 Javascript
JS如何实现文本框随文本的长度而增长
2015/07/30 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
浅谈vue项目,访问路径#号的问题
2020/08/14 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
Python 类与元类的深度挖掘 I【经验】
2016/05/06 Python
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
python实现实时监控文件的方法
2016/08/26 Python
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
python实现括号匹配的思路详解
2018/08/23 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
python2使用bs4爬取腾讯社招过程解析
2019/08/14 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
Spartoo荷兰:鞋子、包包和服装
2018/07/12 全球购物
可靠的数据流传输TCP
2016/03/15 面试题
2014年高三毕业生自我评价
2014/01/11 职场文书
部队万能检讨书
2014/02/20 职场文书
大学本科生职业生涯规划书范文
2014/09/14 职场文书
圣诞节开幕词
2015/01/29 职场文书
2016年大学生党员承诺书
2016/03/24 职场文书
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android
方法汇总:Python 安装第三方库常用
2022/04/26 Python