老生常谈 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 相关文章推荐
prototype class详解
Sep 07 Javascript
[原创]后缀就扩展名为js的文件是什么文件
Dec 06 Javascript
JavaScript 原型学习总结
Oct 29 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
Mar 15 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
javascript实现的多个层切换效果通用函数实例
Jul 06 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
May 12 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
怎么引入(调用)一个JS文件
May 26 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
vue-cli3全面配置详解
Nov 14 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 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中MD5函数使用实例代码
2008/06/07 PHP
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
PHP解析目录路径的3个函数总结
2014/11/18 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
PHP 计算两个时间段之间交集的天数示例
2019/10/24 PHP
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
Javascript绝句欣赏 一些经典的js代码
2012/02/22 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
2016/12/08 Javascript
详解如何较好的使用js
2016/12/16 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
bootstrap table动态加载数据示例代码
2017/03/25 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
2020/08/19 Javascript
python的几种开发工具介绍
2007/03/07 Python
Python中zfill()方法的使用教程
2015/05/20 Python
Python如何实现MySQL实例初始化详解
2017/11/06 Python
python3.4实现邮件发送功能
2018/05/28 Python
python计算两个数的百分比方法
2018/06/29 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
Java如何基于wsimport调用wcf接口
2020/06/17 Python
css3一款3D字体带阴影效果的实现步骤
2013/03/20 HTML / CSS
《大禹治水》教学反思
2014/04/27 职场文书
毕业生实习证明
2014/09/19 职场文书
2014年客服工作总结范文
2014/11/13 职场文书