您现在的位置是:首页 > 正文

谈谈代码中的this

2024-01-30 22:23:58阅读 0

  js中我们常常会遇到this,this的具体指向问题对于很多同学来说是很懵懂的;就想lz刚开始接触时候就是一脸的懵逼,经常被一些题目转的眼花缭乱。那么今天lz就跟大家一起交流一下这个this的指向问题!

  背景:不久前有个同事给我们发了一道有关this的题目,于是便有了今天的故事。如下题:

class D0XX {
  constructor () {
    this.attr = {};
  }
  init (config) {
    this.assign(config)
    return this;
  }
  assign (config) {
    this.attr.afterClose = config.afterClose;
  }
  close(){
      if(typeof this.attr.afterClose === 'function'){
          this.attr.afterClose();
      }
  }
}
class T0XX{
    init(){
        this.openPop()
    }
    openPop(){
        new D0XX().init({
            afterClose(){
                console.log(this)
            }
        }).close()
    }
}
new T0XX().init();
//請問打印出結果是什麼?

  一、且搁下此题目,我们先谈谈this的指向的以下几个情况;

  1.1.指向全局对象上;

    我们在一般的函数调用中的this是直接指向我们的全局对象的,比如:

function globalThis(){
    console.log(this.name);//今天天氣真冷哇
} 
var name = '今天天氣真冷哇'
globalThis();

setTimeout(function(){
    console.log(this.name2);
},1000);
var name2 = '過了一秒鐘,我就更冷了'

    这里的setTimeout里面的this是指向window对象的!

  1.2.指向上文对象

    通俗点就是,哪个对象看上了我,我就跟谁,比如:

function foo() {
    console.log(this.a);
}
var obj = {
    a: '李四',
    foo: foo
}
var a = '張三';
obj.foo(); //李四  看前面是哪个对象(obj),于是this跟obj一见钟情就好上了
var bar = obj.foo;
bar();//張三 你以为的以为。。 前面说过看对象,没对象,那就只能全局对象上茫茫人海只为寻她

  1.3.指向那个‘类’

    我们一般用构造函数进行调用时,会产生一个this始终是指向这个‘类’,我们复习下new 一个对象发生了什么: 

     1.创建一个全新的对象。

     2.这个对象会被执行[[Prototype]]连接。

     3.这个新对象会绑定到函数调用的this

     4.执行这个函数里的代码。

     5.如果函数没有返回其他对象,则自动返回这个新对象。

function fun() {
  this.a = 1;
  this.b = 2;
}
var instance = new fun();
console.log(instance.a);//1

  1.4.箭头函数this指向当前作用域

    箭头函数this指向取决于外层的函数作用域或全局作用域,而且箭头函数的绑定无法修改,即使是new绑定也不可以。

document.onclick = ()=>{
    console.log(this) //window
}
document.onclick=function(){
    console.log(this) //document
}

  二、如何改变this的绑定关系

    2.1.显式绑定

    在此之前,相信你已经用过很多次applycall、bind函数了,使用这三个函数可以直接为你要执行的函数指定this,所以这种方式称为显式绑定。

function foo () {
  console.log(this.a)
}
var obj = {
  a: 2
}
foo.call(obj) // 2

function foo (something) {
  console.log(this.a, something)
  return this.a + something
}
var obj = {
  a: 2
}
var bar = foo.bind(obj); // bind返回一个绑定到obj上的新函数
var b = bar(3)
console.log(b)
var a = "window's a"
foo('!')

  如上就可以通过这种显式的方法进行改变绑定关系了;

  三、回归到之前同事的题目上

  通过以上的分析,我们就能够很清楚的分析出以上的答案是指向this.attr这个对象的,别看题目里又有new字符又有return this;这些东西,很容易让人迷糊;但是如果我们能掌握住this的这几种指向情况,相信会易容反掌的多;

  四、如果改动以上的题目你还知道么?

