于永雨的学习笔记
  • 学海无涯
  • 前端基础
    • HTML
      • 语义化标签
      • script标签中defer和async
      • 本地存储
      • 拖拽
      • Web Workers
      • WebSocket
    • CSS
      • 盒模型和box-sizing
      • BFC(块级格式化上下文)
      • 浮动和清除浮动
      • 伪类和伪元素
      • 2倍图、3倍图
      • flex
      • 水平居中、垂直居中
      • 经典布局
        • 两列布局
        • 三列布局
      • 经典实践
      • CSS样式隔离
      • Less vs Sass
    • JavaScript
      • ES
        • 数据类型
          • 1-string
          • 2-number
          • 3-boolean
          • 4-null
          • 5-undefined
          • 6-symbol
          • 7-object
          • 常见类型判断
          • 浅拷贝、深拷贝
        • 数据集合
          • Array
          • 类数组对象
          • Map、WeakMap
          • Set、WeakSet
          • 常见遍历方式
        • 变量
          • 修饰符
          • 变量提升
        • 函数
          • apply、call、bind
          • new
          • this
          • 箭头函数
          • 闭包
          • 防抖和节流
          • 柯里化
        • 原型
          • 原型链
        • 异步
          • 单线程&事件循环
          • 常见异步
          • Promise
            • all和allSettled
            • race和any
            • resolve和reject
        • 模块化
        • 版本特性一览表
      • DOM
        • DOM事件
        • 事件分类
      • BOM
    • TypeScript
    • 浏览器
      • 页面渲染
      • 重绘和回流
      • 跨域
      • 垃圾回收
      • 取消请求
    • Web API
      • EventSource
      • XMLHttpRequest
      • WebSocket
      • IntersectionObserver
  • 前端框架
    • Vue
      • 2.0
        • 列表渲染的key
        • 生命周期
        • diff算法
      • 3.0
        • 改变
        • provide/inject
        • 组件间可复用逻辑封装
        • diff算法
    • React
      • Component
      • Props
      • State
      • Context
      • Effect
      • Hooks
        • hook依赖列表
        • useMemo
        • useCallback
        • useEffect
      • API
        • memo
      • 子组件的无效渲染
      • 组件在开发模式下渲染两次
    • Vue-Router
    • Taro
    • Qiankun
  • 前端方案
    • 错误上报
    • 性能优化
    • 长列表优化原理
    • H5移动端适配
  • 工程化
    • 前端
      • 防止package-lock.json删除
      • 打包ESM和CommonJS
      • babel
      • webpack
      • pnpm
      • 多包管理
      • vite
      • 各种base
    • 服务端
      • Maven
  • 小程序
    • 小程序历史
    • 双线程架构
    • 生命周期
    • 更新机制
  • 服务端
    • Redis
    • Node.js
      • 核心
      • 进程守护
      • Koa
    • Java
      • 安装与配置
    • Restful API
  • DevOps
    • Nginx
    • Docker
      • 核心概念
      • 基础命令
    • K8s
    • Linux
      • shell及脚本
      • 文件目录操作
      • vi/vim
  • 计算机基础
    • 数据结构
      • 栈(Stack)
      • 队列(Queue)
      • 数组(Array)
      • 链表(Linked List)
      • 树(Tree)
      • 图(Graph)
      • 堆(Heap)
      • 散列表(Hash Table)
    • 算法
      • 查找
      • 排序
  • 计算机网络
    • 基础
    • TCP
      • 建立连接(三次握手)
      • 断开连接(四次挥手)
    • UDP
    • HTTP
      • HTTP/2
      • HTTPS
    • 常见网络攻击
      • XSS
      • CSRF
      • DDos
      • MITM
    • 浏览器缓存
  • 经典面试题
    • 箭头函数this-1
    • 箭头函数this-2
    • 数组转树
    • 控制并发数
    • 动态规划-二维数组全排列
    • 柯里化
Powered by GitBook
On this page
  • 一、为什么要有this
  • 二、this指向谁
  • 三、破解this的困局
  1. 前端基础
  2. JavaScript
  3. ES
  4. 函数

this

this详解

一、为什么要有this

