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 相关文章推荐
js购物车实现思路及代码(个人感觉不错)
Dec 23 Javascript
javascript setinterval 的正确语法如何书写
Jun 17 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
javascript实现带节日和农历的日历特效
Feb 01 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
jquery插件hiAlert实现网页对话框美化
May 03 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
详解jQuery选择器
Dec 21 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
浅谈mint-ui 填坑之路
Nov 06 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 Javascript
JavaScript编码小技巧分享
Sep 17 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 Smarty date_format [格式化时间日期]
2010/03/15 PHP
PHP中10个不常见却非常有用的函数
2010/03/21 PHP
php实现统计邮件大小的方法
2013/08/06 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
裁剪字符串trim()自定义改进版
2013/04/10 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
jQuery获取节点和子节点文本的方法
2014/07/22 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
JavaScript中的Math.E属性使用详解
2015/06/12 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
聊一聊JS中的prototype
2016/09/29 Javascript
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
Python调用C/C++动态链接库的方法详解
2014/07/22 Python
python获取远程图片大小和尺寸的方法
2015/03/26 Python
python简单实现旋转图片的方法
2015/05/30 Python
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
使用python将大量数据导出到Excel中的小技巧分享
2018/06/14 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
linux系统都有哪些运行级别
2012/04/15 面试题
职业教育毕业生求职信
2013/11/09 职场文书
个人违纪检讨书
2014/09/15 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
买房协议书范本
2014/10/23 职场文书
工作检讨书怎么写
2015/01/23 职场文书
浅谈Redis的几个过期策略
2021/05/27 Redis
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript