JavaScript 中this指向问题案例详解

总结

  • 全局环境 ➡️ window
  • 普通函数 ➡️ window 或 undefined
  • 构造函数 ➡️ 构造出来的实例
  • 箭头函数 ➡️ 定义时外层作用域中的 this
  • 对象的方法 ➡️ 该对象
  • call()、apply()、bind() ➡️ 第一个参数

全局环境

无论是否在严格模式下，this 均指向 window 对象。

console.log(this === window)  // true
// 严格模式
'use strict'
console.log(this === window)  // true

普通函数

  1. 正常模式

    • this 指向 window 对象
      • function test() {
  return this === window
}

console.log(test())  // true

  2. 严格模式
    • this 值为 undefined
      • // 严格模式
'use strict'

function test() {
  return this === undefined
}

console.log(test())  // true

构造函数

函数作为构造函数使用时，this 指向构造出来的实例。

function Test() {
  this.number = 1
}

let test1 = new Test()

console.log(test1.number)  // 1

箭头函数

函数为箭头函数时，this 指向函数定义时上一层作用域中的 this 值。

let test = () => {
  return this === window
}

console.log(test())  // true

let obj = {
  number: 1
}

function foo() {
  return () => {
    return this.number
  }
}

let test = foo.call(obj)

console.log(test())  // 1

对象的方法

函数作为对象的方法使用时，this 指向该对象。

let obj = {
  number: 1,
  getNumber() {
    return this.number
  }
}

console.log(obj.getNumber())  // 1

call()、apply()、bind()

  • 调用函数的 call()、apply() 方法时，该函数的 this 均指向传入的第一个参数。
  • 调用函数的 bind() 方法时，返回的新函数的 this 指向传入的第一个参数。
let obj = {
  number: 1
}

function test(num) {
  return this.number + num
}

console.log(test.call(obj, 1))  // 2

console.log(test.apply(obj, [2]))  // 3

let foo = test.bind(obj, 3)
console.log(foo())  // 4