原因1:不用每次都传上下文(context)

有this的情况:

function uppercaseName() {
    return this.name.toUpperCase();
}

function sayHi() {
    console.log(`Hello, I am ${uppercaseName.call(this)}, and ${this.age} years old.`);
}

let Tom = {
    name: 'tom',
    age: 8
};

let Jerry = {
    name: 'jerry',
    age: 9
};

sayHi.call(Tom);
sayHi.call(Jerry);

没有this的情况:

function uppercaseName(that) {
    return that.name.toUpperCase();
}

function sayHi(that) {
    console.log(`Hello, I am ${uppercaseName(that)}, and ${that.age} years old.`);
}

let Tom = {
    name: 'tom',
    age: 8
};

let Jerry = {
    name: 'jerry',
    age: 9
};

sayHi(Tom);
sayHi(Jerry);

原因2:没有this,class无法实现

class Person {
    constructor(name, age){
        this.name = name;
        this.age = age;
    }

    uppercaseName() {
        return this.name.toUpperCase();
    }

    sayHi() {
        console.log(`Hello, I am ${this.uppercaseName()}, and ${this.age} years old.`);
    }
}

如果没有this,没办法将属性挂载到实例上,属性函数内部也无法相互调用

二、this指向谁

this一般出现在函数中,this的指向取决于函数执行场景,一般分为4个场景:

1、默认:this -> 全局变量(非严格模式)/上下文

var name = 'Tom';

function sayName() {
    console.log(`Hi, I am ${this.name}!`);
}

//this隐式指向全局
sayName(); //严格模式指向undefined,非严格模式下正常

输出:

浏览器:

Hi, I am Tom!

node.js:

TypeError: Cannot read properties of undefined (reading 'name')

全局中this的指向:

  • 浏览器:this -> window

  • node.js:this -> undefined

2、隐式:this -> 调用对象

let Tom = {
  name: "Tom",
  sayName: function () {
    console.log(`Hi, I am ${this.name}!`);
  },
};

Tom.sayName();

function sayHi() {
  console.log(`Hi, I am ${this.name}!`);
}
let Jerry = {
  name: "Jerry",
  sayName: Tom.sayName,
  sayHi: sayHi,
};

Jerry.sayName(); //this隐式指向Jerry
Jerry.sayHi();

输出:

Hi, I am Tom!

Hi, I am Jerry!

Hi, I am Jerry!

3、显式:this -> 指定对象

let Tom = {
  name: "Tom",
  sayName: function () {
    console.log(`Hi, I am ${this.name}!`);
  },
  sayTitle(...titles) {
    this.sayName();
    console.log(`my title: ${[...titles].join("、")}`);
  },
};

Tom.sayName();
Tom.sayTitle("developer");

let Jerry = {
  name: "Jerry",
  sayName: function () {
    console.log(`Hi, I am ${this.name}!`);
  },
};
let Jack = {
  name: "Jack",
};

//this显式指向Jery
Tom.sayTitle.apply(Jerry, ["developer", "programmer", "engineer"]);
Tom.sayTitle.apply(Jack, ["developer", "programmer", "engineer"]);

输出:

Hi, I am Tom!

Hi, I am Tom!

my title: developer

Hi, I am Jerry!

my title: developer、programmer、engineer

TypeError: this.sayName is not a function

4、new:this -> 新对象

new实例化时经典4步中的第3步

function Person(name) {
    this.name = name;
    this.sayName = function () {
        console.log(`Hi, I am ${this.name}!`);
    }
}

//this显式指向Person的实例
let Tom = new Person('Tom');
Tom.sayName();

let Jerry = new Person('Jerry');
Jerry.sayName();

三、破解this的困局

函数的调用方式决定了 this 的值(运行时绑定),this 不能在执行期间被赋值,并且在每次函数被调用时 this 的值也可能会不同:

参考:

PreviousnewNext箭头函数

Last updated 1 year ago

ES5 引入了 方法来设置函数的 this 值,而不用考虑函数如何被调用的。

ES6 引入了,箭头函数不提供自身的 this 绑定(this 的值将保持为闭合词法上下文的值)。

bind
箭头函数
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this