"this指南:掌握JavaScript中的上下文绑定"

this指向"死记硬背"定律

  1. 在函数体中,非显示或隐式地简单调用函数时,在严格模式下,函数内的this会被绑定到undefined上,在非严格模式下则会被绑定到全局对象window/global
  2. 一般使用new方法调用构造函数时,构造函数中的this会被绑定到新创建的对象上
  3. 显示的通过apply/call/bind绑定this指向指定的参数对象上
  4. 一般通过上下文对象调用函数时,函数内部的this绑定到该对象上
  5. 在箭头函数中,this指向外层this的指向位置

全局环境中的this

js 复制代码
function fn1() {
  console.log(this); // window
}
function fn2() {
  "use strict";
  console.log(this); // undefined
}

fn1();
fn2();

函数在浏览器全局环境中被简单调用,在严格模式下this指向为undefined。在非严格模式下this指向window对象

js 复制代码
const obj = {
  bar: 10,
  foo() {
    console.log(this);
  },
};
const fn = obj.foo;
fn(); //window

上述代码运行结果为window对象,因为最终foo函数被简单的在全局环境中被调用,所以this指向window

js 复制代码
const obj = {
  bar: 10,
  foo() {
    console.log(this);
  },
};
obj.foo(); // { bar: 10, foo: [Function: foo] }

在不考虑显示绑定的情况下:上述代码通过对象obj调用foo函数,所以函数内部的this指向obj对象,所以如果函数中的this是被上一级的对象调用的,则this指向的就是上一级对象。否则指向window对象

通过bind,apply,call,改变this指向

它们都是用来改变函数this指向,apply,call是直接进行相关函数的调用;bind不会指向相关函数,而是返回一个新的函数,这个函数的this 指向已经绑定,开发者可以手动调用。

js 复制代码
const obj = {
  bar: 10,
  foo() {
    console.log(this.bar);
  },
};
const obj1 = {
  bar: 20,
};
obj.foo.call(obj1); // 20

上述代码输出值20,通过call改变了foo函数的this指向

构造函数与this

js 复制代码
function Fn() {
  this.bar = 110;
}
const instance = new Fn();
console.log(instance.bar); // 110

上述代码输出值110,表明通过new操作符实例化构造函数,构造函数中的this指向为实例对象。

箭头函数中的this

箭头函数中的this,是由外层函数作用域或者全局作用域决定的。

js 复制代码
const obj = {
  bar: 10,
  foo() {
    setTimeout(function () {
      console.log(this.bar);
    });
  },
};
obj.foo(); // undefined

setTimeout函数传入一个匿名函数其this指向为window,作用上述代码打印undefined,如果希望setTimeout中的回调函数中this指向为obj则可以将匿名函数改为箭头函数,因为箭头函数中的this指向是根据其外层函数的this指向所决定。

js 复制代码
const obj = {
  bar: 10,
  foo() {
    setTimeout(() => {
      console.log(this.bar);
    });
  },
};
obj.foo(); // 10

this的优先级

显示绑定和隐式绑定的优先级

js 复制代码
const obj = {
  bar: 10,
  foo() {
    console.log(this.bar);
  },
};
const obj1 = {
  bar: 20,
};

obj.foo.call(obj1); // 20

上述代码输出为20,可以知道显示绑定优先级高于隐式绑定优先级

new操作符和显示绑定的优先级

js 复制代码
function fun(a) {
  this.a = a;
}
const obj3 = {};

const bar = fun.bind(obj3);
bar(100);
console.log(obj3.a); // 100

const baz = new bar(300);
console.log(baz.a); // 300
console.log(obj3); // { a: 100 }

上述代码可以看出,new 操作符在 fun.bind()之后绑定到obj3上之后,通过new bar()之后改变了barh函数的this指向。所以new操作符的优先级高于显示绑定优先级

注意:如果显示绑定的函数为箭头函数,箭头函数中的this不会被改变,按照其规则进行指向,这里我们将上例进行修改:

js 复制代码
fun = (a) => {
  this.a = a;
};
const obj3 = {};

const bar = fun.bind(obj3);
bar(100);
console.log(obj3.a); // undefined
console.log(window.a); // 100
相关推荐
zwjapple3 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20206 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem6 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊6 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术6 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing7 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止7 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall7 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴7 小时前
简单入门Python装饰器
前端·python
袁煦丞8 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作