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'
相关推荐
伍哥的传说3 小时前
Radash.js 现代化JavaScript实用工具库详解 – 轻量级Lodash替代方案
开发语言·javascript·ecmascript·tree-shaking·radash.js·debounce·throttle
前端程序媛-Tian4 小时前
【dropdown组件填坑指南】—怎么实现下拉框的位置计算
前端·javascript·vue
iamlujingtao4 小时前
js多边形算法:获取多边形中心点,且必定在多边形内部
javascript·算法
嘉琪0014 小时前
实现视频实时马赛克
linux·前端·javascript
爱分享的程序员5 小时前
前端面试专栏-前沿技术:30.跨端开发技术(React Native、Flutter)
前端·javascript·面试
超级土豆粉5 小时前
Taro 位置相关 API 介绍
前端·javascript·react.js·taro
草履虫建模5 小时前
RuoYi-Vue 项目 Docker 容器化部署 + DockerHub 上传全流程
java·前端·javascript·vue.js·spring boot·docker·dockerhub
阿丽塔~7 小时前
【vue3+vue-pdf-embed】实现PDF+图片预览
javascript·vue.js·pdf
zhuà!8 小时前
taro+react重新给userInfo赋值后,获取的用户信息还是老用户信息
javascript·react.js·taro
超浪的晨8 小时前
JavaWeb 入门:JavaScript 基础与实战详解(Java 开发者视角)
java·开发语言·前端·javascript·后端·学习·个人开发