详解JavaScript中this指向

news2024/9/27 7:18:47

this 原理

this 是一个指针型变量，它指向当前函数的运行环境。

1.内存的数据结构

var obj = { foo: 5 };

img

img

2.函数

var obj = { foo: function () {} };

引擎会将函数单独保存在内存中，然后再将函数的地址赋值给foo属性的value属性。

img

由于函数是一个单独的值，所以它可以在不同的环境（上下文）执行。

var f = function () {};
var obj = { f: f };

// 单独执行
f();

// obj 环境执行
obj.f();

3.环境变量

var f = function () {
  console.log(x);
};

函数体里面使用了变量x。该变量由运行环境提供。

上面代码，函数体内的this.x就是当前运行环境的 x

var f = function () {
  console.log(this.x);
};

var x = 1;
var obj = {
  f: f,
  x: 2,
};

// 单独执行
f();

// obj 环境执行
obj.f();

上面代码中，函数f在全局环境执行，this.x指向全局环境的x。

img

在obj环境执行，this.x指向obj.x。

img

this 的指向问题

在不同的场景中调用同一个函数，this 的指向也可能会发生变化，但是它永远指向其所在函数的真实调用者（谁调用就指向谁）；如果没有调用者，this 就指向全局对象 window。

全局上下文

非严格模式和严格模式中 this 都是指向顶层对象（浏览器中是window）

this === window;
console.log(this === window);
("use strict");
this === window;
console.log(this === window);
this.name = "若川";
console.log(this.name);

函数上下文

1.普通函数调用模式

​ 非严格模式下，默认绑定的 this 指向window。

​ 严格模式下，默认绑定的 this 指向undefined。

// 非严格模式
var name = "window";
var doSth = function () {
  console.log(this.name);
};
doSth(); // 'window'

// 非严格模式
let name2 = "window2";
let doSth2 = function () {
  console.log(this === window);
  console.log(this.name2);
};
doSth2(); // true, undefined

​ let没有给顶层对象中（浏览器是 window）添加属性，window.name2和window.doSth2都是undefined。

// 严格模式
"use strict";
var name = "window";
var doSth = function () {
  console.log(typeof this === "undefined");
  console.log(this.name);
};
doSth(); // true，// 报错，因为this是undefined

回调函数，其实也是普通函数调用模式。

　　var name = "The Window";

　　var object = {
　　　　name : "My Object",

　　　　getNameFunc : function(){
             console.log(this, "ssss"); //这个this是object
　　　　　　return function(){
　　　　　　　　return this.name;
　　　　　　};

　　　　}

　　};

　　alert(object.getNameFunc()());
//相当于
var f = object.getNameFunc()//返回一个匿名函数
f();//此时调用者是window，所以this会指向window
解决：
getNameFunc : function(){
    var that = this;
    return function(){
        return that.name;     //更改匿名函数中的this
    };
}

匿名函数的执行环境具有全局性，所以匿名函数 this 指向 window

2.箭头函数调用模式

先看箭头函数和普通函数的重要区别：

1、没有自己的this、super、arguments和new.target绑定。

​ 也就是说无法通过call、apply、bind绑定箭头函数的this

2、不能使用new来调用。 3、没有原型对象。 4、不可以改变this的绑定。 5、形参名称不能重复。

var name = "window";
var student = {
  name: "若川",
  doSth: function () {
    onsole.log(this, "ssss");
    var arrowDoSth = () => {
      console.log(this.name);
    };
    arrowDoSth();
  },
  arrowDoSth2: () => {
    console.log(this.name);
  },
};
student.doSth(); // '若川'
student.arrowDoSth2(); // 'window'

箭头函数外的 this 是缓存的该箭头函数上层的普通函数的 this。如果没有普通函数，则是全局对象（浏览器中则是 window）。

因此我们可以修改外层函数 this 指向达到间接修改箭头函数 this 的目的。

function fn() {
  return () => {
    console.log(this.name);
  };
}
let obj1 = {
  name: "听风是风",
};
let obj2 = {
  name: "时间跳跃",
};
fn.call(obj1)(); // fn this指向obj1,箭头函数this也指向obj1
fn.call(obj2)(); //fn this 指向obj2,箭头函数this也指向obj2

3.构造函数调用模式

new 操作符调用时，this指向生成的新对象。

function Student(name) {
  this.name = name;
  console.log(this);
}
var result = new Student("若川");

4.call，apply 和 bind 调用模式

​ 通过 call、apply 以及 bind 方法改变 this 的指向，也称为显式绑定

let obj1 = {
  name: "听风是风",
};
let obj2 = {
  name: "时间跳跃",
};
let obj3 = {
  name: "echo",
};
var name = "行星飞行";

function fn() {
  console.log(this.name);
}
fn(); //行星飞行
fn.call(obj1); //听风是风
fn.apply(obj2); //时间跳跃
fn.bind(obj3)(); //echo

​ 指向参数提供的是 null 或者 undefined，那么 this 将指向全局对象。

let obj1 = {
  name: "听风是风",
};
let obj2 = {
  name: "时间跳跃",
};
var name = "行星飞行";

function fn() {
  console.log(this.name);
}
fn.call(undefined); //行星飞行
fn.apply(null); //行星飞行
fn.bind(undefined)(); //行星飞行

call、apply 与 bind 有什么区别？

1.call、apply 与 bind 都用于改变 this 绑定，但 call、apply 在改变 this 指向的同时还会执行函数，而 bind 在改变 this 后是返回一个全新的绑定函数，这也是为什么上方例子中 bind 后还加了一对括号 ()的原因。

2.bind属于硬绑定，返回的 this 指向无法再次通过 bind、apply 或 call 修改；call 与 apply 的绑定只适用当前调用，调用完就没了，下次要用还得再次绑。

3.call与 apply 功能完全相同，唯一不同的是 call 方法传递函数调用形参是以散列形式，而 apply 方法的形参是一个数组。在传参的情况下，call 的性能要高于 apply，因为 apply 在执行时还要多一步解析数组。

描述二：

let obj1 = {
  name: "听风是风",
};
let obj2 = {
  name: "时间跳跃",
};
var name = "行星飞行";

function fn() {
  console.log(this.name);
}
fn.call(obj1); //听风是风
fn(); //行星飞行
fn.apply(obj2); //时间跳跃
fn(); //行星飞行
let boundFn = fn.bind(obj1); //听风是风
boundFn.call(obj2); //听风是风
boundFn.apply(obj2); //听风是风
boundFn.bind(obj2)(); //听风是风

描述三：

let obj = {
  name: "听风是风",
};

function fn(age, describe) {
  console.log(`我是${this.name},我的年龄是${age}，我非常${describe}!`);
}
fn.call(obj, "26", "帅"); //我是听风是风,我的年龄是26，我非常帅
fn.apply(obj, ["26", "帅"]); //我是听风是风,我的年龄是26，我非常帅

5.对象中的函数（方法）调用模式

​ 如果函数调用时，前面存在调用它的对象，那么 this 就会隐式绑定到这个对象上

如果函数调用前存在多个对象，this 指向距离调用自己最近的对象

function fn() {
  console.log(this.name);
}
let obj = {
  name: "行星飞行",
  func: fn,
};
let obj1 = {
  name: "听风是风",
  o: obj,
};
obj1.o.func(); //行星飞行

​ 隐式丢失

​ 最常见的就是作为参数传递以及变量赋值

// 参数传递
var name = "行星飞行";
let obj = {
  name: "听风是风",
  fn: function () {
    console.log(this.name);
  },
};

function fn1(param) {
  param();
}
fn1(obj.fn); //行星飞行

// 变量赋值
var name = "行星飞行";
let obj = {
  name: "听风是风",
  fn: function () {
    console.log(this.name);
  },
};
let fn1 = obj.fn;
fn1(); //行星飞行

6.原型链中的调用模式

是指向生成的新对象。 如果该对象继承自其它对象。同样会通过原型链查找。

function Student(name) {
  this.name = name;
}
var s1 = new Student("若川");
Student.prototype.doSth = function () {
  console.log(this.name);
};
s1.doSth();

生成的新对象是 Student:{name: ‘若川’}

7.DOM事件处理函数调用

addEventerListener、attachEvent、onclick指向绑定事件的元素

<button class="button">onclick</button>
<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var button = document.querySelector('button');
    button.onclick = function(ev){
        console.log(this);
        console.log(this === ev.currentTarget); // true
    }
    var list = document.querySelector('.list');
    list.addEventListener('click', function(ev){
        console.log(this === list); // true
        console.log(this === ev.currentTarget); // true   //当前绑定事件的元素
        console.log(this);
        console.log(ev.target);       //当前触发事件的元素
    }, false);
</script>

一些浏览器，比如IE6~IE8下使用attachEvent，this指向是window。

8.内涵事件处理函数调用

<button
  class="btn1"
  onclick="console.log(this === document.querySelector('.btn1'))"
>
  点我呀
</button>
<button onclick="console.log((function(){return this})());">再点我呀</button>

9.立即执行函数，谁调用 this 就是谁，因为是普通函数，是由 window 调用的

var myObject = {
  foo: "bar",
  func: function () {
    var self = this;
    console.log(this.foo); //bar
    console.log(self.foo); //bar
    (function () {
      console.log(this.foo); //undefined
      console.log(self.foo); //bar
    })();
  },
};
// 第二个
window.number = 2;
var obj = {
  number: 3,
  db1: (function () {
    console.log(this);
    this.number *= 4;
    return function () {
      console.log(this);
      this.number *= 5;
    };
  })(),
};
var db1 = obj.db1;
db1(); //自执行函数里的回调函数由window调用
obj.db1(); //自执行函数里的回调函数由obj调用
console.log(obj.number); // 15
console.log(window.number); // 40

myObject.func();

this 绑定优先级：

​ 显式绑定 > 隐式绑定 > 默认绑定

​ new 绑定 > 隐式绑定 > 默认绑定

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1538965.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

目标检测——PP-YOLO算法解读

目标检测——PP-YOLO算法解读

PP-YOLO系列&#xff0c;均是基于百度自研PaddlePaddle深度学习框架发布的算法&#xff0c;2020年基于YOLOv3改进发布PP-YOLO&#xff0c;2021年发布PP-YOLOv2和移动端检测算法PP-PicoDet&#xff0c;2022年发布PP-YOLOE和PP-YOLOE-R。由于均是一个系列&#xff0c;所以放一起解…
阅读更多...
聚酰亚胺PI材料难于粘接，用什么胶水粘接？那么让我们先一步步的从认识它开始（七）: 聚酰亚胺PI薄膜的厚度

聚酰亚胺PI材料难于粘接，用什么胶水粘接？那么让我们先一步步的从认识它开始（七）: 聚酰亚胺PI薄膜的厚度

聚酰亚胺PI薄膜的厚度 聚酰亚胺&#xff08;PI&#xff09;薄膜的厚度可以根据具体的应用需求而有所不同&#xff0c;通常可以在几个微米&#xff08;μm&#xff09;到几十微米之间。下面是一些常见的聚酰亚胺PI薄膜的厚度范围及其应用&#xff1a; 1.超薄膜&#xff1a; 聚酰…
阅读更多...
记录‘No module named ‘notebook.notebookapp‘’导致jupyter打不开的解决方法

记录‘No module named ‘notebook.notebookapp‘’导致jupyter打不开的解决方法

最初是因为无法重命名文件的问题&#xff0c;更新了notebook&#xff0c;但是更新之后打不开了 在终端输入 jupyter notebook 报错 File "/Users/maclin/Library/Python/3.8/bin/jupyter-notebook", line 5, in <module> from notebook.notebookapp import ma…
阅读更多...
#Linux（SSH软件安装及简单使用）

#Linux（SSH软件安装及简单使用）

&#xff08;一&#xff09;发行版&#xff1a;Ubuntu16.04.7 &#xff08;二&#xff09;记录&#xff1a; &#xff08;1&#xff09;终端键入&#xff08;root权限&#xff09;安装 apt-get install openssh-server 安装时遇到报错 E: Could not get lock /var/lib/dpkg/…
阅读更多...
网络编程套接字——实现简单的TCP网络程序

网络编程套接字——实现简单的TCP网络程序

目录 1、TCP socket API详解 socket()&#xff1a; bind()&#xff1a; listen(): accept(): connect(): 2、简易的TCP网络程序 TcpServer.hpp TcpClient.cc Main.cc Log.hpp ThreadPool.hpp Task.hpp Init.hpp Daemon.hpp dict.txt Makefile 1、TCP socket A…
阅读更多...
基于springboot+vue+Mysql的“智慧食堂”设计与实现

基于springboot+vue+Mysql的“智慧食堂”设计与实现

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…
阅读更多...
FCN(全卷积神经网络)

FCN(全卷积神经网络)

目录 一、什么是FCN 1、FCN简介 2、核心思想 二、代码实现 1、FCN结构介绍 2、ResNet-18提取图像特征 3、11卷积层将通道数变换为类别个数 4、转置卷积还原输入图像的高和宽 5、初始化转置卷积层 6、读取数据集 7、训练 8、预测 三、总结 一、什么是FCN 1、FCN简介…
阅读更多...
【XR806开发板试用】使用PWM模块模拟手机呼吸灯提示功能

【XR806开发板试用】使用PWM模块模拟手机呼吸灯提示功能

一般情况下&#xff0c;我们的手机在息屏状态&#xff0c;当收到消息处于未读状态时&#xff0c;会有呼吸灯提醒&#xff0c;这次有幸抽中XR806开发板的试用&#xff0c;经过九牛二虎之力终于将环境搞好了&#xff0c;中间遇到各种问题&#xff0c;在我的另一篇文章中已详细描述…
阅读更多...
面试算法-83-不同路径 II

面试算法-83-不同路径 II

题目 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish”&#xff09;。 现在考虑网格中有障碍物。那么从左上角到…
阅读更多...
手机投屏到电脑

手机投屏到电脑

手机投屏到电脑 Github 有2个开源的手机投屏项目&#xff1a; Scrcpy: https://github.com/Genymobile/scrcpy QtScrcpy: https://github.com/barry-ran/QtScrcpy 这2个项目都很好用&#xff0c;我这里用的是 Scrcpy&#xff1a; 官方文档中介绍了如何在windows上使用 Scrcpy…
阅读更多...
mac 安装 nvm 【真解决问题】

mac 安装 nvm 【真解决问题】

前提 没有node环境已有git 下载 我用的gitee极速下载 git clone https://gitee.com/mirrors/nvm.git ~/.nvm && cd ~/.nvm && git checkout git describe --abbrev0 --tags配置 1. 配置变量 在用户的目录下新增文件 .zshrc export NVM_DIR"$HOME/…
阅读更多...
java网络原理（二）------TCP确认应答和超时重传

java网络原理（二）------TCP确认应答和超时重传

一Tcp协议 TCP&#xff0c;即Transmission Control Protocol&#xff0c;传输控制协议。人如其名&#xff0c;要对数据的传输进行一个详细的控制。 二.TCP协议段格式 知道了端口号才能进一步确认这个数据报交给了哪一个程序。16为端口号是2字节&#xff0c;范围是0到65535.如…
阅读更多...
CMake笔记之将任意官方库作为third_party完整地包含在工程项目中使用的通用模板

CMake笔记之将任意官方库作为third_party完整地包含在工程项目中使用的通用模板

CMake笔记之将任意官方库作为third_party完整地包含在工程项目中使用的通用模板 —— 杭州 2024-03-20 凌晨1:06 code review! 文章目录 CMake笔记之将任意官方库作为third_party完整地包含在工程项目中使用的通用模板1.通用CMakeLists.txt模板2.GPT4给出的改进建议3.git clon…
阅读更多...
【爬虫】实战-爬取Boss直聘信息数据

【爬虫】实战-爬取Boss直聘信息数据

专栏文章索引&#xff1a;爬虫 所用工具&#xff1a; 自动化工具&#xff1a;DrissionPage 目录 一、找到目标数据(2个确定)​ 1.确定目标网页 2.确定目标网址 二、编写代码​ 三、查看数据​ 五、总结 一、找到目标数据(2个确定) 1.确定目标网页 打开目标网站 网站&am…
阅读更多...
夜神-安卓9模拟器安装 面具(Magisk)

夜神-安卓9模拟器安装 面具(Magisk)

方法1-自带本地安装 1.模拟器助手添加安卓9 的模拟器 2.启动模拟器并安装Magisk Terminal Emulator.apk、Magisk.apk 新开的安卓9 安装这两个apk 3.打开Magisk Terminal Emulator 1、允许 2、输入m回车 3、输入y回车 4、超级用户授权允许1、 2和3 4 允许后跳到这个…
阅读更多...
xAI开发的一款巨大型语言模型（HLM）--Grok 1

xAI开发的一款巨大型语言模型（HLM）--Grok 1

在xAI发布Grok的权重和架构之后&#xff0c;很明显大型语言模型&#xff08;LLM&#xff09;的时代已经过去&#xff0c;现在是巨大型语言模型&#xff08;HLM&#xff09;的时代。这个混合专家模型发布了3140亿个参数&#xff0c;并且在Apache 2.0许可下发布。这个模型没有针对…
阅读更多...
Jenkins中支持maven构建遇到仓库报错问题

Jenkins中支持maven构建遇到仓库报错问题

目的 Jenkins中支持maven构建(Jenkins使用docker安装&#xff09; 问题 1.构建一个maven项目 2.执行报错 /var/lib/jenkins/local_maven_repo/com/sx/root/1.0.4/root-1.0.4.pom.part.lock (No such file or directory) Failed to transfer Could not transfer artifact co…
阅读更多...
【Spring整合QQ个人邮箱】

【Spring整合QQ个人邮箱】

整合腾讯邮箱&#xff0c;首先需要在腾讯邮箱上开启服务&#xff0c;获取到授权码&#xff1b; 获取步骤如下&#xff1a; 进入设置 进入账号页 开启协议获取授权码 JavaMailSender配置 引入依赖 <!--邮件发送依赖--> <dependency><groupId>org.spring…
阅读更多...
EI Scopus双检索| 2024年智能交通与未来出行国际会议(CSTFM 2024)

EI Scopus双检索| 2024年智能交通与未来出行国际会议(CSTFM 2024)

会议简介 Brief Introduction 2024年智能交通与未来出行国际会议(CSTFM 2024) 会议时间&#xff1a;2024年10月18日-20日 召开地点&#xff1a;中国杭州 大会官网&#xff1a;CSTFM 2024-2024 International Conference on Smart Transportation and Future Mobility(CSTFM 202…
阅读更多...
学习笔记Day13：Linux进阶

学习笔记Day13：Linux进阶

Linux进阶 Vim——Linux自带的文本编辑器 功能强大 命令模式 使用 vim <file>进入后的默认模式可以上下左右移动光标 方向键/hjkl快速到所在行的开头^/末尾$向下移动30行30j&#xff08;上左右同&#xff09;上下翻页Ctrlf向上&#xff0c;Ctrlb向下翻页快速回到文件第…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023