老生常谈 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 相关文章推荐
IE不出现Flash激活框的小发现的js实现方法
Sep 07 Javascript
js判断输入是否为数字的具体实例
Aug 03 Javascript
动态加载script文件的两种方法
Aug 15 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
javascript如何操作HTML下拉列表标签
Aug 20 Javascript
jquery实现倒计时效果
Dec 14 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
Dec 09 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 Javascript
vuex存取值和映射函数使用说明
Jul 24 Javascript
JavaScript中MutationObServer监听DOM元素详情
Nov 27 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
session 的生命周期是多长
2006/10/09 PHP
8个必备的PHP功能开发
2015/10/02 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
json跟xml的对比分析
2008/06/10 Javascript
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
Js sort排序使用方法
2011/10/17 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
JS中常用的消息框总结
2018/02/24 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
QML实现圆环颜色选择器
2019/09/25 Javascript
详解jQuery中的prop()使用方法
2020/01/05 jQuery
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
python实现图片批量剪切示例
2014/03/25 Python
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
JavaScript实现前端网页版倒计时
2021/03/24 Javascript
应聘护士自荐信
2013/10/21 职场文书
医药销售自我评价200字
2014/09/11 职场文书
小学少先队辅导员述职报告
2015/01/10 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android
Spring实现内置监听器
2021/07/09 Java/Android
Python实现排序方法常见的四种
2021/07/15 Python