老生常谈 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 相关文章推荐
javascript 面向对象思想 附源码
Jul 07 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
Feb 21 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
Node.js实现兼容IE789的文件上传进度条
Sep 02 Javascript
react-redux中connect()方法详细解析
May 27 Javascript
React服务端渲染(总结)
Jul 01 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
Javascript三种字符串连接方式及性能比较
May 28 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
Dec 17 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使用base64加密解密图片示例分享
2014/01/20 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
php加密之discuz内容经典加密方式实例详解
2017/02/04 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
基于jquery的模态div层弹出效果
2010/08/21 Javascript
JavaScript类和继承 prototype属性
2010/09/03 Javascript
基于jQuery的倒计时插件代码
2011/05/07 Javascript
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
javascript中 try catch用法
2015/08/16 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
jQuery仿京东商城楼梯式导航定位菜单
2016/07/25 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
原生JavaScript实现的简单放大镜效果示例
2018/02/07 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
2018/09/14 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
原生js实现自定义滚动条
2021/01/20 Javascript
在Python中操作字典之update()方法的使用
2015/05/22 Python
Python编程实现及时获取新邮件的方法示例
2017/08/10 Python
python3.x提取中文的正则表达式示例代码
2019/07/23 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
Python3获取cookie常用三种方案
2020/10/05 Python
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
2015/10/22 面试题
计算机专业毕业生自我鉴定
2014/01/16 职场文书
初中校园广播稿
2014/02/02 职场文书
幼儿园教师岗位职责
2014/03/17 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
开场白怎么写
2015/06/01 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
css背景和边框标签实例详解
2021/05/21 HTML / CSS
Android开发手册Chip监听及ChipGroup监听
2022/06/10 Java/Android
keepalived + nginx 实现高可用方案
2022/12/24 Servers