老生常谈 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 相关文章推荐
ExtJS 下拉多选框lovcombo
May 19 Javascript
学习并汇集javascript匿名函数
Nov 25 Javascript
菜鸟javascript基础资料整理3 正则
Dec 06 Javascript
AngularJS入门教程(一):静态模板
Dec 06 Javascript
js中的关联数组与普通数组详解
Jul 27 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
jquery 手势密码插件
Mar 17 Javascript
Three.js利用dat.GUI如何简化试验流程详解
Sep 26 Javascript
webpack4之如何编写loader的方法步骤
Jun 06 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 Javascript
javascript之Object.assign()的痛点分析
Mar 03 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 增加了对 .ZIP 文件的读取功能
2006/10/09 PHP
PHP实现伪静态方法汇总
2016/01/13 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
php curl 模拟登录并获取数据实例详解
2016/12/22 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
php 截取中英文混合字符串的方法
2018/05/31 PHP
thinkphp3.2框架中where条件查询用法总结
2019/08/13 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
Js 刷新框架页的代码
2010/04/13 Javascript
juqery 学习之三 选择器 简单 内容
2010/11/25 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
js改变文章字体大小的实例代码
2013/11/27 Javascript
window.location.href IE下跳转失效的解决方法
2014/03/27 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
JavaScript实现简单动态进度条效果
2018/04/06 Javascript
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
npx create-react-app xxx创建项目报错的解决办法
2020/02/17 Javascript
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
python编程之requests在网络请求中添加cookies参数方法详解
2017/10/25 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
pytorch 可视化feature map的示例代码
2019/08/20 Python
Selenium 滚动页面至元素可见的方法
2020/03/18 Python
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
UNIX特点都有哪些
2016/04/05 面试题
计算机专业推荐信范文
2013/11/20 职场文书
放飞中国梦演讲稿
2014/04/23 职场文书
体育课外活动总结
2014/07/08 职场文书
课程设计的心得体会
2014/09/03 职场文书
企业授权委托书范本
2014/09/22 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫
MyBatis核心源码深度剖析SQL语句执行过程
2022/05/20 Java/Android