老生常谈 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 跨域和ajax 跨域问题小结
Jul 01 Javascript
IE DOM实现存在的部分问题及解决方法
Jul 25 Javascript
Javascript 面向对象编程(一) 封装
Aug 28 Javascript
JS截取字符串常用方法详细整理
Oct 28 Javascript
js动态设置鼠标事件示例代码
Oct 30 Javascript
JavaScript四种调用模式和this示例介绍
Jan 02 Javascript
js中传递特殊字符(+,&)的方法
Jan 16 Javascript
你可能不知道的JavaScript的new Function()方法
Apr 17 Javascript
JS 对java返回的json格式的数据处理方法
Dec 05 Javascript
详解Vue2.0组件的继承与扩展
Nov 23 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
May 07 Javascript
vue打包时去掉所有的console.log
Apr 10 Vue.js
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中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
如何使用PHP批量去除文件UTF8 BOM信息
2013/08/05 PHP
对PHP PDO的一些认识小结
2015/01/23 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
PHP自定义多进制的方法
2016/11/03 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
Jquery replace 字符替换实现代码
2010/12/02 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
javascript打印html内容功能的方法示例
2013/11/28 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
2016/06/08 Javascript
JS实现复制功能
2017/03/01 Javascript
js评分组件使用详解
2017/06/06 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
纯Python开发的nosql数据库CodernityDB介绍和使用实例
2014/10/23 Python
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
python实现多张图片拼接成大图
2019/01/15 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
浅谈TensorFlow之稀疏张量表示
2020/06/30 Python
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
汉森批发:Hansen Wholesale
2018/05/24 全球购物
找工作最新求职信
2013/12/22 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
四风自我剖析材料
2014/09/30 职场文书
英语通知范文
2015/04/22 职场文书
入党培养人考察意见
2015/06/08 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
成本低的5个创业项目:投资小、赚钱快
2019/08/20 职场文书
比较node.js和Deno
2021/04/27 Javascript
Vue和Flask通信的实现
2021/05/19 Vue.js
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle