【前端学习——js篇】 10.this指向

具体见:https://github.com/febobo/web-interview

10.this指向

根据不同的使用场合,this有不同的值,主要分为下面几种情况:

  • 默认绑定
  • 隐式绑定
  • new绑定
  • 显示绑定
①默认绑定

全局环境中定义person函数,内部使用this关键字

var name = 'Jenny';
function person() {return this.name;
}
console.log(person());  //Jenny

上述代码输出Jenny,原因是调用函数的对象在游览器中位window,因此this指向window,所以输出Jenny

注意:

严格模式下,不能将全局对象用于默认绑定,this会绑定到undefined,只有函数运行在非严格模式下,默认绑定才能绑定到全局对象

②隐式绑定

函数还可以作为某个对象的方法调用,这时this就指向这个上级对象。

//this 永远指向最后调用它的对象
var o = {a:10,b:{fn:function(){console.log(this.a); //undefined}}
}
o.b.fn();

因为this的上一级对象为b,而b内部并没有a变量的定义,所以输出undefind

③new绑定

通过构建函数new关键字生成一个实例对象,此时this指向这个实例对象

function test() {this.x = 1;
}var obj = new test();
obj.x // 1

上述代码之所以能过输出1,是因为new关键字改变了this的指向。

而当new的过程中遇到return一个对象时,此时this指向这个对象。

function fn()  
{  this.user = 'xxx';  return {user = '123'};  
}
var a = new fn();  
console.log(a.user); //123

而当return一个基本类型时,this还是指向它的实例。

function fn()  
{  this.user = 'xxx';  return 1;
}
var a = new fn;  
console.log(a.user); //xxx

null同理指向实例。

④显式修改

使用apply | call | bind改变函数的调用对象,第一个参数就是改变后调用这个函数的对象。

var x = 0;
function test() {console.log(this.x);
}var obj = {};
obj.x = 1;
obj.m = test;
obj.m.apply(obj) // 1

而三者的区别:

  • 三者都可以改变函数的this对象指向
  • 三者第一个参数都是this要指向的对象,如果如果没有这个参数或参数为undefinednull,则默认指向全局window
  • 三者都可以传参,但是apply是数组,而call是参数列表,且applycall是一次性传入参数,而bind可以分为多次传入。
  • bind 是返回绑定this之后的函数,apply call 则是立即执行 。
⑤箭头函数

箭头函数的this非常特殊,因为它在函数定义时就被确定了,而且不会被动态改变。

<body><div><button class="btn1">普通函数</button><button class="btn2">箭头函数</button></div>
</body>
const btn1 = document.querySelector('.btn1');
const btn2 = document.querySelector('.btn2');btn1Click = function () {console.log("btn1" + this); //button
}
btn2Click = () =>{console.log("btn2" + this); // window
}
btn1.addEventListener("click", btn1Click, false);
btn2.addEventListener("click", btn2Click, false);

可以看到默认函数的是由btn2调用的,所以指向btn2;而箭头函数在编译时就被绑定了,即btn2Click在创建时就定义了this,所以this指向window对象。

此外,箭头函数可以看作是匿名函数,是一次性的,所以与默认函数区别很明显。

  • 箭头函数没有构造函数,没有原型对象
  • 箭头函数没有arguments对象
  • 箭头函数的this在定义时就被确认了,不会动态更新
其他

隐式绑定 VS 显式绑定

function foo() {console.log( this.a );
}var obj1 = {a: 2,foo: foo
};var obj2 = {a: 3,foo: foo
};obj1.foo(); // 2
obj2.foo(); // 3obj1.foo.call( obj2 ); // 3
obj2.foo.call( obj1 ); // 2

显然,显示绑定的优先级更高

new绑定 VS 隐式绑定

function foo(something) {this.a = something;
}var obj1 = {foo: foo
};var obj2 = {};obj1.foo( 2 );
console.log( obj1.a ); // 2obj1.foo.call( obj2, 3 );
console.log( obj2.a ); // 3var bar = new obj1.foo( 4 );
console.log( obj1.a ); // 2
console.log( bar.a ); // 4

可以看到,new绑定的优先级>隐式绑定

new绑定 VS 显式绑定

因为newapply、call无法一起使用,但硬绑定也是显式绑定的一种,可以替换测试

function foo(something) {this.a = something;
}var obj1 = {};var bar = foo.bind( obj1 );
bar( 2 );
console.log( obj1.a ); // 2var baz = new bar( 3 );
console.log( obj1.a ); // 2
console.log( baz.a ); // 3

bar被绑定到obj1上,但是new bar(3) 并没有像我们预计的那样把obj1.a修改为3。但是,new修改了绑定调用bar()中的this

我们可认为new绑定优先级>显式绑定

综上,new绑定优先级 > 显示绑定优先级 > 隐式绑定优先级 > 默认绑定优先级

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FASTAPI系列 16-其他响应类型

FASTAPI系列 16-其他响应类型 文章目录 FASTAPI系列 16-其他响应类型前言一、HTMLResponse 响应 HTML二、纯文本响应三、另外的JSON 响应四、FileResponse文件五、StreamingResponse六、RedirectResponse 重定向请求总结更多内容&#xff0c;请关注公众号, 发送666 更可以得到免…

解决配置文件中文乱码

一、问题 二、解决方法

HTML5+CSS3小实例:文字边框视觉错位

实例:文字边框视觉错位 技术栈:HTML+CSS 效果: 源码: 【HTML】 <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scal…

StringRedisTemplate与RedisTemplate详解【序列化的方式不同】

spring 封装了 RedisTemplate 对象来进行对redis的各种操作&#xff0c;它支持所有的 redis 原生的 api。在RedisTemplate中提供了几个常用的接口方法的使用&#xff0c;分别是: private ValueOperations<K, V> valueOps; private HashOperations<K, V> hashOps; …

TLSR8258 MTU、DLE(PDU)

本文基于泰凌微TLSR8258 M1S1 demo。 1.DLE&#xff1a;LE Data Packet Length Extension 中文全称&#xff1a;低功耗蓝牙数据包长度扩展。 这是一个在2014年12月2日正式发布的bluetooth for BLE添加的新特性&#xff0c;以支持在LL Data PDU更长的数据&#xff0c;最大支持…

自己编译SQLite或将SQLite移植到新的操作系统(六)

返回&#xff1a;SQLite—系列文章目录 上一篇:SQLite中的动态内存分配&#xff08;五&#xff09; 下一篇&#xff1a;SQLite—系列文章目录 1.0 引言 对于大多数应用程序&#xff0c;推荐的构建方法 SQLite是使用合并代码 文件 sqlite3.c 及其相应的头文件 sqlite3.…

刚刚,百度和苹果宣布联名

百度 Apple 就在刚刚&#xff0c;财联社报道&#xff0c;百度将为苹果今年发布的 iPhone16、Mac 系统和 iOS18 提供 AI 功能。 苹果曾与阿里以及另外一家国产大模型公司进行过洽谈&#xff0c;最后确定由百度提供这项服务&#xff0c;苹果预计采取 API 接口的方式计费。 苹果将…

Jenkins用户角色权限管理

Jenkins作为一款强大的自动化构建与持续集成工具&#xff0c;用户角色权限管理是其功能体系中不可或缺的一环。有效的权限管理能确保项目的安全稳定&#xff0c;避免敏感信息泄露。 1、安装插件&#xff1a;Role-based Authorization Strategy 系统管理 > 插件管理 > 可…

Docker 哲学 - Dockerfile 指令

Dockerfile 的 entrypoint 和 cmd 书写方式一样吗&#xff0c;分别用一个node项目的 demo来举例 Dockerfile 的 entrypoint 、cmd 有什么区别&#xff0c;分别举例他们同时出现的场景和 单独出现的场景 entrypoint 和 cmd 命令&#xff1a; 同时出现&#xff1a; 1、cmd 作为 e…

【教程】iOS如何抓取HTTP和HTTPS数据包经验分享

&#x1f4f1; 在日常的App开发和研发调研中&#xff0c;对各类App进行深入的研究分析时&#xff0c;我们需要借助专业的抓包应用来协助工作。本文将介绍如何使用iOS手机抓包工具来获取HTTP和HTTPS数据包&#xff0c;并推荐一款实用的抓包应用——克魔助手&#xff0c;希望能够…

婴儿围嘴CPC认证,亚马逊CPSIA检测要求

婴幼儿围嘴 如果您在亚马逊商城发布商品&#xff0c;则必须遵守适用于这些商品和商品信息的所有联邦、州和地方法律以及亚马逊政策&#xff08;包括本政策&#xff09;。 质科检测&#xff0c;专业提供亚马逊合规检测服务&#xff08;详情联系质科李工&#xff09; 本政策适用…

快速上手Pytrch爬虫之爬取某应图片壁纸

一、前置知识 1 爬虫简介 网络爬虫&#xff08;又被称作网络蜘蛛、网络机器人&#xff0c;在某些社区中也经常被称为网页追逐者)可以按照指定的规则&#xff08;网络爬虫的算法&#xff09;自动浏览或抓取网络中的信息。 1.1 Web网页存在方式 表层网页指的是不需要提交表单&…

《数据结构学习笔记---第三篇》---单链表具体实现

目录 1.链表 1.1 链表的概念及结构 2.不带头单链表的实现 2.1创建头文件“SList.h” 2.2 创建具体接口实现文件SList.c 2.2.1打印 2.2.2申请链表结点 2.2.3创建一个长度为n的链表 2.2.4尾插尾删 2.2.5头插头删 2.2.6寻找x元素&#xff0c;返回pos 2.2.7插入和删除pos…

JS(三)JavaScript中的流程控制

JS&#xff08;三&#xff09;JavaScript中的流程控制 在JavaScript中&#xff0c;流程控制通常通过条件语句和循环语句来实现。常见的流程控制结构包括&#xff1a; 01 条件语句&#xff1a; if 语句&#xff1a;根据条件执行不同的代码块。if…else 语句&#xff1a;在条件…

量子专家联合开展欧洲之星项目“SupremeQ”以实现光量子计算优势

内容来源&#xff1a;量子前哨&#xff08;ID&#xff1a;Qforepost&#xff09; 编辑丨王珩 编译/排版丨浪味仙 沛贤 深度好文&#xff1a;1800字丨10分钟阅读 近日&#xff0c;英国全栈光量子计算系统公司 ORCA Computers、德国单光子探测器提供商 Pixel Photonics、丹麦量…

spring boot的返回值里面含有net.sf.json.JSONObject 报错net.sf.json.JSONNull[“empty“])]

