老生常谈 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代码
Sep 27 Javascript
禁止ajax缓存获取程序最新数据的方法
Nov 19 Javascript
JavaScript常用验证函数实例汇总
Nov 25 Javascript
AngularJS 中的指令实践开发指南(一)
Mar 20 Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
vue axios登录请求拦截器
Apr 02 Javascript
详解Vue路由自动注入实践
Apr 17 Javascript
详解VSCode配置启动Vue项目
May 14 Javascript
React路由鉴权的实现方法
Sep 05 Javascript
详解小程序如何动态绑定点击的执行方法
Nov 26 Javascript
javascript实现电商放大镜效果
Nov 23 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生成便于打印的网页
2006/10/09 PHP
php文件系统处理方法小结
2016/05/23 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
PHP解压ZIP文件到指定文件夹的方法
2016/11/17 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
JavaScript数组函数unshift、shift、pop、push使用实例
2014/08/27 Javascript
JavaScript插件化开发教程(五)
2015/02/01 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
2016/06/21 Javascript
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
使用cookie绕过验证码登录的实现代码
2017/10/12 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
深入解析Python中的WSGI接口
2015/05/11 Python
详解Python Socket网络编程
2016/01/05 Python
转换科学计数法的数值字符串为decimal类型的方法
2018/07/16 Python
Python读取指定日期邮件的实例
2019/02/01 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
python取余运算符知识点详解
2019/06/27 Python
在Python函数中输入任意数量参数的实例
2019/07/16 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
postman和python mock测试过程图解
2020/02/22 Python
python3.6使用SMTP协议发送邮件
2020/05/20 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
学年末自我鉴定
2014/01/21 职场文书
企业总经理职责
2014/02/02 职场文书
纪律教育学习心得体会
2014/09/02 职场文书
国际贸易本科毕业生求职信
2014/09/26 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书