JavaScript this对象

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

this关键字时是函数运行时自动生成的一个内部对象,只能在函数内部使用,总指向调用它的对象

绑定规则

默认绑定

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

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

上述调用函数的对象在浏览器中为window,所以this指向window,输出Jenny

隐式绑定

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

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

一个函数中包含多个对象,尽管函数是被最外层的对象调用,this指向的也只是上一级的对象

var o = {
    a:10,
    b:{
        fn:function(){
            console.log(this.a); //undefined
        }
    }
}
o.b.fn();

上述代码中this指向的仍旧是b,b作用域内没有a的定义,所以打印undefined

记住,this指向的是最后调用它的对象

new绑定

通过构造函数new关键字生成一个实例对象,this指向该实例对象

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

不过也有特殊情况

当构造函数返回一个简单类型,this仍指向实例对象

但当构造函数返回一个对象时,this指向会改变成返回的对象,如下:

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

手写一个new关键字

function mynew(Func, ...args) {
    // 1.创建一个新对象
    const obj = {}
    // 2.新对象原型指向构造函数原型对象
    obj.__proto__ = Func.prototype
    // 3.将构建函数的this指向新对象
    let result = Func.apply(obj, args)
    // 4.根据返回值判断
    return result instanceof Object ? result : obj
}

显示修改

apply()、call()、bind()是函数的方法,作用时改变函数的调用对象,之前已经讲过,apply,call都是临时一次改变,而bind则是返回一个新的函数,指向为传进来的参数。

具体见下方文章链接:

箭头函数

箭头函数在定义时就已经确定了this的指向,且不能通过显示修改的方式改变其this指向

const button = document.getElementById('mngb');
button.addEventListener('click', ()=> {
    console.log(this === window) // true
    this.innerHTML = 'clicked button'
})

如上,该箭头函数被定义时处于全局作用域中,所以this指向window

最后说一下绑定优先级,

new绑定优先级 > 显示绑定优先级 > 隐式绑定优先级 > 默认绑定优先级文章来源地址https://www.toymoban.com/news/detail-838646.html

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

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

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

相关文章

  • 【前端|Javascript第5篇】全网最详细的JS的内置对象文章!

    前言 在当今数字时代,前端技术正日益成为塑造用户体验的关键。我们在开发中需要用到很多js的内置对象的一些属性来帮助我们更快速的进行开发。或许你是刚踏入前端领域的小白,或者是希望深入了解内置对象的开发者,不论你的经验如何,本篇博客都将给你详细的讲解

    2024年02月12日
    浏览(54)
  • 【JavaScript】3.4 JavaScript在现代前端开发中的应用

    JavaScript 是现代前端开发的核心。无论是交互效果,还是复杂的前端应用,JavaScript 都发挥着关键作用。在本章节中,我们将探讨 JavaScript 在现代前端开发中的应用,包括如何使用 JavaScript 来处理用户交互、动态内容、前端路由、API 请求等。 JavaScript 是处理用户交互的主要工

    2024年02月04日
    浏览(57)
  • 掌握 JavaScript:从初学者到高级开发者的完整指南之JavaScript对象(二)

    可以大体分页3大类: 第一类:基本对象,我们主要学习Array和JSON和String 第二类:BOM对象,主要是和浏览器相关的几个对象 第三类:DOM对象,JavaScript中将html的每一个标签都封装成一个对象 1.1.1 基本对象 1.1.1.1 Array对象 语法格式 Array对象时用来定义数组的。常用语法格式有如下

    2024年02月07日
    浏览(59)
  • 前端开发——Javascript知识(介绍)

    目录 有关JavaScript的知识  JavaScript的优点   JavaScript的领域 JavaScript的组成 JavaScript的特点 第一个JavaScript程序 在 HTML 文档中嵌入 JavaScript 代码 在脚本文件中编写 JavaScript 代码 JavaScript内容  Html内容  JavaScript 代码执行顺序 JavaScript中的几个重要概念 标识符 保留字 区分

    2024年02月01日
    浏览(46)
  • 前端开发——JavaScript的条件语句

      世界不仅有黑,又或者白 世界而是一道精致的灰  ——Lungcen     目录 条件判断语句 if 语句 if else 语句 if else if else 语句  switch语句 break case 子句 default语句 while循环语句 do while循环语句 for循环语句 for 循环中的三个表达式 for 循环嵌套 for 循环变体——for in for 循环

    2023年04月21日
    浏览(42)
  • 快速认识,前端必学编程语言:JavaScript

    JavaScript是构建Web应用必学的一门编程语言,也是最受开发者欢迎的热门语言之一。所以,如果您还不知道JavaScript的用处、特点的话,赶紧补充一下这块基础知识。 JavaScript 是一种高级、单线程、垃圾收集、解释或即时编译、基于原型、多范式、动态语言,具有非阻塞事件循

    2024年02月05日
    浏览(49)
  • 【前端灵魂脚本语言JavaScript⑤】——JS中数组的使用

    🐚 作者: 阿伟 💂 个人主页: Flyme awei 🐋 希望大家多多支持😘一起进步呀! 💬 文章对你有帮助👉关注✨点赞👍收藏📂 第一种: var 数组名 = new Array(); 创建一个空数组 第二种: var arr2 = new Array(10); 创建一个定长为10的数组 第三种 var arr3 = new Array(a,b,c); 创建时直接指定元素值

    2023年04月08日
    浏览(59)
  • 30个前端开发中常用的JavaScript函数

    🧑‍💻作者名称:DaenCode 🎤作者简介:啥技术都喜欢捣鼓捣鼓,喜欢分享技术、经验、生活。 😎人生感悟:尝尽人生百味,方知世间冷暖。 在前端开发中通常会用到校验函数,检验是否为空、手机号格式、身份证格式等等。现按照用途分类整理出了30个常用的方法,在V

    2024年02月14日
    浏览(44)
  • [前端开发] 常见的 HTML CSS JavaScript 事件

    代码示例指路 常见的 HTML、CSS、JavaScript 事件代码示例 在 Web 开发中,事件是用户与网页交互的重要方式之一。通过事件,用户可以与页面元素进行交互,触发相应的功能或效果。本文将介绍常见的 HTML、CSS、JavaScript 事件,以及事件对象和事件代理的概念。 鼠标事件 鼠标事

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

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

    2024年02月03日
    浏览(54)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包