一、概念:

  • 函数的上下文(this)由调用函数的方式决定,function是“运行时上下文”策略;

  • 函数如果不调用,则不能确定函数的上下文。

二、规则:

  • 对象打点调用它的方法函数,则函数的上下文是这个打点的对象

var name = '小红'
const people = {
name:'小明',
age:12,
sayHello(){
console.log(this.name);
}
}
people.sayHello();// "小明"
  • 圆括号直接调用函数,则函数的上下文是window对象

var name = "老六"
function winDow(){
let name = "铁蛋"
console.log(this.name);
}
winDow();//老六
  • 数组(类数组对象)枚举出函数进行调用,上下文是这个数组(类数组对象)

const arr = ['a',0,'b',1,function(){console.log(this[0])}];
arr[4]();//a
  • IIFE(自调用)中的函数,上下文是window对象

var name = "李白"
(function(){
let name = '王麻子'
console.log(this.name)// 李白
})()
  • 定时器、延时器调用函数,上下文是window对象

var name = "王五"
const xiaoHong = {
name:'小栗子',
age:18,
fun(){
setTimeout(function(){
console.log(this.name)
},1000)
}
}
xiaoHong.fun();//王五
  • 事件处理函数的上下文,是绑定事件的DOM元素

// html部分
<p>我是狗蛋</p>
// js部分
const domP = document.querySelector('p');
domP.onclick = function(){
console.log(this.innerText);//点击时,控制台打印:我是狗蛋
}

JavaScript的this指向详解的更多相关文章

  1. javascript this关键字指向详解

    在之前写代码的经历中,常常试过写着写着this就莫名其妙的不知道指向到哪里去了.今天看了曾探的javascript设计模式,里面特别谈到了this在不同情况下指代的对象,非常有意思. this指代的情 ...

  2. JavaScript面向对象编程—this详解

      this详解 作者的话 在JavaScriptOPPt面向对象编程中,this这位老大哥,相信大家不会陌生.大家在遇到this时,很多朋友难免会有个疑问:"这个this是什么,它到底指向 ...

  3. 【JavaScript中的this详解】

    前言 this用法说难不难,有时候函数调用时,往往会搞不清楚this指向谁?那么,关于this的用法,你知道多少呢? 下面我来给大家整理一下关于this的详细分析,希望对大家有所帮助! this指向的 ...

  4. 面向对象(OOP)--OOP基础与this指向详解

      前  言            学过程序语言的都知道,我们的程序语言进化是从“面向机器”.到“面向过程”.再到“面向对象”一步步的发展而来.类似于汇编语言这样的面向机器的语言,随着时代的发展已经逐 ...

  5. JavaScript中的this详解

    前言 this用法说难不难,有时候函数调用时,往往会搞不清楚this指向谁?那么,关于this的用法,你知道多少呢? 下面我来给大家整理一下关于this的详细分析,希望对大家有所帮助! this指向的 ...

  6. Javascript中prototype属性详解 (存)

    Javascript中prototype属性详解   在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不 ...

  7. Javascript常用的设计模式详解

    Javascript常用的设计模式详解 阅读目录 一:理解工厂模式 二:理解单体模式 三:理解模块模式 四:理解代理模式 五:理解职责链模式 六:命令模式的理解: 七:模板方法模式 八:理解javas ...

  8. this指向详解及改变它的指向的方法

    一.this指向详解(彻底理解js中this的指向,不必硬背) 首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是 ...

  9. JavaScript 各种遍历方式详解及总结

    JavaScript 各种遍历方式详解 在$.each中想要终止循环,但是它没有continue或者break这样的终止方式,所以尝试使用return来进行终止,但是发现并没有跳出循环.为了搞清楚js ...

  10. JavaScript进阶内容——DOM详解

    JavaScript进阶内容--DOM详解 当我们已经熟练掌握JavaScript的语法之后,我们就该进入更深层次的学习了 首先我们思考一下:JavaScript是用来做什么的? JavaScript ...

随机推荐

  1. python编程学习方法及计算机基础理论

    **从零开始学习编程 ** 一.学习前语 在学习python之前首先先说几点学习建议,首先是培养自己能解决问题的能力: 1.遇到问题时给自己设置一个解决该问题的时间限制 0-5min:自己解决问题(百 ...

  2. 大前端html基础学习02

    CSS核心属性 一.css属性和属性值的定义 属性:属性是指定选择符所具有的属性,它是css的核心. 属性值:属性值包括法定属性值及常见的数值加单位,如25px,或颜色值等. 二.CSS文本属性 1. ...

  3. 快速绘制流程图「GitHub 热点速览 v.22.47」

    画流程图一直是研发的一个难题,如何画得通俗易懂已经够让人头疼了,还要美观大方.用 d2 的语法描述下流程,d2 会自动帮你生成一张配色极佳的流程图.说到研发的选择,本周特推的 choiceof.dev ...

  4. 使用Supervisor监控mysql

    Supervisor安装教程参考:https://www.cnblogs.com/brad93/p/16639953.html mysql安装教程参考:https://www.cnblogs.com/ ...

  5. go-carbon 1.5.1 版本发布, 修复已知 bug 和新增土耳其翻译文件

    carbon 是一个轻量级.语义化.对开发者友好的golang时间处理库,支持链式调用. 目前已被 awesome-go 收录,如果您觉得不错,请给个star吧 github.com/golang-m ...

  6. async.js 版本兼容问题 async.filter举例

    async3.x 和async2.6.1 版本下 const files = ['dir1/file1.txt','dir2/file3.txt','dir3/file6.txt']; // Usin ...

  7. 所元素设为border-box

    /*全局设为CSS3盒模型 border-box*/ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inher ...

  8. QT+VS 调用基于Google Breakpad的跨平台Qt崩溃异常捕获调用方案

    方案一.基于Google Breakpad的跨平台Qt崩溃异常捕获调用方案 首先上博客:Windows下Qt生成dump文件并定位bug(基于qBreakpad) 这个地方使用的是一个叫qBreakP ...

  9. ABP AutoMapper与自定义Mapping

    对象映射 在工作中,需要将相似的对象映射到另一个对象,这样我们来看一个最繁琐的映射方式 例: public class UserAppService : ApplicationService { pr ...

  10. 浅谈字节码增强技术系列2-Asm与Cglib

    作者:董子龙 前言 记得那是2022年秋天的第一场雨,比2021年来的稍晚一些,在那个秋雨朦胧的下午,正在工位上奋笔疾书的我突然听到了前面波哥对着手机听筒说出来的"温柔"的话语:说 ...