老生常谈 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 相关文章推荐
jQuery使用手册之二 DOM操作
Mar 24 Javascript
在html页面中包含共享页面的方法
Oct 24 Javascript
JavaScript 事件系统
Jul 22 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
js如何判断用户是否是用微信浏览器
Jun 05 Javascript
jQuery带进度条全屏图片轮播特效代码分享
Jun 28 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
Vue.set 全局操作简单示例
Sep 19 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 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
解析php中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
PHP中empty,isset,is_null用法和区别
2017/02/19 PHP
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
JavaScript创建类/对象的几种方式概述及实例
2013/05/06 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
DOM 高级编程
2015/05/06 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
2017/06/29 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
10 行Python 代码实现 AI 目标检测技术【推荐】
2019/06/14 Python
python 实现在一张图中绘制一个小的子图方法
2019/07/07 Python
详解Python Matplotlib解决绘图X轴值不按数组排序问题
2019/08/05 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
利用Python优雅的登录校园网
2020/10/21 Python
美国领先的精品家居照明和装饰产品在线零售商:LightsOnline.com
2018/01/23 全球购物
主管会计岗位责任制
2014/02/10 职场文书
小学生操行评语
2014/04/22 职场文书
新文化运动的口号
2014/06/21 职场文书
超强台风观后感
2015/06/09 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python