class D0XX {
  constructor () {
    this.attr = {}
  }
  init (config) {
    this.assign(config)
    return this
  }
  assign (config) {
    this.afterClose = config.afterClose
  }
  close(){
      if(typeof this.afterClose === 'function'){
          this.afterClose()
      }
  }
}
class T0XX{
    init(){
        this.openPop()
    }
    openPop(){
        new D0XX().init({
            afterClose(){
                console.log(this)
            }
        }).close()
    }
}
new T0XX().init()
//請問打印出結果是什麼?

  最后,小Tip~就是之所以demo中可以使用链式调用是因为init方法中return出了this;这就跟jQuery中的链式调用有了异曲同工之妙;

  如有不妥,欢迎指教!

  

 

  

 

  

转载于:https://www.cnblogs.com/zdf-xue/p/10080739.html

网站文章

  • vue3 开启 https

    vue3 开启 https

    会在当前目录生成,cert.crt 和 cert.key 两个文件。会在当前目录生成,ca.crt 和 ca.key 两个文件。

    2024-01-30 22:23:29
  • 软件工程≠计算机科学 之 思考

    软件工程≠计算机科学首先,这篇文章的英文比上次阅读作业的英文好懂多了可能是因为上次的多是讲技术的,可以归类为科技英语吧,好多的词都不认识这次更偏向于议论文吧We need software that can be put together in a reasonable amount of time, for a reasonable cost, that works som...

    2024-01-30 22:23:21
  • 用电脑开热点启用电脑无线配置

    用电脑开热点启用电脑无线配置

    电脑系统打开热点,不用安装360也能用电脑给手机开热点,给多电脑开热点无线。

    2024-01-30 22:23:16
  • 【算法竞赛学习】数字中国创新大赛智慧海洋建设-Task3特征工程

    智慧海洋建设-Task3 特征工程此部分为智慧海洋建设竞赛的特征工程模块,通过特征工程,可以最大限度地从原始数据中提取特征以供算法和模型使用。通俗而言,就是通过X,创造新的X’以获得更好的训练、预测效...

    2024-01-30 22:22:46
  • 进阶面向对象

    进阶面向对象

    对象是具体的事物,拥有所属类中描述的一切属性和行为。类是一种模型,这种模型可以创建出不同的对象实体。一个类可以有很多对象,而一个对象必然属于某个类。类用于抽象的描述一类事物所特有的属性和行为。将日常生...

    2024-01-30 22:22:39
  • 沈阳师范大学大一上册C语言PTA题目集以及答案(第六章 指针 编程题篇)

    沈阳师范大学大一上册C语言PTA题目集以及答案(第六章 指针 编程题篇)7-1 输出学生成绩 (20分)本题要求编写程序,根据输入学生的成绩,统计并输出学生的平均成绩、最高成绩和最低成绩。建议使用动态...

    2024-01-30 22:22:32
  • 常用的CMD命令+Python

    cd .. 返回上一级目录 cd ../.. 返回上两级目录 cd或cd ~ 返回home目录 cd - 目录名 返回指定目录 输入“cd\”敲回车会直接退回到当前盘根目录 在CMD程序里输入“d:”...

    2024-01-30 22:22:23
  • 远程服务和web服务和前端,三方通过socket和websocket进行双向通信传输数据

    在计算机通信领域,socket 被翻译为“套接字”,它是计算机之间进行通信的一种约定或一种方式。通过 socket 这种约定,一台计算机可以接收其他计算机的数据,也可以向其他计算机发送数据。WebSocket是一种网络通信协议,是HTML5新增的特性,实现了基于浏览器的远程socket,使浏览器和服务器可以进行全双工通信。

    2024-01-30 22:21:55
  • RIPng配置(GNS3)

    RIPng配置(GNS3)

    1、拓扑图2、配置路由器(R3为例)给每个路由器配置RIP 1在每个路由器中对相应的接口配置相应的ipv6地址并将每个接口配置RIP 1 enable给R3的f0/0接口配置宣告默认路由给ISP配置静态路由3、测试网络连通性PC-1 ping PC-2 PC-4和外网PC-2 ping PC-1 P...

    2024-01-30 22:21:47
  • 多功能呀哩盒子iApp源码

    多功能呀哩盒子iApp源码

    多功能Iapp源码 – 上百种功能集成,简洁实用,适合游戏、动漫、漫画、小说等应用这款Iapp源码拥有上百种功能,包含游戏、动漫、漫画、小说等多种应用。其简洁实用的设计,使得它能够轻松地整合不同的功能...

    2024-01-30 22:21:39