web前端开发this指向问题

这篇具有很好参考价值的文章主要介绍了web前端开发this指向问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

❗ 函数内部中的 this 指向谁,不是在函数定义时决定的,而是在函数第一次调用并执行的时候决定的

1. call 方法

语法:函数名.call(调用者, 参数1, …)
作用:函数被借用时,会立即执行,并且函数体内的this会指向借用者或调用者

function fn(name, age) {
    this.name = name;
    this.age = age;
}
const obj = {}
// 经过call,this指向obj,obj开始有name、age属性
fn.call(obj, '李四', 100)
// 以下this均指向window,name:undefined,age:undefined
fn.call()
fn.call(null)
fn.call(undefined)
结果:普通函数的this指向window,利用call方法将this指向了obj

2. apply方法

语法:函数名.apply(调用者, [参数, …])
作用:函数被借用时,会立即执行,并且函数体内的this会指向借用者或调用者

function fn(name, age) {
    this.name = name;
    this.age = age;
}
const obj = {}
// 经过apply,this指向obj,obj开始有name、age属性
fn.apply(obj, ['李四', 100])
// 以下this均指向window,name:undefined,age:undefined
fn.apply()
fn.apply(null)
fn.apply(undefined)

结果:普通函数的this指向window,利用apply方法将this指向了obj

3. bind方法

语法:函数名.bind(调用者, 参数, …)
作用:函数被借用时,不会立即执行,而是返回一个新的函数。需要自己手动调用新的函数来改变this指向

function fn(name, age) {
    this.name = name;
    this.age = age;
}
const obj = {}
// const newFn = fn.bind(obj, '李四', 100)
// newFn()
fn.bind(obj, '李四', 100)()

结果:普通函数的this指向window,利用bind方法将this指向了obj

💤总结:
相同点: 三者都可以把一个函数应用到其他对象身上,注意不是自身对象
不同点:
○ call,apply是直接执行函数调用。bind是绑定,执行需要再次调用。
○ call,bind接收逗号分隔的无限个参数列表;apply接收数组作为参数。文章来源地址https://www.toymoban.com/news/detail-834115.html

到了这里,关于web前端开发this指向问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【面试必考点】这一次带你彻底学会this的指向问题

    相信很多朋友和我一样,总是搞不清this的指向关系,由于没有硬性要求,所以又总是不想学习,经过两次面试后,笔者发现这个考点真是 面试官常考的点 , 大家静下心来一起学习这篇this的指向吧! 文章主体内容分为两块:this的指向以及如何改变this的指向 全局的this指向

    2024年02月13日
    浏览(39)
  • React之组件的分类、使用,事件对象,this指向问题,修改状态以及受控组件与非受控组件

    组件是 React 开发(现代前端开发)中最重要的内容 组件允许你将 UI 拆分为独立、可复用的部分,每个部分都可以独立的思考 组合多个组件(组装乐高积木)实现完整的页面功能 特点:独立、可复用、可组合 组件包含三部分:HTML/CSS/JS 展示页面中的可复用部分 函数组件:使

    2024年02月16日
    浏览(43)
  • 2023年web前端开发之JavaScript进阶(一)

    接上篇博客进行学习,通俗易懂,详细 博客地址: 2023年web前端开发之JavaScript基础(五)基础完结_努力的小周同学的博客-CSDN博客 学习 作用域 、变量提升、 闭包 等语言特征,加深对 JavaScript 的理解,掌握变量赋值、函数声明的简洁语法, 降低代码的冗余度 。 理解作用域对程序

    2024年02月03日
    浏览(54)
  • 建站系列(五)--- 前端开发语言之HTML、CSS、JavaScript

    建站系列(一)— 网站基本常识 建站系列(二)— 域名、IP地址、URL、端口详解 建站系列(三)— 网络协议 建站系列(四)— Web服务器之Apache、Nginx 建站系列(五)— 前端开发语言之HTML、CSS、JavaScript 建站系列(六)— 后端开发语言 建站系列(七)— 常用前后端框架

    2024年02月09日
    浏览(52)
  • [HTML]Web前端开发技术26(HTML5、CSS3、JavaScript )JavaScript基础——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 数据类型 数据类型-字符型 数据类型-数值型 数据类型-布尔型 数据类型-其它类型 变量 转义字符 运算

    2024年02月20日
    浏览(65)
  • python_web1(前端开发之HTML、CSS、Bootstap、Javascript、JQuery)

    知识总结: Python_web前端开发 python 安装Flask web框架 pip install flask 简介:templates用来返回html的页面,而非文本。 创建文件index.html 结构如下 index.xml内容如下: web1.py内容如下: 重新运行后: 固定格式:h/div/span/a/img/ul/li/table/input/form 通用的字符编码 meta charset=“UTF-8” div:一个

    2024年04月14日
    浏览(66)
  • Web前端开发技术课程大作业——南京旅游景点介绍网页代码html+css+javascript

    家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套、浮动、margin、border、background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大学学习的前端知识点和布局方式都有运用,CSS的代码量也很足、很细致,使用hover来完成

    2024年02月08日
    浏览(61)
  • [HTML]Web前端开发技术9(HTML5、CSS3、JavaScript )——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 CSS颜色与背景 颜色color属性 背景background属性 1. 背景颜色background-color 2. 背景图像background-image 3. 背景

    2024年02月03日
    浏览(73)
  • [HTML]Web前端开发技术12(HTML5、CSS3、JavaScript )——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 网页标题:三列自适应宽度 网页标题:多行三列自适应宽度 一级水平导航菜单:采用“无序列表+超

    2024年01月16日
    浏览(73)
  • [HTML]Web前端开发技术13(HTML5、CSS3、JavaScript )横向二级导航菜单 Web页面设计实例——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 横向二级导航菜单 Web页面设计实例 总结 该练的还是要练,终究是自己的! 网页标题:二级下拉导航

    2024年01月17日
    浏览(70)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包