一、概念:

  • 函数的上下文(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. Codeforces Round #835 (Div. 4) A-G

    比赛链接 A 题意 给出三个不同的数,求中位数. 题解 知识点:模拟. 显然. 时间复杂度 \(O(1)\) 空间复杂度 \(O(1)\) 代码 #include <bits/stdc++.h& ...

  2. 【Devexpres】spreadsheetControl自动列宽

    Worksheet worksheet = this.spreadsheetControl1.ActiveWorksheet; worksheet.Import(datatable, true, 0, ...

  3. C温故补缺(十三):可变参数

    可变参数 stdarg.h 头文件提供了实现可变参数功能的函数和宏.具体步骤如下: 定义一个函数,最后一个参数为省略号,省略号前面可以设置自定义参数,一般传入参数的个数. int func(int n ...

  4. Promise基础知识

    Promise 1.Promise的前置小知识 进程(厂房) 程序的运行环境 线程(工人) 线程是实际进行运算的东西 同步 通常情况代码都是自上向下一行一行执行的 前边的代码不执行后边的代码也不会执行 ...

  5. OpenVINO计算机视觉模型加速

    OpenVINO计算机视觉模型加速 OpenVINO介绍 计算机视觉部署框架,支持多种边缘硬件平台 Intel开发并开源使用的计算机视觉库 支持多个场景视觉任务场景的快速演示 四个主要模块: 1.开发 ...

  6. 什么是JS?JS的用途?

    一.JavaScript是什么?它有什么作用? JavaScript是一种运行在客户端的脚本语言,简称JS,属于解释性语言.它是一行翻译执行完以后再进行下一行,代码不进行预编译. JavaScript ...

  7. 一篇文章教你实战Docker容器数据卷

    在上一篇中,咱们对Docker中的容器数据卷做了介绍.已经知道了容器数据卷是什么?能干什么用.那么本篇咱们就来实战容器数据卷,Docker容器数据卷案例主要做以下三个案例 1:宿主机(也就是Docke ...

  8. .netcore项目docker化,以及docker之间通信

    简言: 最近刚完成公司的新系统,系统使用的是微服务架构,由于领导说要将服务docker化.下面将我的研究结果分享出来,如若有错误的地方,还请各位多多指点. 目录: 什么是docker? 使用docke ...

  9. Linux第四章 进程

    4.1 前言 本章讨论进程概念.资源.属性. 4.2 内核和进程的关系 当系统启动时,内核代码被加载到内存,初始化之后,启动第一个用户进程,然后内核的代码就等着用户进程来调度了. 4.3 进程是程序的 ...

  10. opencv-python学习之旅

    opencv-python 操作 *注:在此笔记中只记录下各种函数的使用,规则 详细讲解见https://opencv.apachecn.org/#/docs/4.0.0/2.1-tutorial_p ...