对JavaScript中的this的理解
什么是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的理解的更多相关文章
- javascript中concat方法深入理解
最近在恶补js知识的时候,总是会因为js强大的语法而感到震撼.因为以前对前端方面的疏忽,导致了一些理解的错误.因此痛改前非,下定决心,不管做什么事情,都要有专研的精神. 在介绍前,抛出一个问题:如何将 ...
- JavaScript - javascript 中的 "||" 与 "&&" 的理解与灵活运
你肯定见到过这样的代码:a = a||"xxx". 它其实就等价于下面三种形式的代码: a = a || "xxx"; 与: if (!a) { a = &qu ...
- javascript中关于继承的理解
首先,你要理解在javascript中,每当一个新函数创建时,都会生成一个prototype属性,我们管它叫做原型对象.看一个例子: function foo(){ this.name='qiangq ...
- 第一篇 对Javascript中原型的深入理解
理解原型对象 在Javascript中不管什么时候,仅仅要创建一个新的函数,就会依据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象(这个对象的用途是包括能够有特定 ...
- Javascript中闭包的个人理解
Javascript的一个特殊点就在于它的闭包和回调特性,这两个特性让初学Javascript的我是云里雾里,至今仍在苦苦摸索与理解.在一番苦思之后,整理了一下资料,将自己的理解思路记录下来,以 ...
- 关于JavaScript中prototype机制的理解
最近几天一直在研究JavaScript中原型的机制,从开始的似懂非懂,到今天终于有所领悟.不敢说彻底理解,但是起码算知道怎么回事了. 为什么一开始似懂非懂 开始了解一遍原型机制后,感觉知其然但不知其所 ...
- javascript中变量提升的理解
网上找了两个经典的例子 var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); // 10 var ...
- JavaScript中with语句的理解
with语句的作用是暂时改变作用域链.减少的重复输入. 其语法结构为: with(object){ //statements } 举一个实际例子吧: with(document.forms[0]){ ...
- 深入浅析JavaScript中with语句的理解
JavaScript 有个 with 关键字, with 语句的原本用意是为逐级的对象访问提供命名空间式的速写方式. 也就是在指定的代码区域, 直接通过节点名称调用对象. with语句的作用是暂时改变 ...
- 对于JavaScript中this关键字的理解
这是我第二遍学this了,第一遍学的懵懵的.this指哪里都是凭我一个男人的直觉然后控制台输出看看对不对. 刚查了书.博客.视频.理解差不多了.毕竟菜鸡me: 一.首先介绍下什么是this this是 ...
随机推荐
- jdk下httpserver源码解析
在写这篇博客之前我查了很久发现全网都没有一篇写httpserver源码解析的 所以今天就由我来为大家解析一下httpserver的源码.(这里我会去掉其中的https部分的源码,只讲http部分,对h ...
- Python中矩阵的完全显示问题以及输出矩阵中的非零元问题
问题:有时需要查看矩阵的所有元素,但矩阵过大时中间部分会用[... ...]号代替,这样不方便数据分析. 解决: # 解决不完全显示问题 import numpy as np np.set_print ...
- MATLAB 排序、拟合
一.数据排序整合 1.随机生成的数,从小到大排序 clear rand('seed',1)%设置随机种子,确保随机数一样 edge_range=unifrnd (1, 10, 1, 10) edge_ ...
- idea打包或编译错误,错误为c盘idea路径某些文件被占用(非idea文件,项目生成的文件)
方法列表(2的效果可能更好) 1.将被占用的文件删除之后,重新打包或编译. 2.多编译几次项目. 3.发现真正可能的原因.(貌似被南航企业版360拦截了,导致targe或maven等文件被占用问题) ...
- 一位读者刚刚收割阿里、腾讯等大厂Offer，他说这些话一定要和你们说一下
本文来自读者投稿,作者是我的一位资深读者,也是我知识星球的球友,最近在春招中收割了很多大厂的Offer.看了他总结后,我发现很多地方和我当年参加校招的时候很相像,甚至比我那个时候还要优秀.分享给大家, ...
- Python 【基础面试题】
前言 面试题仅做学习参考,学习者阅后也要用心钻研其中的原理,重要知识需要系统学习.透彻学习,形成自己的知识链.以下五点建议希望对您有帮助,早日拿到一份心仪的offer. 做好细节工作,细致的人运气不会 ...
- 技术再深入一点又何妨？一脸懵B的聊Actor
记得上次深入 Resin 源码时,见到了Actor 字眼,当时主要从 Resin 中抽取关键架构,就屏蔽了 Actor 相关代码.未曾想这两天研究 flink 的运行架构以及源码,再次与 Actor ...
- CCF题库刷题编译错误
最近在CCF上刷题,因为C语言更合适,就使用了devc编译器,选择C语言但是却报编译错误 后来查了一下,发现在提交时选择C++语言就能满分通过,问题得以解决.
- 如何基于layui的laytpl实现数据绑定
想了半天才想起自己园子的登录密码.可想而知,多长时间没登录了 正文一开始用layui做了几个管理系统,所以用起来觉得确实很容易上手,管理后台最常用的就是form和table以及弹窗类.layui提供的 ...
- WEB缓存系统之varnish代理以及健康状态检测配置
前文我们聊了下varnish的缓存项修剪配置,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/12666406.html:今天我来说一下varnish作为代理服务 ...