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具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
菜鸟javascript基础资料整理3 正则
Dec 06 Javascript
理解jQuery stop()方法
Nov 21 Javascript
javascript日期比较方法实例分析
Jun 17 Javascript
深入理解vue-router之keep-alive
Aug 31 Javascript
Node.js 中使用 async 函数的方法
Nov 20 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
Sep 05 Javascript
vue组件化中slot的基本使用方法
May 01 Javascript
Electron 调用命令行(cmd)
Sep 23 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 Javascript
react用Redux中央仓库实现一个todolist
Sep 29 Javascript
Angular value与ngValue区别详解
Nov 27 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设计聊天室步步通
2006/10/09 PHP
php格式输出文件var_export函数实例
2014/11/15 PHP
php显示时间常用方法小结
2015/06/05 PHP
php类的定义与继承用法实例
2015/07/07 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
PHP dirname简单使用代码实例
2020/11/13 PHP
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
2014/12/03 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
JavaScript This指向问题详解
2019/11/25 Javascript
vue iview实现动态新增和删除
2020/06/17 Javascript
深入源码解析Python中的对象与类型
2015/12/11 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
python 解决Fatal error in launcher:错误问题
2020/05/21 Python
html5+css3实现一款注册表单实例
2013/04/17 HTML / CSS
JAVA和C++区别都有哪些
2015/03/30 面试题
初中校园广播稿
2014/02/02 职场文书
物业经理自我鉴定
2014/03/03 职场文书
精神文明单位申报材料
2014/05/02 职场文书
幼儿园见习报告
2014/10/30 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
感谢信怎么写
2015/01/21 职场文书
追讨欠款律师函
2015/06/24 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