首页 > 其他分享 >浅谈一下对于 js 中的 this 的理解

浅谈一下对于 js 中的 this 的理解

时间:2023-05-05 22:13:14浏览次数:28  
标签:function console log name 对象 js window 理解 浅谈

浅谈一下对于 js 中的 this 的理解




对于 this 值的定义:

简单来说 this 是一个对象,这个对象具体的值是什么,取决于运行时的环境,即代码执行时的环境。

MDN:

当前执行上下文( global 、 function 或 eval )的一个属性,在非严格模式下,总是指向一个 对象 ,在严格模式下可以是 任意值

解释:

  • global 是指全局对象,例如浏览器环境下的 window ,node 环境下的 global
  • eval 是指的 eval() 函数,它可以将传入的字符串当作 js 代码执行。(尽量不要使用,执行速度更慢且容易造成安全问题)

稍微简单的理解是:

在全局环境下,this 指全局对象;在函数中,如果该函数是对象(object)或者类(class)的属性,this 指代当前对象或者类,如果是直接声明并执行的函数,则是全局对象(非严格模式)。以上的总结在大部分场景下是正确的。



具体到代码环境下 this 所代表的值:

以下列举一些常见的代码片段:

注释 // 后面会说明 this 指代的值,以方便理解,以下代码都是在非任意 {} 包裹的代码块中实现

console.log(this); // window
function test() {
  console.log(this); // window
}
test();
setTimeout(function () {
  console.log("---");
  console.log(this); // window
  console.log("---");
}, 100);
"use strict"; // 严格模式
function test2() {
  console.log(this); //undefined
}
test2();
const person = {
  id: 1,
  name: "tom",
  do: function () {
    console.log(this.id); // 这里的 this 就是指代 person 这个对象
    console.log("do something about");
  },
};
class food {
  constructor(name) {
    this.name = name; // 这里的 this 指 food 这个类
  }
}
class cookedFood extends food {
  constructor(name, type) {
    // console.log(this); // 会报错,子类必须在调用 super 方法后才能使用 this
    super(name);
    this.type = type; // 这里的 this 指 cookedFood 这个类
  }
}

new cookedFood("鱼", "红烧");
const obj = { a: 1 };
var a = 0;
function whatThis() {
  return this.a;
}
whatThis(); // 0  this 指 window
whatThis.call(obj); // 1  this 指 obj
whatThis.apply(obj); // 1  this 指 obj

其它注意点:

  • 要注意开始提到的 在严格模式下可以是任意值的概念

在非严格模式下使用 callapply 时,如果用作 this 的值不是对象,则会被尝试转换为对象。nullundefined 被转换为全局对象。原始值如 7'foo' 会使用相应构造函数转换为对象。因此 7 会被转换为 new Number(7) 生成的对象,字符串 'foo' 会转换为 new String('foo') 生成的对象。

  • 在箭头函数中,this与封闭词法环境的this保持一致。在全局代码中,它将被设置为全局对象。

如果将this传递给callbind、或者apply来调用箭头函数,它将被忽略。不过你仍然可以为调用添加参数,不过第一个参数(thisArg)应该设置为null

标签:function,console,log,name,对象,js,window,理解,浅谈
From: https://www.cnblogs.com/chkhk/p/17375491.html

相关文章

  • js基础--this的作用域、函数的调用与bind高阶函数
    this的作用域箭头函数也无法通过call、apply改变this箭头函数也没有arguments函数的调用并指定this使用call调用时先指定参数this,后指定实参。。apply则是数组传递实参bind高阶函数:可以创建一个新的函数并锁死this与实参......
  • 分水岭算法的理解和应用
    原文:https://blog.csdn.net/Evonnehyf/article/details/104066799分水岭算法主要思想图像的灰度空间很像地球表面的整个地理结构,每个像素的灰度值代表高度。分水岭就是灰度值较大的像素连成的线。二值化阈值可以理解为水平面,比灰度二值化阈值小的像素区域会被淹没。随着水位线的......
  • js 阻塞
    相关链接:https://www.bilibili.com/video/BV1Zy4y1K7SH/?p=42&share_source=copy_web&vd_source=6bac919d0e003af4419677ae239707bf......
  • js基础---函数参数
    arguments:arguments不是真正的数组所以无法使用数组的方法可变参数:可变参数可以和形参配合使用,可变参数在形参后面。......
  • 提取最新的各国疫情数据中json字符串
    1.正则表达式提取json字符串:   -----------------------------------------------------------------初始数据-----------------------------------------------------------------try{window.fetchIndexMallList={"success":true,"errorCode":0,"result......
  • js 原型链
    1.原型原型包含了构造函数的元信息,元信息包括构造函数本身、通用属性、通用方法、私有属性、原始值等等;由于原型本身也是对象,因此还包含一个特殊的属性__proto__,它用来访问原型的原型。2.原型链构造函数创造的实例可以访问构造函数的原型,如果这个原型刚好是其他构造函数的实......
  • 《渗透测试》WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性 2022 Day31
     1、文件上传-前端验证2、文件上传-黑白名单3、文件上传-user.ini妙用4、文件上传-PHP语言特性 前置:后门代码需要用特定格式后缀解析,不能以图片后缀解析脚本后门代码(解析漏洞除外)如:jpg图片里面有php后门代码,不能被触发,所以连接不上后门#详细点:1、检测层面:前......
  • js基础---数组的方法
    sort():破坏性方法forEach():遍历数组,需要一个回调函数作为参数,遍历的次数与数组的长度有关。filter():将数组中符合要求的元素保存在新数组中返回需要一个回调函数作为参数,并根据函数返回值过滤数组非破坏型方法map():根据当前数组返回新数组需要回调函数做为参数回调函数的返......
  • CesiumWidget.js的作用
    顾名思义,CesiumWidget就是cesium小部件的意思。但是,cesium包含哪些小部件?这些小部件又有哪些意义?这些小部件是不可或缺的吗?看《Cesium原理篇:1最长的一帧之渲染调度》讲,好像cesium的启动就是由widget来触发的?CesiumWidget.jsstartRenderLoop函数需要传入一个widget参数。这个w......
  • ExtJs学习之Button(08)
    最少代码:HelloWorld.html源文件下载点击事件<linkrel="stylesheet"href="theme-gray-all.css"><!--样式--><scriptsrc="ext-all.js"></script><!--行为--><script>Ext.onReady(function(){/*-自己写的代码--开始--......