老生常谈 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 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
Track Image Loading效果代码分析
Aug 13 Javascript
JavaScript 开发中规范性的一点感想
Jun 23 Javascript
jquery+json实现的搜索加分页效果
Mar 31 Javascript
侧栏跟随滚动的简单实现代码
Mar 18 Javascript
jquery 取子节点及当前节点属性值的方法
Aug 24 Javascript
jquery选择器需要注意的问题
Nov 26 Javascript
js实现照片墙功能实例
Feb 05 Javascript
IE浏览器下PNG相关功能
Jul 05 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
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+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
php查询操作实现投票功能
2016/05/09 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
获取网站跟路径的javascript代码(站点及虚拟目录)
2009/10/20 Javascript
ASP Json Parser修正版
2009/12/06 Javascript
javascript如何使用bind指定接收者
2014/05/04 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
node.js中的fs.chown方法使用说明
2014/12/16 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
JavaScript中windows.open()、windows.close()方法详解
2016/07/28 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
Javascript单例模式的介绍和实例
2016/10/08 Javascript
JS动态计算移动端rem的解决方案
2016/10/14 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
2016/10/28 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
js实现简单点赞操作
2020/03/17 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
python3抓取中文网页的方法
2015/07/28 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
Python tkinter label 更新方法
2018/10/11 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
django-orm F对象的使用 按照两个字段的和,乘积排序实例
2020/05/18 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
医学专业职业生涯规划范文
2014/02/05 职场文书
旅游市场营销方案
2014/03/09 职场文书
法人代表资格证明书
2015/06/18 职场文书
nginx 多个location转发任意请求或访问静态资源文件的实现
2021/03/31 Servers
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL