老生常谈 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 相关文章推荐
JavaScript 类似flash效果的立体图片浏览器
Feb 08 Javascript
JQuery+DIV自定义滚动条样式的具体实现
Jun 25 Javascript
浅析tr的隐藏和显示问题
Mar 05 Javascript
jQuery不使用插件及swf实现无刷新文件上传
Dec 08 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 Javascript
JavaScript事件学习小结(三)js事件对象
Jun 09 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
基于javascript的无缝滚动动画1
Aug 07 Javascript
在vue中使用image-webpack-loader实例
Nov 12 Javascript
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
《魔兽争霸3》重制版究竟重制了什么?玩家:这么糊弄真的好吗?
2020/05/04 魔兽争霸
PHP中extract()函数的妙用分析
2012/07/11 PHP
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
PHP代码优化的53个细节
2014/03/03 PHP
php强制运行广告的方法
2014/12/01 PHP
php实现的简单美国商品税计算函数
2015/07/13 PHP
设定php简写功能的方法
2019/11/28 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
vue 微信授权登录解决方案
2018/04/10 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
python里对list中的整数求平均并排序
2014/09/12 Python
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
Python实现接受任意个数参数的函数方法
2018/04/21 Python
Python 查找list中的某个元素的所有的下标方法
2018/06/27 Python
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
python实现dijkstra最短路由算法
2019/01/17 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
Python2 与Python3的版本区别实例分析
2020/03/30 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
viagogo英国票务平台:演唱会、体育比赛、戏剧门票
2017/03/24 全球购物
妇科医生自荐信
2013/11/05 职场文书
小学后勤管理制度
2014/01/14 职场文书
2014年幼儿园园务工作总结
2014/12/05 职场文书
大学生学生会工作总结2015
2015/05/26 职场文书