老生常谈 js中this的指向


Posted in Javascript onJune 30, 2016

在js中this的指向对于新手来说一定是个难题,但是如果你真正理解了的话,也就没什么问题啦,下面就来讲讲this吧。

JS中,this的值取决于调用的模式(调用对象),而JS中共有4种调用模式:

1.函数调用模式

当一个函数不是一个对象的属性时,当作函数俩调用,这时函数内的this指向全局对象(大对数情况下是window)

window.value=1;
function getValue(){
 console.log(this.value);
}
getValue();//输出1,此时的this指向window

2.方法调用模式

当一个函数是一个对象的属性时,我们称它为该对象的一个方法,当一个方法被调用时,this指向该对象

var Obj={
  value:2,
  getValue:function(){
       console.log(this.value);//输出2,this指向Obj
  }   
}

!!!该模式中,this到对象的绑定发生在方法被调用时

3.构造器调用模式

使用new调用的函数称为构造器函数,此时的this指向该构造器函数实例出来的对象

function main(val){
  this.value=val;
}
main.prototype.getValue=function(){
  console.log(this.value);
}

var fun=new main(3);
fun.getValue();
fun.value;//输出3,this指向main的实例对象fun

4.apply/call调用模式以及bind

apply、call、bind方法可以让我们设定调用者中的this指向谁

function showValue(){
  console.log(this.value);
}
var obj={
  value:4
}
showValue.call(obj)//输出4,this指向了obj对象

ECMA5中新增了bind方法,具体用法可以google一下,这里是演示this绑定的用法

function showValue(){
  console.log(this.value);
}
var obj={
  value:4
}
var showValue2=showValue.bind(obj);
showValue2()//输出4,this指向了obj对象

bind有很多种用法,可以自己去查阅一下哦

以上这篇老生常谈 js中this的指向就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
FCK调用方法..
Dec 21 Javascript
JavaScript 学习 - 提高篇
Feb 02 Javascript
javascript实现日历控件(年月日关闭按钮)
Dec 12 Javascript
基于jQuery实现下拉框
Nov 24 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
Aug 04 Javascript
巧用数组制作图片切换js代码
Nov 29 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
JS实现的简单拖拽功能示例
Mar 13 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
vue超时计算的组件实例代码
Jul 09 Javascript
vue使用echarts画组织结构图
Feb 06 Vue.js
JS使用cookie设置样式的方法
Jun 30 #Javascript
浅谈js和css内联外联注意事项
Jun 30 #Javascript
js传值后台中文出现乱码的解决方法
Jun 30 #Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 #Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
Jun 30 #Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 #Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 #Javascript
You might like
DC游戏Steam周三特惠 《蝙蝠侠》阿卡姆系列平史低
2020/04/09 欧美动漫
PHP实现手机号码中间四位用星号(*)隐藏的自定义函数分享
2014/09/27 PHP
php用ini_get获取php.ini里变量值的方法
2015/03/04 PHP
PHP正则替换函数preg_replace()报错:Notice Use of undefined constant的解决方法分析
2017/02/04 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
JQUERY操作JSON实例代码
2010/02/09 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
jQuery实现滑动星星评分效果(每日分享)
2019/11/13 jQuery
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
js实现磁性吸附的示例
2020/10/26 Javascript
[01:07:34]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第二场 1月9日
2021/03/11 DOTA
python批量提交沙箱问题实例
2014/10/08 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
matplotlib实现区域颜色填充
2019/03/18 Python
python安装scipy的方法步骤
2019/06/26 Python
python爬虫可以爬什么
2020/06/16 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
社区包粽子活动方案
2014/01/21 职场文书
小学中秋节活动方案
2014/02/06 职场文书
计算机专业求职信
2014/06/02 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
农村党支部书记四风问题个人对照检查材料
2014/09/21 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
毕业生党员个人总结
2015/02/14 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
工作态度不好检讨书
2015/05/06 职场文书
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers