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代码[多浏览器兼容]
Jun 07 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
May 12 Javascript
jQuery 设置 CSS 属性示例介绍
Jan 16 Javascript
document.forms用法示例介绍
Jun 26 Javascript
js选项卡的实现方法
Feb 09 Javascript
全面解析Bootstrap排版使用方法(标题)
Nov 30 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
vue + element-ui的分页问题实现
Dec 17 Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 Javascript
JS Thunk 函数的含义和用法实例总结
Apr 08 Javascript
原生JS实现京东查看商品点击放大
Dec 21 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
preg_match_all使用心得分享
2014/01/31 PHP
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
浅谈javascript 面向对象编程
2009/10/28 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
2013/06/16 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
js如何打印object对象
2015/10/16 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
2016/02/01 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
python基础教程之实现石头剪刀布游戏示例
2014/02/11 Python
python定时执行指定函数的方法
2015/05/27 Python
详解C++编程中一元运算符的重载
2016/01/19 Python
python实现逻辑回归的方法示例
2017/05/02 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
python实现可逆简单的加密算法
2019/03/22 Python
使用Python将字符串转换为格式化的日期时间字符串
2019/09/01 Python
Linux下升级安装python3.8并配置pip及yum的教程
2020/01/02 Python
自定义Django_rest_framework_jwt登陆错误返回的解决
2020/10/18 Python
Oracle的内存结构(Memory structures)
2015/06/10 面试题
简短证婚人证婚词
2014/01/09 职场文书
网上蛋糕店创业计划书
2014/01/24 职场文书
大学生秋游活动方案
2014/02/17 职场文书
创建文明城市标语
2014/06/16 职场文书
单位工作证明范文
2014/09/14 职场文书
一年级小学生评语大全
2014/12/25 职场文书
python实现对doc、txt、xls等文档的读写操作
2022/04/02 Python