啊,万恶的this

一、全局下,this一般都指向window

全局下,ES5非严格模式,下面的this都是window。

console.log(this);
function abc(){console.log(this);
}
abc();

在这里插入图片描述

二、对象中的this

1、最常见的this情况:

var a=100;var obj={a:1,b:function(){console.log(this);//这个this是当前对象// 谁调用b方法,this就是谁},// this是当前对象外的this指向,这里应该是windowc:this.a
}
var obj1 = obj;
obj = {};
obj1.b();//浅复制而已,引用没变

在这里插入图片描述
2、如果在对象的属性对象中:

var a=1000;var obj = {a: 1,b: {c: this.a, //运行到此时obj还没生成,this还是指向window  创建时  还没生成d: function () {console.log(this);  //函数被调用的时候才会执行这句话,同样,谁调用指向谁}}}
console.log(obj);
obj.b.d();

在这里插入图片描述
3、如果obj已经创建完,再给obj增加属性,那么此时的obj.b的this还是指向window。

var a=2000;var obj={a:1
}
console.log(obj); obj.b={c:this.a,d:function(){console.log(this);}
}console.log(obj); 

在这里插入图片描述
4、如果是对象中的属性函数下又新建对象,this指向外层对象obj。

var obj = {a: 1,b: function () {// thisvar obj2 = {// this指当前对象外this的指向,这里的this指向是objc: this.a}console.log(obj2.c);}
}obj.b();

在这里插入图片描述

三、回调函数中的this

回调:函数在另一个函数的参数里,然后被调用,就叫回调。

1、一般的回调函数:(this被重定向到window)

function ab(fn) {fn();
}
function cd() {// this指向windowconsole.log(this);
}ab(cd);

在这里插入图片描述
2、对象中的回调:(this被重定向到window)

var obj = {a: function (fn) {fn();},b: function () {// 如果直接执行obj.b() 这里的this应该是obj对象// 如果通过上面a方法回调执行当前b的时候,this被重定向到windowconsole.log(this);}
}obj.a(obj.b);

在这里插入图片描述
3、事件是特殊的回调函数,事件回调函数中的this都是被侦听的对象

document.addEventListener("click", clickHandler);function clickHandler(e) {console.log(this);// this===e.currentTarget
} 

在这里插入图片描述
4、把函数写在方法中(匿名的回调函数),this都重定向到window:(不论这个方法放在哪)

var obj = {a: function () {setTimeout(function () {console.log(this)//window}, 100);// 所有的函数一旦被写在一个方法中,这个函数就是匿名的回调函数,在该函数中this指向windowsetInterval(function () {console.log(this);}, 100)var arr = [1, 2, 3];arr.map(function () {console.log(this);//window// forEach,filter,reduce,some,every,flatMap});new Promise(function (resolve, reject) {console.log(this);//window})}
} 
obj.a();
new Promise(function (resolve, reject) {console.log(this);//window
})

在这里插入图片描述

四、事件函数中的this

事件函数是特殊的回调函数,使用时不会被重定向到window,而是侦听对象;因为太特殊了,单独拿出来再了解了解。
事件侦听的回调函数,this被重新处理,this指向被侦听的对象。

(1)最常用的看上面。
(2)放到其他地方也一样。比如放到对象里:

var obj={a:function(){document.addEventListener("click",this.b);this.b();},b:function(e){// 因为b函数是事件侦听的回调函数,因此这里this指向事件侦听的对象,也就是documentconsole.log(this);console.log(e);//侦听到的事件}
}
obj.a();

在这里插入图片描述

五、ES6类中的this

一般都是指向当前实例对象,但是静态属性、静态方法都可以指向当前类。
但是要注意:对于面向对象语言来说,一般在静态属性和方法中是不允许使用this这个概念的。

class Box{
// 在外面定义,ES7后才有的
// 这里的内容是constructor执行后才赋的值
//其实在这儿定义的,跟在constructor里定义差不多
b=333;
a=this.b;
static b=444;
static a=this.b;//一旦被设为静态属性,this指向都会被设置为当前的类名Box
constructor(){
// this指向当前实例对象console.log(this);console.log(this.a,Box.a);this.b=111;this.a=this.b;Box.b=222;  //也是静态属性Box.a=Box.b;console.log(this.a,Box.a);
}
play(){// 这里的this都是实例化的对象console.log(this.a,Box.a);console.log(this);
}static run(){console.log(this);// 因为使用static定义的方法,this指向为当前类名// 对于面向对象语言来说,一般在静态属性和方法中不允许使用this这个概念
}}
var a=new Box();
a.play();class Ball extends Box{
constructor(){super();
}}
var b=new Ball();
Ball.run();   // 继承后静态方法也会被继承

在这里插入图片描述

六、ES5中类的this

除了静态属性、方法的this指向这个类,其他情况下this一般都指向当前实例化对象。

// 构造函数
function Box(){this.play();// 构造函数中this,指向new出的实例对象
}// 静态的属性、方法,类似于ES6里的静态方法、静态属性定义
Box.a=function(){console.log(this);// this  -->Box
}
Box.b=3;// 写在原型下的属性、方法
Box.prototype.play=function(){console.log(this);// this  就是当前调用该方法的实例对象
}
Box.prototype.c=10; // 静态属性、方法,this指向类
console.log(Box.b);
Box.a();var box=new Box(); 
console.log(box); //与paly中打印的一样
// box对象没有play这个对象属性,因此就去原型链中找到最近的play方法,执行这个play方法是由box这个对象执行
// 静态属性、方法只和类有关系,与实例化的对象没有任何关系,所以不在box对象中显示。
console.dir(Box);  //console.dir()可以显示一个对象的所有属性和方法

在这里插入图片描述

七、ES6箭头函数中的this

所有箭头函数内的this,都是当前函数外层的this指向。

var fn=()=>{};
var obj={a:()=>{console.log(this);//this--->window},b:function(){console.log(this);//this--->当前调用方},// c跟b的一样c(){console.log(this);//this--->当前调用方}
}
var obj1=obj;
obj1.a();
obj1.b();
obj1.c();

在这里插入图片描述

var obj={a:function(){setTimeout(()=>{// 因为本来是回调函数,this统一都会被执行window;// 但是使用了箭头函数,就会全部把这里this重定向到setTimeout外层,也就是obj。console.log(this);},100)setTimeout(function(){console.log(this);// 没有使用箭头函数,this指向window},100);}
}
obj.a();

在这里插入图片描述

八、call、apply、bind

当使用call,apply,bind时,都会将函数中this的指向重新指向到对应的对象。

总结

那么总结一下,都有哪些this:
全局下的this、对象中的this、回调函数中的this(事件函数中的this)、ES6类中的this、ES5中类的this、ES6箭头函数中的this、call,apply,bind中的this。

最后,其实理解了,this也就善良了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/1619876.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

关押罪犯

题目: 描述S 城现有两座监狱,一共关押着 NNN 名罪犯,编号分别为 111 ~ NNN。他们之间的关系自然也极不和谐。 很多罪犯之间甚至积怨已久,如果客观条件具备则随时可能爆发冲突。 我们用 “怨气值”(一个正整数值&#…

罪恶

---- 罪恶 还是属于闲得慌,瞎拍。也许您会帮我想个更棒的标题,或者干脆叫“无题”。 转载于:https://www.cnblogs.com/hzy5901/archive/2010/03/16/5871737.html

游戏开发学什么?四步修炼骨灰级高手

游戏开发学什么?四步修炼骨灰级高手 近日App Store公布了2013年年度最佳游戏奖项,复古风格的捕鱼游戏《奇葩钓鱼》荣获了iPhone平台上年度最佳游戏的殊荣,拥有独特视觉效果的横版冒险游戏《罪恶之地》夺得了iPad平台上年度最佳游戏的桂冠。…

代码随想录打卡—day42—【DP】— 8.27 01背包基础

1 01背包基础 背包概述: 1.1 01背包是什么 有n件物品和一个最多能背重量为w 的背包。第i件物品的重量是weight[i],得到的价值是value[i] 。每件物品只能用一次,求解将哪些物品装入背包里物品价值总和最大。 1.2 01背包二维数组 二维数组还…

3D飞镖游戏源码ios版

一款ios 3D飞镖游戏源码,通过物理引擎和重力感应来控制飞镖向目标物体击中!游戏比较简单,可以学习一下3D游戏的基本开发. 源码下载: http://code.662p.com/view/6262.html 开发平台: 在xcode 4.3编译通过,iphone4&am…

PS飞镖靶的制作

首先我们在Ps中新建一个600像素*600像素的画布,设置分辨率300/200都可以。 步骤如下: 1.拉出两条参考线,一条垂直居中,一条水平居中。 2.用椭圆工具在两参考线中心点拉出一个圆形,设置颜色红色。用矩形选框工具裁剪掉3…

[SCOI2011]飞镖[数学模拟]

2335: [SCOI2011]飞镖 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 482 Solved: 152[Submit][Status][Discuss] Description 飞镖是在欧洲颇为流行的一项运动。它的镖盘上分为20个扇形区域,分别标有1到20的分值,每个区域中有单倍、双倍和三倍的区…

【题解】[SCOI2011] 飞镖

模拟题 红靶子的我们先不考虑。 如果是 {1,2,2} , {2,2,3} 这种只涉及两种倍数的话,我们想到不定方程: axby c 的通解形式(a,b,c 为常数),从而探讨 x,y 在规定取值内是否有解。 探讨 {1,2,3} 的情况。 …

搭载双筒飞镖?这款无人机太危险

折叠式的设计使之方便携带,堪称猎犬好搭档。 近日,基于SuperDrone无人机,南非Haevic公司改造了一款搭载飞镖枪的无人机——DartDrone,专为兽医及狩猎人员研发。 据悉,SuperDrone是一款采用可折叠结构的六翼无人机&…

BZOJ2335: [SCOI2011]飞镖

Description 飞镖是在欧洲颇为流行的一项运动。它的镖盘上分为20个扇形区域,分别标有1到20的分值,每个区域中有单倍、双倍和三倍的区域,打中对应的区域会得到分值乘以倍数所对应的分数。例如打中18分里面的三倍区域,就会得到54分。…

飞镖(bzoj 2335)

Description 飞镖是在欧洲颇为流行的一项运动。它的镖盘上分为20个扇形区域,分别标有1到20的分值,每个区域中有单倍、双倍和三倍的区域,打中对应的区域会得到分值乘以倍数所对应的分数。例如打中18分里面的三倍区域,就会得到54分。…

飞镖和招聘

4月16日 公司里面玩飞镖的同事越来越多了,不少人都得了飞镖综合症(手酸、腰酸、对休息时间非常敏感)。除了飞镖游戏本身的吸引力,我还发现它有很多和我们从事猎头 招聘非常相似的特征: Know how to close the game. 懂…

java设计飞镖游戏_3分钟手把手带你使用Unity制作“扔飞镖游戏”

原标题:3分钟手把手带你使用Unity制作“扔飞镖游戏” 日落西山红霞飞~战士打靶把营归呀巴扎嘿。今天我制作一个简单的打靶游戏(扔飞镖) 在制作之前首先要思考这个游戏需要什么对象,很简单,一只飞镖、一个靶。 这里我把飞镖设置成了刚体&#…

Leetcode——1453. 圆形靶内的最大飞镖数量

墙壁上挂着一个圆形的飞镖靶。现在请你蒙着眼睛向靶上投掷飞镖。 投掷到墙上的飞镖用二维平面上的点坐标数组表示。飞镖靶的半径为 r 。 请返回能够落在 任意 半径为 r 的圆形靶内或靶上的最大飞镖数。 示例 1: 输入:points [[-2,0],[2,0],[0,2],[0,-…

打印飞镖图形

打印如图下非标 代码如下 #define _CRT_SECURE_NO_WARNINGS #pragma warning(disable:6031) #include<stdio.h> #include<string.h> int main() {int n 0;while (scanf("%d", &n) 1){//上n行int i 0;for (i 0; i < n; i){int j 0;for (j 0…

【数据结构与算法】之深入解析“圆形靶内的最大飞镖数量”的求解思路与算法示例

一、题目要求 墙壁上挂着一个圆形的飞镖靶,现在请你蒙着眼睛向靶上投掷飞镖。投掷到墙上的飞镖用二维平面上的点坐标数组表示,飞镖靶的半径为 r,请返回能够落在任意半径为 r 的圆形靶内或靶上的最大飞镖数。示例 1:输入:points = [[-2,0],[2,0],[

【题解】飞镖

题目描述 小明喜欢玩飞镖游戏&#xff0c;他会把每次的得分都记录在数组中。今天有个飞镖大奖&#xff0c;得奖的规则是&#xff1a;如果你4次飞镖的得分先后是&#xff08;a&#xff0c;b&#xff0c;c&#xff0c;d&#xff09;&#xff0c;满足abcd。 小明准备把记录里的其他…

OpenCV技巧篇——多目标视觉定位(以飞镖定位为例)

OpenCV技巧篇【1】——多目标视觉定位&#xff08;以飞镖定位为例&#xff09; 1、针对问题 多目标视觉定位是指通过计算机视觉技术对一张图片中的多个目标进行识别和定位的过程。本篇将以对飞镖定位为例&#xff0c;提出一个简单有效的多目标定位技巧&#xff0c;最终实现如…

LeetCode 1453. 圆形靶内的最大飞镖数量(几何题)

1. 题目 墙壁上挂着一个圆形的飞镖靶。现在请你蒙着眼睛向靶上投掷飞镖。 投掷到墙上的飞镖用二维平面上的点坐标数组表示。飞镖靶的半径为 r 。 请返回能够落在 任意 半径为 r 的圆形靶内或靶上的最大飞镖数。 示例 1&#xff1a; 输入&#xff1a;points [[-2,0],[2,0…

一个飞镖模型

#飞镖 #一个角 from turtle import* def angle():pu()goto(0,0)pendown()pencolor("black")left(45)fd(50)left(68)fd(91.73)left(157)fd(120)begin_fill()fillcolor("black")right(135)fd(50)right(68)fd(91.73)right(157)fd(120)end_fill()#飞镖复杂化 d…