一、过程 在对接第三的接口使&#xff0c;发现对方使用的json是net.sf.json.JSONObject。接口在返回值的时候就没有对其进行处理&#xff0c;直接返回了但是&#xff0c;后台也不报错&#xff0c;后端也没有收到响应值&#xff0c;只显示500的报错状态码。仔仔细细的看后台的日…

FastAPI+React全栈开发10 MongoDB聚合查询

Chapter02 Setting Up the Document Store with MongoDB 10 Aggregation framework FastAPIReact全栈开发10 MongoDB聚合查询 In the following pages, we will try to provide a brief introducton to the MongoDB aggregation framework, what it is, what benefits it of…

餐饮服务升级:微信小程序扫码点餐制作

餐饮体验的升级不仅体现在食物的质量和环境的营造上&#xff0c;更在于服务的便捷性和智能化。扫码点餐小程序正是这一理念的体现&#xff0c;它通过简化点餐流程&#xff0c;为顾客和商家带来了双赢的局面。那么商家微信小程序扫码点餐制作的流程是怎么样呢&#xff1f;怎么快…

二叉树的遍历及线索二叉树试题解析

一、单项选择题 01.在下列关于二叉树遍历的说法中&#xff0c;正确的是( C ). A.若有一个结点是二叉树中某个子树的中序遍历结果序列的最后一个结点&#xff0c;则它一定是该子树的前序遍历结果序列的最后一个结点 B.若有一个结点是二叉树中某个子树的前序遍历结果序列的最后一…

安卓国内ip代理app,畅游网络

随着移动互联网的普及和快速发展&#xff0c;安卓手机已经成为我们日常生活和工作中不可或缺的一部分。然而&#xff0c;由于地理位置、网络限制或其他因素&#xff0c;我们有时需要改变或隐藏自己的IP地址。这时&#xff0c;安卓国内IP代理App便成为了一个重要的工具。虎观代理…