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'
相关推荐
汪子熙10 分钟前
深入探析 header facets:定位与应用
前端·javascript
江城开朗的豌豆15 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
2401_8812444026 分钟前
javaweb———html
前端·javascript·html
江城开朗的豌豆26 分钟前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js
前端小巷子30 分钟前
Web开发中的文件下载
前端·javascript·面试
KaneLogger1 小时前
视频转文字,别再反复拖进度条了
前端·javascript·人工智能
前端风云志1 小时前
JavaScript中如何遍历对象?
javascript
像风一样自由20209 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
浪裡遊10 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
Liudef0612 小时前
2048小游戏实现
javascript·css·css3