老生常谈 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 可以拖动的div实现代码 脚本之家修正版
Jun 26 Javascript
JavaScript Perfection kill 测试及答案
Mar 23 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 Javascript
从零开始搭建一个react项目开发
Feb 09 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
jquery实现吸顶导航效果
Jan 08 jQuery
vue中用 async/await 来处理异步操作
Jul 18 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
Aug 18 Javascript
js实现车辆管理系统
Aug 26 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
虹吸壶是谁发明的?煮出来的咖啡好喝吗
2021/03/04 冲泡冲煮
用php写的serv-u的web申请账号的程序
2006/10/09 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
layui动态加载多表头的实例
2019/09/05 Javascript
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
Python的另外几种语言实现
2015/01/29 Python
Python使用Paramiko模块编写脚本进行远程服务器操作
2016/05/05 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
使用Django连接Mysql数据库步骤
2019/01/15 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
Linux文件操作命令都有哪些
2015/02/27 面试题
企业法人代表任命书
2014/06/06 职场文书
2014县政府领导班子三严三实对照检查材料思想汇报
2014/09/26 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
MySQL读取JSON转换的方式
2022/03/18 MySQL