老生常谈 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删除ID为sNews的tr元素的内容
Apr 10 Javascript
关于img的href和src取变量及赋值的方法
Apr 28 Javascript
用console.table()调试javascript
Sep 04 Javascript
Javascript闭包用法实例分析
Jan 23 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
javascript+css3 实现动态按钮菜单特效
Feb 06 Javascript
window.open打开窗口被拦截的快速解决方法
Aug 04 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
JS自定义函数实现时间戳转换成date的方法示例
Aug 27 Javascript
使用vue制作探探滑动堆叠组件的实例代码
Mar 07 Javascript
微信小程序+云开发实现欢迎登录注册
May 24 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 at(@)符号的用法简介
2009/07/11 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
php中preg_match的isU代表什么意思
2015/10/01 PHP
PHP 中常量的知识整理
2017/04/14 PHP
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
Nodejs异步回调之异常处理实例分析
2018/06/22 NodeJs
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
前后端如何实现登录token拦截校验详解
2018/09/03 Javascript
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
Python变量类型知识点总结
2019/02/18 Python
Python3.5 Json与pickle实现数据序列化与反序列化操作示例
2019/04/29 Python
python调用并链接MATLAB脚本详解
2019/07/05 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
CSS3实现莲花绽放的动画效果
2020/11/06 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
高中生学习生活的自我评价
2013/11/27 职场文书
优秀党员获奖感言
2014/02/18 职场文书
2014年班组长工作总结
2014/11/20 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
php随机生成验证码,php随机生成数字,php随机生成数字加字母!
2021/04/01 PHP
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL