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 相关文章推荐
js 事件处理函数间的Event物件是否全等
Apr 08 Javascript
js获取单选框或复选框值及操作
Dec 18 Javascript
Javasipt:操作radio标签详解
Dec 30 Javascript
js实现浏览本地文件并显示扩展名的方法
Aug 17 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
Jan 22 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 Javascript
JavaScript获取ul中li个数的方法
Feb 13 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
Jun 11 Javascript
laravel5.4+vue+element简单搭建的示例代码
Aug 29 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
Vue-CLI 3.X 部署项目至生产服务器的方法
Mar 22 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中的浅复制与深复制的实例详解
2017/10/26 PHP
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
Javascript中判断变量是数组还是对象(array还是object)
2013/08/14 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
javascript 数组操作详解
2015/01/29 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
详解Javascript继承的实现
2016/03/25 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
原生JS实现圣旨卷轴展开效果
2017/03/06 Javascript
Vue-cli创建项目从单页面到多页面的方法
2017/09/20 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
对pandas的算术运算和数据对齐实例详解
2018/12/22 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
HTML5中外部浏览器唤起微信分享
2020/01/02 HTML / CSS
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
英国名牌男装店:Standout
2021/02/17 全球购物
保荐人的岗位职责
2013/11/19 职场文书
捐书寄语赠言
2014/01/18 职场文书
最新奶茶店创业计划书范文
2014/02/08 职场文书
酒店管理求职信范文
2014/04/06 职场文书
党员批评与自我批评总结
2014/10/15 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