什么是this:

  解析器(就是浏览器)在调用函数时,每次都会向函数内部传递两个隐含的参数;

  这两个隐含参数其中一个就是this(还有一个是arguments,用来接收函数的实参),this指向的是一个对象,这个对象我们称为函数执行的上下文对象;

this的指向问题:

  首先我们需要知道的是,this的指向不是固定的,它会根据函数的不同调用方式,来决定this的指向,常见的情况有以下几种:

  1,封装函数后,直接以函数的形式调用:

      ——一般情况下以函数的形式来调用,this指向的是window对象

function fun() {
console.log(this);
}
// 以函数形式调用,this是window
fun();

    ——严格模式下为undefined

"use strict";
function fun() {
console.log(this);
}

  2,以方法的形式调用

      ——以方法的形式来调用,this就是调用方法的那个对象

function fun() {
console.log(this.name);
}
// 创建一个对象
var obj = {
name: "meng",
sayName: fun
}
var obj2 = {
name: "xue",
sayName: fun
}
// 以方法的形式调用,this是调用方法的那个对象(这里就是obj,而不是obj2或window)
obj.sayName();

  

  3,函数作为构造函数使用时

      ——以构造函数的形式来调用,this就是构造函数返回的那个对象

function Persion() {
this.name = "meng";
}
// 这里的this指向构造函数返回的那个对象
var per = new Persion(); // Persion返回一个对象
console.log(per)

  

  4,在DOM操作,给元素对象绑定事件响应函数时,响应函数给谁绑定this就是谁

      ——事实上,也可以理解为事件响应函数函数在解析器内部,也是通过方法的形式调用的

<body>
<div id="box1"></div>
<button id="btn1">点我一下</button> <script>
// 获取box1
var box1 = document.getElementById("box1");
var btn1 = document.getElementById("btn1"); btn1.onclick = function() {
// 这里的this是btn1元素对象
console.log(this)
}; </script>
</body>

  this的重定义:

  有时候,我们希望自己定义this的指向,这个时候就用到了call,apply,bind三个方法,他们是属于Function构造函数原型中的方法,都有改变this指向的功能,但是他们的传参和使用方式有一些区别,这三个方法的使用和差别可参考:https://www.runoob.com/w3cnote/js-call-apply-bind.html

  总结:

  this其实是函数调用时,浏览器默认传给函数的一个参数;

    这个参数指向一个对象,具体是那个对象根据函数的调用方式不同而不同;

    我们可以通过call,apply,bind三个方法来改变this的指向;

对JavaScript中的this的理解的更多相关文章

  1. javascript中concat方法深入理解

    最近在恶补js知识的时候,总是会因为js强大的语法而感到震撼.因为以前对前端方面的疏忽,导致了一些理解的错误.因此痛改前非,下定决心,不管做什么事情,都要有专研的精神. 在介绍前,抛出一个问题:如何将 ...

  2. JavaScript - javascript 中的 "||" 与 "&&" 的理解与灵活运

    你肯定见到过这样的代码:a = a||"xxx". 它其实就等价于下面三种形式的代码: a = a || "xxx"; 与: if (!a) { a = &qu ...

  3. javascript中关于继承的理解

    首先,你要理解在javascript中,每当一个新函数创建时,都会生成一个prototype属性,我们管它叫做原型对象.看一个例子: function foo(){ this.name='qiangq ...

  4. 第一篇 对Javascript中原型的深入理解

      理解原型对象 在Javascript中不管什么时候,仅仅要创建一个新的函数,就会依据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象(这个对象的用途是包括能够有特定 ...

  5. Javascript中闭包的个人理解

       Javascript的一个特殊点就在于它的闭包和回调特性,这两个特性让初学Javascript的我是云里雾里,至今仍在苦苦摸索与理解.在一番苦思之后,整理了一下资料,将自己的理解思路记录下来,以 ...

  6. 关于JavaScript中prototype机制的理解

    最近几天一直在研究JavaScript中原型的机制,从开始的似懂非懂,到今天终于有所领悟.不敢说彻底理解,但是起码算知道怎么回事了. 为什么一开始似懂非懂 开始了解一遍原型机制后,感觉知其然但不知其所 ...

  7. javascript中变量提升的理解

    网上找了两个经典的例子 var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); // 10 var ...

  8. JavaScript中with语句的理解

    with语句的作用是暂时改变作用域链.减少的重复输入. 其语法结构为: with(object){ //statements } 举一个实际例子吧: with(document.forms[0]){ ...

  9. 深入浅析JavaScript中with语句的理解

    JavaScript 有个 with 关键字, with 语句的原本用意是为逐级的对象访问提供命名空间式的速写方式. 也就是在指定的代码区域, 直接通过节点名称调用对象. with语句的作用是暂时改变 ...

  10. 对于JavaScript中this关键字的理解

    这是我第二遍学this了,第一遍学的懵懵的.this指哪里都是凭我一个男人的直觉然后控制台输出看看对不对. 刚查了书.博客.视频.理解差不多了.毕竟菜鸡me: 一.首先介绍下什么是this this是 ...

随机推荐

  1. 【WPF学习】第六十章 创建控件模板

    经过数十天的忙碌,今天终于有时间写博客. 前面一章通过介绍有关模板工作方式相关的内容,同时介绍了FrameWorkElement下所有控件的模板.接下来将介绍如何构建一个简单的自定义按钮,并在该过程中 ...

  2. 【动态规划】最佳加法表达式(百练oj4152)

    总时间限制: 1000ms 内存限制: 65536kB 描述 给定n个1到9的数字,要求在数字之间摆放m个加号(加号两边必须有数字),使得所得到的加法表达式的值最小,并输出该值.例如,在1234中摆放 ...

  3. Vue.js系列(一):Vue项目创建详解

    引言 Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,并详细介绍使用vue-cli脚手架工具快速的构建Vu ...

  4. 集合和映射(Set And Map)

    目录 集合 Set 基于二分搜索树实现集合 基于链表实现集合 集合的时间复杂度分析 映射 Map 基于链表实现映射 基于二分搜索树实现映射 映射的时间复杂度分析 leetcode上关于集合和映射的问题 ...

  5. iOS 内置图片瘦身

    一.iOS 内置资源的集中方式 1.1 将图片存放在 bundle 这是一种很常见的方式,项目中各类文件分类放在各个 bundle 下,项目既整洁又能达到隔离资源的目的.采用 bundle 的加载方式 ...

  6. CVE-2020-7961 Liferay Portal 复现分析

    漏洞说明: Liferay是一个开源的Portal(认证)产品,提供对多个独立系统的内容集成,为企业信息.流程等的整合提供了一套完整的解决方案,和其他商业产品相比,Liferay有着很多优良的特性,而 ...

  7. python数据库MySQL之视图,触发器,事务,存储过程,函数

    一 视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,可以将该结果集当做表来使用. 使用视图我们可以把查询过程中的 ...

  8. Tkinter 控件

    文章更新于:2020-02-19 待翻译跟进 In this part of the Tkinter tutorial, we will cover some basic Tkinter widget ...

  9. kepp running 团队视频分析初步总结

    一.遇码则码队视频讨论: 时    间:2020.03.31 方    式:视频会议 参加人员:温学智,胡海靖,莫佳亮 二.视频讨论会议截图: 三.纪要内容: (1).主要功能和界面显示: 温学智:在 ...

  10. Array(数组)对象-->数组值的修改

    1.修改数组值: 数组对象名[下标] = 新值: 举例:原数组如下: var arr = [1,2,3,4,5] 需求:将arr数组第二个元素的值改为10,代码如下: arr[1] = 10; con ...