老生常谈 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实现动画效果的简单实例
Jan 27 Javascript
JS去掉第一个字符和最后一个字符的实现代码
Feb 20 Javascript
JavaScript中扩展Array contains方法实例
Aug 23 Javascript
jquery显示隐藏元素的实现代码
May 19 Javascript
fullCalendar中文API官方文档
Feb 07 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
详解Node.js串行化流程控制
May 04 Javascript
Bootstrap Table快速完美搭建后台管理系统
Sep 20 Javascript
vue-cli3.0使用及部分配置详解
Aug 29 Javascript
JavaScript实现图片放大镜效果
Jun 27 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
Sep 27 Javascript
OpenLayers3实现鼠标移动显示坐标
Sep 25 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 数组的创建、调用和更新实现代码
2009/03/09 PHP
PHP写的加密函数,支持私人密钥(详细介绍)
2013/06/09 PHP
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
thinkphp分页集成实例
2017/07/24 PHP
JavaScript基础知识之数据类型
2012/08/06 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
2017/03/29 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
vue 解决循环引用组件报错的问题
2018/09/06 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
2020/07/27 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
Python中的choice()方法使用详解
2015/05/15 Python
基于Python实现文件大小输出
2016/01/11 Python
八大排序算法的Python实现
2021/01/28 Python
Python程序中用csv模块来操作csv文件的基本使用教程
2016/03/03 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
Django获取应用下的所有models的例子
2019/08/30 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
地球鞋加拿大官网:Earth Shoes Canada
2020/11/17 全球购物
巴西最大的玩具连锁店:Ri Happy
2020/06/17 全球购物
个人找工作求职简历的自我评价
2013/10/20 职场文书
社区端午节活动方案
2014/01/28 职场文书
财务管理职业生涯规划书
2014/02/26 职场文书
推销搭讪开场白
2015/05/28 职场文书
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript