JavaScript核心概念输出——this指向

this指向在js中的意义

在js中,this是为函数服务的。 每个函数都有其自己的this指向,如果将this指向绑定方式的话,可以分为以下这几种类型:

  1. 显式绑定
  2. 隐式绑定
  3. 默认绑定
  4. new关键字绑定
  5. 箭头函数绑定

接下来让我们一一细分这些绑定规则

显式绑定

显式绑定即通过调用函数原型链上的bind、call、apply这三种方法中的其中一种方法,将一个函数与一个调用者(即这个函数的this指向)进行显式绑定,示例如下:

js 复制代码
function xianshi(){
    console.log(this.name);
}
const caller = {
    name:'yx'
}
xianshi.call(caller); // expect output: 'yx'

隐式绑定

隐式绑定就是咱们常说的谁调用函数,this就指向谁,具体例子如下:

js 复制代码
const caller = {
    name: 'yx',
    sayName(){
        console.log(this.name);
    }
}

caller.sayName(); //expect output: 'yx'

默认绑定

当一个函数直接调用时,他的this指向全局对象,在浏览器和Nodejs环境中不相同,示例如下:

js 复制代码
function sayName(){
    console.log(this);
}

sayName(); //expect output: window || {}

new关键字绑定

当我们使用构造函数创建实例对象的时候会进行内部的绑定操作:,示例如下:

js 复制代码
class MyClass {
    constructor(){
        console.log(this);
    }
}
const inter = new MyClass() // expect output: MyClass{}

new MyClass的时候实际上是做了以下操作:

  1. Object.create一个新的对象
  2. 将新对象的__proto__指向MyClass的prototype
  3. 执行构造函数将this指向新对象
  4. 返回新对象

箭头函数this绑定

箭头函数默认寻找最近外层非箭头函数的this将其视作自身this指向

js 复制代码
function foo(){
    const arrowFoo = ()=>{
        console.log(this.name)
    }
    arrowFoo();
}

const obj = {
    name: 'yx'
}

foo.call(obj) // excepet output: 'yx'
相关推荐
货拉拉技术12 分钟前
微前端中的错误堆栈问题探究
前端·javascript·vue.js
掘金0128 分钟前
Axios 请求去重机制解析:从原理到实践
javascript·前端框架
烛阴1 小时前
TypeScript 进阶必修课:解锁强大的内置工具类型(二)
前端·javascript·typescript
Ares-Wang1 小时前
Javascript》》JS》》ES6》 Map、Set、WeakSet、WeakMap
开发语言·javascript·es6
gnip1 小时前
接入高德地图
前端·javascript
十一.3661 小时前
171-178CSS3新增
前端·javascript·css3
gnip2 小时前
深度封装tree公共组件
前端·javascript·vue.js
Ares-Wang2 小时前
JavaScript》》JS》》ES6》》 foreach 、for in 、for of
前端·javascript·es6
Jacob02342 小时前
为什么现代 JavaScript 开发者正在远离回调与框架?
前端·javascript·前端框架
yanlele3 小时前
前端面试第 77 期 - 2025.09.02 更新前端面试问题总结(15 道题)
前端·javascript·面试