函数四种调用模式以及其中的this指向


Posted in Javascript onJanuary 16, 2017

第一种:函数直接执行模式

function add(a,b){
   console.log(this);
   return a+b;
  }
 add(10,20)//this===window

第二种:对象方法的调用模式

var obj={
   name:'aaa',
   age:20,
   said:function(){
    console.log(this);
   }
  }
obj.said();//this===obj,此处this指代被调用者

第三种:构造器的调用模式

function School(){
   this.said=function(){
    console.log(this);
   }
  }
var nanj=new School();
nanj.said();//对象调用自己的方法,this===nanj,类似上面

第四种:call和apply调用模式

function change(a,b){
   this.detial=a*b;
   console.log(this);
  }
  var p={};
  change.call(p,4,5);//此处的this===p
  console.log(p.detial);
  var q=[];
  change.call(q,5,10)//this===q
  console.log(q.detial);
  //apply和call一样的用法,只不过apply第二个参数用数组进行传递
  var arr=[];
  change.apply(arr,[10,10]);//this===arr
  console.log(arr.detial);
  var str={};
  change.apply(str,[20,20]);//this===str
  console.log(str.detial);

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
准确获得页面、窗口高度及宽度的JS
Nov 26 Javascript
jQuery使用手册之一
Mar 24 Javascript
web前端开发也需要日志
Dec 09 Javascript
表单切换,用回车键替换Tab健(不支持IE)
Jul 20 Javascript
JS定时器实例
Apr 17 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
js对象浅拷贝和深拷贝详解
Sep 05 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
Javascript实现秒表倒计时功能
Nov 17 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 Javascript
js实现导航栏中英文切换效果
Jan 16 #Javascript
Bootstrap面板使用方法
Jan 16 #Javascript
codeMirror插件使用讲解
Jan 16 #Javascript
微信小程序 图片边框解决方法
Jan 16 #Javascript
微信小程序 scroll-view隐藏滚动条详解
Jan 16 #Javascript
微信小程序 video详解及简单实例
Jan 16 #Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 #Javascript
You might like
php字符串操作针对负值的判断分析
2016/07/28 PHP
PHP图片添加水印功能示例小结
2016/10/03 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
php格式文件打开的四种方法
2018/02/24 PHP
PHP执行系统命令函数实例讲解
2021/03/03 PHP
js静态作用域的功能。
2006/12/25 Javascript
javascript eval函数深入认识
2009/02/21 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
2013/02/07 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
js+css实现select的美化效果
2016/03/24 Javascript
jQuery判断checkbox选中状态
2016/05/12 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
2016/05/31 Javascript
HTML5 js实现拖拉上传文件功能
2020/11/20 Javascript
jquery获取下拉框中的循环值
2017/02/08 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
2017/08/29 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
Angular实现搜索框及价格上下限功能
2018/01/19 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
如何通过JS实现日历简单算法
2020/10/14 Javascript
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
vue中activated的用法
2021/01/03 Vue.js
举例介绍Python中的25个隐藏特性
2015/03/30 Python
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
微信公众号token验证失败解决方案
2019/07/22 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
Python gevent协程切换实现详解
2020/09/14 Python
关于python中导入文件到list的问题
2020/10/31 Python
HTML5 File API改善网页上传功能
2009/08/19 HTML / CSS
市场部岗位职责范本
2015/04/15 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python
将Python代码打包成.exe可执行文件的完整步骤
2021/05/12 Python
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题