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'
相关推荐
像风一样自由20207 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
Liudef069 小时前
2048小游戏实现
javascript·css·css3
独立开阀者_FwtCoder11 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句11 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom11 小时前
JavaScript reduce()函数详解
javascript
小飞悟11 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子11 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
蓝翔认证10级掘手12 小时前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript
前端康师傅12 小时前
JavaScript 中你不知道的按位运算
前端·javascript