什么是this？

定义：this是包含它的函数作为方法被调用时所属的对象。
说明：这句话有点咬嘴，但一个多余的字也没有，定义非常准确，我们可以分3部分来理解它！
1、包含它的函数。2、作为方法被调用时。3、所属的对象。

严格模式this的指向

"use strict";console.log(this);//指向的windowfunction fn(){console.log(this);//undefined}fn();

ES5非严格模式全局中this和函数中this都指向window
ES5严格模式，ES6，全局中this仍然指向window，函数中this指向undefined

对象模式this的指向

var obj={a:1,b:function(){console.log(this);//this不会因为变量引用改变而改变this指向当前对象自身objconsole.log(obj.a);//变量会发生引用改变},c:this.a// this指向对象外this的指向// 对象没有创建完成时，this还没有生成，this就指向对象外this的指向}var o=obj;obj={a:10,d:10}o.b();

回调函数this的指向

var obj = {a: function () {console.log(this,"____");var self=this;function fn1(fn) {fn();arguments[0]();fn.call(self);}function fn2() {console.log(this);//window 回调函数中// 1、如果直接指向的回调函数，this指向最外层window// 2、如果通过arguments直接使用参数指向函数，this则指向执行当前函数的arguments// 3、如果回调函数通过call,apply,bind重新指向了新的对象时，this就是指向新对象}fn1(fn2);},};obj.a();var obj={b:1,a:function(){setTimeout(function(){console.log(this);}, 2000);setTimeout(function(obj){console.log(obj.b);}, 2000,this);}}obj.a();

事件中this的指向

var obj={b:1,a:function(){//   特殊的回调函数document.addEventListener("click",this.clickHandler);},clickHandler:function(e){console.log(this);//事件侦听的对象 e.currentTarget} } var obj={b:1,a:function(){console.log(this);//   特殊的回调函数document.addEventListener("click",this.clickHandler);document.attachEvent("onclick",this.clickHandler);},clickHandler:function(e){console.log(this===document);//addEventListener事件侦听的对象 e.currentTargetconsole.log(this===window);//IE8 attachEvent侦听事件时，this指向window} } obj.a();

ES6类中的this

class Box{static _instance;constructor(){console.log(this);//指向被实例化的对象}static getInstance(){if(!Box._instance){Box._instance=new Box();}return Box._instance;}play(){console.log(this,"|");//指向被实例化的对象}static run(){console.log(this);console.log(this===Box,"____");// this就是当前类名也是构造函数// 任何的静态方法中this都是当前类// 静态方法中无法获取到实例化对象的this的return this;}static plays(){this.getInstance().play();var o=this.getInstance();var o1=this.getInstance();console.log(o===o1);}}var b=new Box();//会执行构造函数，这是构造函数中this就是这个b对象b.play();//b对象下的方法play，因此play方法中this被指向b，谁执行play，this指向谁console.log(Box.run()===b);//falseconsole.log(Box.run()===b.constructor);//trueBox.plays();

ES5 面向对象中的this

function Box(){console.log(this);}Box.prototype.play=function(){console.log(this);//this是指向执行该方法的实例化对象}Box.run=function(){console.log(this);//Box}Box();//this是window或者undefinedvar b=new Box();// this是实例化后b对象b.play();

箭头函数中的this

var obj = {a: function () {setTimeout(() => {console.log(this);//this是箭头函数外this的指向// 上下文环境中this的指向}, 2000);},};obj.a();var obj={a:function(){document.addEventListener("click",this.clicHandler);},clicHandler:function(e){setTimeout(()=>{console.log(this);},2000);}}obj.a();var obj={a:function(){console.log(this);//obj},b:()=>{console.log(this);//window}}obj.a();obj.b();function Box(){}Box.prototype.run=()=>{console.log(this);//window}var b=new Box();b.run();call apply bindfunction fn(){console.log(this);}var obj={a:1}fn.call(obj);//fn中this指向objfn.apply(obj);//fn中this 指向objfn.bind(obj)();//fn中this指向objvar obj={a:function(){function fn(){console.log(this);}fn();console.log(this);//window 如果是call apply bind 带入的是null，将会把这里的this重新指向window}}obj.a.call(null);class Box{constructor(){}play(){var o={run:function(){function fns(){console.log(this);}return fns;},play:function(fn){fn();arguments[0]();},clickHandler(){// this   实例化的bo.play.call(this,o.run());}}document.addEventListener("click",o.clickHandler.bind(this));}}var b=new Box();b.play(); var obj={a:10,abc:function(){setTimeout(()=>{this.a++;console.log(this.a,"_______");(function(){this.a++;console.log(this.a);}).call(this.c)},1000);},c:{a:20}}obj.abc();

PS:如果想获取更多的知识视频，加QQ好友10398975免费送给大家

关于JavaScript中万恶的this相关推荐

浅析 JavaScript 中的函数 uncurrying 反柯里化
柯里化柯里化又称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间可嵌套多层这样的接受部分参数函数,直至返回最后结果. 因此柯里化的过程是 ...
JavaScript中，this的绑定规则
对于 JavaScript 新手来说,this 是非常基础同时也难以理解的知识点. 比如下面的代码,this 指向就有三种方式. 在<你不知道的 JavaScript>一书中,我总算比较清 ...
Javascript中undefined,NaN等特殊比较
以下内容转自: http://blog.csdn.net/hongweigg/article/details/38090093 1.问题:在Javascript中,typeof(undefined) ...
Javascript中二进制数据处理方法
Javascript中二进制数据处理方法转载于:https://www.cnblogs.com/motadou/archive/2012/02/19/2358514.html
JavaScript 中的有限状态机
http://www.ibm.com/developerworks/cn/web/wa-finitemach/ JavaScript 中的有限状态机 Page navigation 系列文章有限状态 ...
在Javascript中使用面向对象的编程
by Mike Koss March 26th, 2003 这是一篇,我个人认为最好的,Javascript面向对象编程的文章.翻译不好的地方,还望大家指正,谢谢. 如果您需要,可以访问下面的地址取得 ...
取出url中的字符_如何在JavaScript中解析URL：例如主机名，路径名，查询，哈希？...
统一资源定位符(缩写URL)是对Web资源(网页,图像,文件)的引用.URL指定资源位置和检索资源的机制(http,ftp,mailto). 例如,这是此博客文章的URL: 通常,您需要访问URL的特 ...
在javascript中判断类型
String 一个字符串始终是一个字符串,所以这一块是很容易.除非使用new(new String)调用,否则typeof将返回"object".所以也要包含那些可以使用的字符串i ...
JavaScript中几个重要的知识点（1） ---- 面向对象
JavaScript中几个最重要的大知识点面向对象 DOM事件异步交互ajax 面向对象在JS中可以把任意的引用和变量都看成是一个对象.面向对象的主要三个表现形式: 封装继承多态 1. 封装 ...
javascript中实例方法与类方法的区别
在javascript中,类有静态属性和实例属性之分,也有静态方法和实例方法之分类属性(静态属性):通过类直接访问,不需要声明类的实例来访问类方法(静态方法):通过类直接访问,不需要声明类的实例来 ...

关于JavaScript中万恶的this