JavaScript中this的学习笔记及用法整理


Posted in Javascript onFebruary 17, 2020

很多人可能会有疑问,this到底是什么?为什么this的值变化多端?

首先我们来概括下this.

this是一个对象,一般存在于函数中,表示当前函数的执行上下文;

值得一提的是,当函数在执行后,this才有绑定的对象,函数未执行时,this没有内容

普通函数

普通函数中的this,普通函数中的this表示调用此函数时的对象,如下例:

var x=11;
var obj={
 x:22,
 say:function(){
  console.log(this.x)
 }
}
obj.say();
//console.log输出的是22
//调用say函数的是对象obj,所以this指代对象obj,输出的就是obj对象里的x值,即22。

箭头函数

箭头函数中的this,资料上说的箭头函数内部是没有this的,也就是说,箭头函数里面的this会继承自外部的this,下面有个例子,用来详细说明下:

var x=11;
var obj={
 x:22,
 y:this,//window
 say:()=>{
  console.log(this.x);
 }
}
obj.say();
//输出的值为11
console.log(obj.y);
//输出的值为window对象
//obj对象中的this指代的就是window,也就是全局环境,因为箭头函数中的this就会就近找到上一个对象中this所指代的对象,从以上例子可以看出来,obj内部属性y就为obj内部this指代的对象,输出是window。

由于箭头函数不绑定this, 它会捕获其所在(即定义的位置)上下文的this值, 作为自己的this值,

1、所以 call() / apply() / bind() 方法对于箭头函数来说只是传入参数,对它的 this 毫无影响。

2、考虑到 this 是词法层面上的,严格模式中与 this 相关的规则都将被忽略。(可以忽略是否在严格模式下的影响)
因为箭头函数可以捕获其所在上下文的this值 所以

function Person() { 
  this.age = 0; 
  setInterval(() => {
    // 回调里面的 `this` 变量就指向了期望的那个对象了
    this.age++;
  }, 3000);
}

var p = new Person();

两个例子加深印象

普通函数

var a=11
function test1(){
 this.a=22;
 let b=function(){
  console.log(this.a);
 };
 b();
}
var x=new test1();
//输出11

为什么会输出11?因为普通函数中的this指向的是调用它的对象,如果没有直接调用对象,会指向undefined或者window,一般都会指向window,在严格模式下才会指向undefined。上述的例子中,并没有明确的调用对象,而普通函数中的this并不会向上继续找对象,所以直接返回window。

箭头函数

var a=11;
function test2(){
 this.a=22;
 let b=()=>{console.log(this.a)}
 b();
}
var x=new test2();
//输出22

箭头函数中会往上寻找this,直到找到所代表的this为止。例子中,构造函数被实例化成为一个对象x,那x中的this指代的就是对象x本身,所以箭头函数this就代表x对象,x对象内部的a值为22,所以输出22。

总结

1、箭头函数中的this是在声明中就定义好了的,而普通函数中的this则是在调用时定义好的。

2、箭头函数不绑定this, 它会捕获其所在(即定义的位置)上下文的this值, 作为自己的this值。正是因为它没有this,所以也就不能用作构造函数。,

3、若想改变this指向可以用bind方法。bind方法在ES5引入, 在Function的原型链上, Function.prototype.bind。通过bind方法绑定后, 函数将被永远绑定在其第一个参数对象上, 而无论其在什么情况下被调用。

以上就是三水点靠木小编整理的全部相关知识点,希望能够帮助到大家。

Javascript 相关文章推荐
jQuery 全选效果实现代码
Mar 23 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
Dec 19 Javascript
JavaScript前端开发之实现二进制读写操作
Nov 04 Javascript
jQuery插件实现多级联动菜单效果
Dec 01 Javascript
深入浅析react native es6语法
Dec 09 Javascript
JQuery ztree 异步加载实例讲解
Feb 25 Javascript
利用fecha进行JS日期处理
Nov 21 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
js用类封装pop弹窗组件
Oct 08 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 Javascript
Vue实现移动端拖拽交换位置
Jul 29 Javascript
Vue 中使用 typescript的方法详解
Feb 17 #Javascript
vue框架中props的typescript用法详解
Feb 17 #Javascript
JS通用方法触发点击事件代码实例
Feb 17 #Javascript
JS前端广告拦截实现原理解析
Feb 17 #Javascript
JavaScript代码异常监控实现过程详解
Feb 17 #Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
Feb 17 #Javascript
npx create-react-app xxx创建项目报错的解决办法
Feb 17 #Javascript
You might like
php禁用cookie后session设置方法分析
2016/10/19 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
可以文本显示的公告栏的js代码
2007/03/11 Javascript
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
2014/09/25 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
还不懂递归?读完这篇文章保证你会懂
2018/07/29 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
[01:35:53]完美世界DOTA2联赛PWL S3 Magma vs GXR 第二场 12.13
2020/12/17 DOTA
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
Python MySQLdb Linux下安装笔记
2015/05/09 Python
python清除字符串里非数字字符的方法
2015/07/02 Python
python xml解析实例详解
2016/11/14 Python
Python遍历numpy数组的实例
2018/04/04 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
详解python中init方法和随机数方法
2019/03/13 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
Python3+Appium安装使用教程
2019/07/05 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
实习生自我鉴定范文
2013/12/05 职场文书
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
2015年安全生产责任书
2015/01/30 职场文书
超级礼物观后感
2015/06/15 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js
uniapp 微信小程序 自定义tabBar 导航
2022/04/22 Javascript