到此这篇关于JavaScript 中this指向问题案例详解的文章就介绍到这了,更多相关JavaScript 中this指向问题内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 7道关于JS this的面试题，你能答对几个

    前言 在 JavaScript 中,this 是函数调用上下文.正是由于 this 的行为很复杂,所以在 JavaScript 面试中,总是会问到有关  this 的问题. 做好的准备面试的方法是练习,所以本文针对 this 关键字整理了 7 个有趣的面试. 注意:下面的 JavaScript 代码以非严格模式运行. 1:变量与属性 以下代码输出什么: const object = { message: 'Hello, World!', getMessage() { const message

  • Javascript中函数分类&this指向的实例详解

    Javascript中函数分类&this指向的实例详解

    JS中定义函数的三种方式 通过实例来说明吧 <script> //method1 function fn() { console.log('fn created '); } //method2 var fn2 = function () { console.log('fn2 created'); } //method3 var fn3 = new Function('test', 'console.log(test);'); fn3('fn3 test'); console.dir(fn3);

  • JavaScript中的this指向问题详解

    JavaScript中的this指向问题详解

    前言 相信我,只要记住本文的 7️⃣ 步口诀,就能彻底掌握 JS 中的 this 指向. 先念口诀:箭头函数.new.bind.apply 和 call.欧比届点(obj.).直接调用.不在函数里. 按照口诀的顺序,只要满足前面某个场景,就可以确定 this 指向了. 接下来按照口诀顺序对它们进行详解,文中示例代码都运行在 Chrome 的 Console 控制台中. 文末有精心准备的练习题,用于检验学习成果,别忘了试试~ 1. 箭头函数 箭头函数排在第一个是因为它的 this 不会被改变,所以

  • JavaScript逐点突破系列之this是什么

    JavaScript逐点突破系列之this是什么

    了解this 也许你在其他面向对象的编程语言曾经看过this,也知道它会指向某个构造器(constructor)所建立的对象.但事实上在JavaScript里面,this所代表的不仅仅是那个被建立的对象. 先来看看ECMAScript 标准规范对this 的定义: 「The this keyword evaluates to the value of the ThisBinding of the current execution context.」 「this 这个关键字代表的值为当前执行上下

  • JavaScript函数中this指向问题详解

    this关键字 哪个对象调用函数,函数里面的this指向哪个对象. **严格模式下:**在全局环境中,this指向的是undefined **非严格模式下:**在全局环境中,this指向的是window 全局定义的函数直接调用,this => window function fn(){ console.log(this); // 此时 this 指向 window } fn(); // 相当于 window.fn() 对象内部的函数调用,this => 调用者 var obj = { fn:f

  • JavaScript 中this指向问题案例详解

    总结 全局环境 ➡️ window 普通函数 ➡️ window 或 undefined 构造函数 ➡️ 构造出来的实例 箭头函数 ➡️ 定义时外层作用域中的 this 对象的方法 ➡️ 该对象 call().apply().bind() ➡️ 第一个参数 全局环境 无论是否在严格模式下,this 均指向 window 对象. console.log(this === window) // true // 严格模式 'use strict' console.log(this === window

  • JavaScript 拖拉时间之drag案例详解

    目录 DragEvent 接口 DataTransfer 接口概述 DataTransfer 的实例属性 DataTransfer.dropEffect DataTransfer.effectAllowed DataTransfer.files DataTransfer.types DataTransfer.items DataTransfer 的实例方法 DataTransfer.setData() DataTransfer.getData() DataTransfer.clearData()

  • JavaScript中浅讲ajax图文详解

    JavaScript中浅讲ajax图文详解

    1.ajax入门案例 1.1 搭建Web环境 ajax对于各位来说,应该都不陌生,正因为ajax的产生,导致前台页面和服务器之间的数据传输变得非常容易,同时还可以实现页面的局部刷新.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 对于JavaWeb项目而言,ajax主要用于浏览器和服务器之间数据的传输. 如果是单单地堆砌知识点,会显得比较无聊,那么根据惯例,我先不继续介绍ajax,而是来写一个案例吧. 打开

  • JavaScript setTimeout与setTimeinterval使用案例详解

    这两个方法都可以用来在固定的时间段后去执行一段javascirpt代码,不过两者各有各的应用场景. 实际上,setTimeout和setInterval的语法相同.它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码. 不过这两个函数还是有区别的,setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码. 虽然表面上看来setTimeout只能应用在on-

  • JavaScript axios安装与封装案例详解

    1.下载axios插件 cnpm install axios -S 2.在main.js引入axios import axios from 'axios' Vue.prototype.$http = axios 3.创建axios实例 let service = axios.create({ baseURL: baseUrl, // url = base api url + request url withCredentials: true, // send cookies when cross

  • JavaScript实现动态生成表格案例详解

    JavaScript实现动态生成表格案例详解

    目录 前言 实现思路 实现代码  实现效果 前言 在这里实现一个动态添加表格的案例,当点击添加按钮时,可以弹出一个表单,然后将输入的内容添加到表格中,也可以将表格中的整行内容清除. 实现思路 先创建一个表格和一个表单,将表单中输入的内容动态添加进表格中,表单页面右上角有一个关闭按钮,当点击时,可以将表单页面关闭并将表格页面显示.为了页面美观,我将添加数据的按钮放在了表格的<tfoot></tfoot>中,将动态生成的表格数据添加到<tbody><tbody>

  • JavaScript中push(),join() 函数 实例详解

    定义和用法 push方法 可向数组的末尾添加一个或多个元素,并返回一个新的长度. join方法 用于把数组中所有元素添加到一个指定的字符串,元素是通过指定的分隔符进行分割的. 语法 arrayObject.push(newelement1,newelement2,....,newelementX) arrayObject.join(separator). 参数描述newelement1必需.要添加到数组的第一个元素.newelement2可选.要添加到数组的第二个元素.newelementX可选

  • JavaScript 中调用 Kotlin 方法实例详解

    JavaScript 中调用 Kotlin 方法实例详解 Kotlin 编译器生成正常的 JavaScript 类,可以在 JavaScript 代码中自由地使用的函数和属性 .不过,你应该记住一些微妙的事情. 用独立的 JavaScript 隔离声明 为了防止损坏全局对象,Kotlin 创建一个包含当前模块中所有 Kotlin 声明的对象 .所以如果你把模块命名为 myModule,那么所有的声明都可以通过 myModule 对象在 JavaScript 中可用.例如: fun foo() =

  • JavaScript中的splice方法用法详解

    JavaScript中的splice主要用来对js中的数组进行操作,包括删除,添加,替换等. 注意:这种方法会改变原始数组!. 1.删除-用于删除元素,两个参数,第一个参数(要删除第一项的位置),第二个参数(要删除的项数) 2.插入-向数组指定位置插入任意项元素.三个参数,第一个参数(插入位置),第二个参数(0),第三个参数(插入的项) 3.替换-向数组指定位置插入任意项元素,同时删除任意数量的项,三个参数.第一个参数(起始位置),第二个参数(删除的项数),第三个参数(插入任意数量的项) 示例:

  • JavaScript中window和document用法详解

    JavaScript中window和document用法详解

    一.验证表单 封装一个函数用于验证手机号 /** * @param {String}eleId * @param {Object}reg */ function checkInput(eleId,reg) { var ele = document.getElementById(eleId); ele.onblur = function (ev) { if(!reg.test(this.value)){ //不匹配 this.style.borderColor = "#ff0000" /

随机推荐