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 相关文章推荐
判断脚本加载是否完成的方法
May 26 Javascript
js插件YprogressBar实现漂亮的进度条效果
Apr 20 Javascript
iScroll.js 使用方法参考
May 16 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 Javascript
Javascript中 toFixed四舍六入方法
Aug 21 Javascript
vue+springmvc导出excel数据的实现代码
Jun 27 Javascript
微信小程序将字符串生成二维码图片的操作方法
Jul 17 Javascript
vuejs移动端实现div拖拽移动
Jul 25 Javascript
vue自动化路由的实现代码
Sep 30 Javascript
VSCode搭建React Native环境
May 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 strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
PHP--用万网的接口实现域名查询功能
2012/12/13 PHP
PHP判断图片格式的七种方法小结
2013/06/03 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
PHP类的特性实例分析
2016/09/28 PHP
解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
限制文本字节数js代码
2007/03/06 Javascript
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
2016/11/29 Javascript
基于react组件之间的参数传递(详解)
2017/09/05 Javascript
Express系列之multer上传的使用
2017/10/27 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
ionic2.0双击返回键退出应用
2019/09/17 Javascript
javascript解析json格式的数据方法详解
2020/08/07 Javascript
Python标准库defaultdict模块使用示例
2015/04/28 Python
Python中subprocess模块用法实例详解
2015/05/20 Python
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
Python中super函数的用法
2017/11/17 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
python操作kafka实践的示例代码
2019/06/19 Python
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
2014年项目工作总结
2014/11/24 职场文书
祝酒词范文
2015/08/12 职场文书