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 setAttribute, getAttribute 在不同浏览器上的不同表现
Aug 05 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
Jul 02 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
详解vue mixins和extends的巧妙用法
Dec 20 Javascript
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
websocket4.0+typescript 实现热更新的方法
Aug 14 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 Javascript
详解vue3.0 diff算法的使用(超详细)
Jul 01 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侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
php文件读取方法实例分析
2015/06/20 PHP
php计算多维数组中所有值总和的方法
2015/06/24 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
js文件Cookie存取值示例代码
2014/02/20 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
javascript显示上周、上个月日期的处理方法
2016/02/03 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
2016/05/20 Javascript
JS数组搜索之折半搜索实现方法分析
2017/03/27 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
JS实现可针对算术表达式求值的计算器功能示例
2018/09/04 Javascript
vuejs router history 配置到iis的方法
2018/09/20 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
简介JavaScript错误处理机制
2020/08/04 Javascript
python中django框架通过正则搜索页面上email地址的方法
2015/03/21 Python
Python 常用 PEP8 编码规范详解
2017/01/22 Python
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
Python从list类型、range()序列简单认识类(class)【可迭代】
2019/05/31 Python
python标准库OS模块函数列表与实例全解
2020/03/10 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
Python实现上下文管理器的方法
2020/08/07 Python
HTML5 客户端数据库简易使用:IndexedDB
2019/12/19 HTML / CSS
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
武汉瑞得软件笔试题
2015/10/27 面试题
员工入职担保书范文
2014/04/01 职场文书
汽车维修求职信
2014/06/15 职场文书
员工工作心得体会
2019/05/07 职场文书
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python
使用Ajax实现进度条的绘制
2022/04/07 Javascript