JavaScript中函数的this指向!
JavaScript的this的指向问题!
这是我自己敲的, 报错!
<button>点击查看绑定事件的this指向!</button>
<script>
// 函数的不同调用方式决定了this 的指向不同!
// 1 普通函数 this 指向window
function fn() {
console.log('普通函数的this指向' + this);
}
window.fn();
// fn.call();
// 2 对象的方法!就是函数放在对象里面!this 指向当前的对象 obj!
var obj = {
sWhat() {
console.log('对象中的方法的调用的this指向' + this);
}
}
obj.sWhat();
// 3 构造函数 this 指向我们的实例化对象 xiaoshi
function Singer() {};
// 在我们构造函数原型上的方法也是指向我们实例化对象的!
Singer.prototype.guitar = function () {
}
var xiaoshi = new Singer();
// 4 绑定事件函数 this 指向的是函数的调用者 btn 这个按钮对象!
var btn = document.querySelector('button')
btn.onclick = function () {
console.log('绑定事件函数的this指向' + this)
}; // 点击了按钮就会调用这个函数!
// 5 定时器函数
window.setTimeout(function () {
console.log('定时器函数中的this指向' + this);
}, 1000)
// 6 立即执行函数
// 立即函数的构成 (function() {})()
(function() {
console.log('立即执行函数的this' + this);
})();
// 立即执行函数的第二种写法!
// (function () {
// console.log(this)
// }())
</script>
{{uploading-image-628696.png(uploading...)}}
下面的是老师的代码!
<button>点击查看绑定事件的this指向!</button>
<script>
// 函数的不同调用方式决定了this 的指向不同
// 1. 普通函数 this 指向window
function fn() {
console.log('普通函数的this' + this);
}
window.fn();
// 2. 对象的方法 this指向的是对象 o
var o = {
sayHi: function() {
console.log('对象方法的this:' + this);
}
}
o.sayHi();
// 3. 构造函数 this 指向 ldh 这个实例对象 原型对象里面的this 指向的也是 ldh这个实例对象
function Star() {};
Star.prototype.sing = function() {
}
var ldh = new Star();
// 4. 绑定事件函数 this 指向的是函数的调用者 btn这个按钮对象
var btn = document.querySelector('button');
btn.onclick = function() {
console.log('绑定时间函数的this:' + this);
};
// 5. 定时器函数 this 指向的也是window
window.setTimeout(function() {
console.log('定时器的this:' + this);
}, 1000);
// 6. 立即执行函数 this还是指向window
(function() {
console.log('立即执行函数的this' + this);
})();
</script>
我自己觉得没有什么不一样 啊!
详细的请看下表!
调用方式 | this指向 |
---|---|
普通函数调用 | window |
构造函数调用 | 实例对象 原型对象里面的方法也指向实例对象 |
对象方法调用 | 该方法所属对象 |
事件绑定方法 | 绑定事件对象 |
定时器函数 | window |
立即执行函数 | window |
重点: this指向并不是一开始就定义好的,而是在函数调用执行的时候才知道它指向的是谁!
JavaScript中函数的this指向!的更多相关文章
- 改变JavaScript中函数的内部this指向!
改变JavaScript中函数的内部this指向! 第一种方法 call call 可以 调用函数 + 改变函数内的this指向! var obj = { name: 'lvhang' } funct ...
- Javascript中函数的四种调用方式
一.Javascript中函数的几个基本知识点: 1.函数的名字只是一个指向函数的指针,所以即使在不同的执行环境,即不同对象调用这个函数,这个函数指向的仍然是同一个函数. 2.函数中有两个特殊的内部属 ...
- javascript中几种this指向问题
javascript中几种this指向问题 首先必须要说的是,this 永远指向函数运行时所在的对象,而不是函数被创建时所在的对象. (1).作为函数名调用 函数作为全局对象调用,this指向 ...
- JavaScript中函数函数的定义与变量的声明<基础知识一>
1.JavaScript中函数的三种构造方式 a.function createFun(){ } b.var createFun=function (){ } c.var createFun=new ...
- JavaScript中函数的形参和实参的实现原理剖析
我们都知道JS里面参数的传递是可以不一样的,比如我们有一个函数: <script type="text/javascript"> function one(a,b,c) ...
- JavaScript 中函数节流和函数去抖的讲解
JavaScript 中函数节流和函数去抖的讲解 我们都知道频繁触发执行一段js逻辑代码对性能会有很大的影响,尤其是在做一些效果实现方面,或者逻辑中需要进行后端请求,更是会导致卡顿,效果失效等结果,所 ...
- JavaScript中函数是不能重载原因
以前有一次写JS插件的时候,由于后台写习惯了,妄想在JS中写重载函数,可惜不能成功,原因花了一点时间记了下来 首先要理解重载的含义:函数返回值不同或者形式参数个数不同但函数名相同的函数 JavasSc ...
- JavaScript中函数的调用
JavaScript中函数的调用 制作人:全心全意 在JavaScript中,函数定义后并不会自动执行,要执行一个函数需要在特定的位置调用该函数,调用函数需要创建调用语句,调用语句包含函数名称和参数. ...
- JavaScript中函数的定义
JavaScript中函数的定义 制作人:全心全意 在JavaScript中,函数是由关键字function.函数名加一组参数以及置于大括号中需要执行的一段代码定义的.定义函数的基本语法格式如下: f ...
随机推荐
- CCNP之OSPF实验报告
OSPF实验报告 一.实验要求 1.R4为ISP,其上只能配置IP地址:R4与其它所有直连设备间使用公有IP2.R3--R5/6/7为MGRE环境,R3为中心站点3.整个OSPF环境IP地址为172. ...
- vscode常用快捷键和插件
常用快捷键 快捷键 用途 ctrl+· 打开终端 shift+alt+A 块注释 ctrl+/ 行注释 ctrl+shift+F 文件夹查找 ctrl+enter 下方插入一行 ctrl+shift+ ...
- .net core 和 WPF 开发升讯威在线客服与营销系统:系统总体架构
本系列文章详细介绍使用 .net core 和 WPF 开发 升讯威在线客服与营销系统 的过程.本产品已经成熟稳定并投入商用. 在线演示环境:https://kf.shengxunwei.com 注意 ...
- mybatis-plus 自定义SQL,XML形式,传参的几种方式
mybatis-plus 自定义SQL,XML形式,传参的几种方式 前提说明 所涉及文件 传参类型说明 1.Java代码中使用QueryWrapper动态拼装SQL 2.简单类型参数(如String, ...
- flowable中传入审批人是list
package org.springblade.flow.engine.listener; import org.flowable.engine.delegate.DelegateExecution; ...
- Android驱动学习-内部机制_回顾binder框架关键点
内部机制_回顾binder框架关键点server注册服务时, 对每个服务都提供不同的ptr/cookie,在驱动程序里对每个服务都构造一个binder_node, 它也含有ptr/cookie cli ...
- 多人VNC远程桌面服务配置
博主前篇博客里面已经讲过VNC的配置,为了方便查看,单独拿出来写一下. (1) 搜索可以用来安装vncserver的软件包: sudo apt-cache search vncserver (2) 安 ...
- yum被系统升级锁定
Another app is currently holding the yum lock; waiting for it to exit... 可能是系统自动升级正在运行,yum在锁定状态中. 已经 ...
- JVM 常用命令行工具
本文部分摘自<深入理解 Java 虚拟机第三版> 基础故障处理工具 Java 开发人员肯定都知道 JDK 的 bin 目录下有许多小工具,这些小工具除了用于编译和运行 Java 程序外,打 ...
- 第十一章节 BJROBOT PS3 手柄控制【ROS全开源阿克曼转向智能网联无人驾驶车】
1.把小车架空平放在地板上. 2.用 USB 线将 PS3 蓝牙手柄连接至小车主控端,初次连接手柄上的 4 个红色指示灯会同时闪烁; 3.按下手柄中间的圆形配对键,然后等待红灯闪烁至停止. 4.此 ...