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 相关文章推荐
JSONP跨域的原理解析及其实现介绍
Mar 22 Javascript
JavaScript 表单处理实现代码
Apr 13 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 Javascript
jquery的幻灯片图片切换效果代码分享
Sep 07 Javascript
React.js入门学习第一篇
Mar 30 Javascript
JavaScript闭包实例详解
Jun 03 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
Sep 01 Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 Javascript
深入理解JavaScript 中的执行上下文和执行栈
Oct 23 Javascript
js实现带箭头的进度流程
Mar 26 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
Apr 26 Javascript
vue style width a href动态拼接问题的解决
Aug 07 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性能优化的介绍
2013/06/20 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
2010/04/01 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
jquery验证邮箱格式是否正确实例讲解
2015/11/16 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
JS添加或修改控件的样式(Class)实现方法
2016/10/15 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
详解React 16 中的异常处理
2017/07/28 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
解决vue多个路由共用一个页面的问题
2018/03/12 Javascript
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
java直接调用python脚本的例子
2014/02/16 Python
用Django实现一个可运行的区块链应用
2018/03/08 Python
python的pip安装以及使用教程
2018/09/18 Python
python实现坦克大战
2020/04/24 Python
Pat McGrath Labs官网:世界上最有影响力的化妆师推出的彩妆品牌
2018/01/07 全球购物
必须要使用游标的SQL语句有那些
2012/05/07 面试题
护士旷工检讨书
2015/08/15 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers
Django框架中模型的用法
2022/06/10 Python
windows server 2016 域环境搭建的方法步骤(图文)
2022/06/25 Servers