老生常谈 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 相关文章推荐
JS网络游戏-(模拟城市webgame)提供的一些例子下载
Oct 14 Javascript
js 无提示关闭浏览器页面的代码
Mar 09 Javascript
JavaScript数据结构和算法之二叉树详解
Feb 11 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
JS使用Date对象实时显示当前系统时间简单示例
Aug 23 Javascript
vue.js实现带日期星期的数字时钟功能示例
Aug 28 Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
微信小程序云开发实现云数据库读写权限
May 17 Javascript
在vue中嵌入外部网站的实现
Nov 13 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
Nov 13 Javascript
微信小程序自定义支持图片的弹窗
Dec 21 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 isset()与empty()的使用区别详解
2010/08/29 PHP
Codeigniter检测表单post数据的方法
2015/03/21 PHP
PHP实现即时输出、实时输出内容方法
2015/05/27 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
php用wangeditor3实现图片上传功能
2019/08/22 PHP
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
基于Jquery实现焦点图淡出淡入效果
2015/11/30 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
angular十大常见问题
2017/03/07 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
React Native基础入门之调试React Native应用的一小步
2018/07/02 Javascript
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
vue打包使用Nginx代理解决跨域问题
2018/08/27 Javascript
vue实现form表单与table表格的数据关联功能示例
2019/01/29 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
使用PyCharm配合部署Python的Django框架的配置纪实
2015/11/19 Python
python实现mysql的读写分离及负载均衡
2018/02/04 Python
Python封装原理与实现方法详解
2018/08/28 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
python用WxPython库实现无边框窗体和透明窗体实现方法详解
2020/02/21 Python
Django框架models使用group by详解
2020/03/11 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
专营店会计助理岗位职责
2013/11/29 职场文书
歌颂党的演讲稿
2014/09/10 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
思品教学工作总结
2015/08/10 职场文书
《青山不老》教学反思
2016/02/22 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
基于python实现银行管理系统
2021/04/20 Python