js的this指向

js中的this指向问题经常容易让人混淆，特别是在ES6引入箭头函数后，对于标准函数中的this指向和箭头函数中的this指向就更让人费解。

本文总结了js中标准函数和箭头函数的this指向问题，帮助大家理清js中的this指向。
并且介绍几个改变this指向的方法，改变this指向不管是在js的继承还是js的函数中都是很重要的。

一抓住核心

我在网上看过一些关于this指向的博客，很多都是通过例子就直接开始讲解，虽然这样也可以帮助读者快速了解，但是在这里，我希望由一般到特殊，先指出标准函数和箭头函数中this指向的不同，再通过例子讲解来验证。

刚开始可能看不太懂，但是经过例子的讲解，就会逐渐理解。

对于标准函数中的this：this引用的是把函数当成方法调用的上下文对象。标准函数中的this指向是当我们调用函数的时候确定的，调用方式的不同决定了this的指向不同，一般指向我们的调用者。直白点就是：哪个对象调用函数，函数里面的this指向哪个对象。
对于箭头函数中的this：this引用的是定义箭头函数的上下文。箭头函数不会创建自己的this，所以它没有自己的this，它只会在自己作用域的上一层继承this。所以箭头函数中this的指向在它在定义时已经确定了，之后不会改变。

二标准函数中的this

核心是：哪个对象调用函数，函数里面的this指向哪个对象。

只不过window作为浏览器中的全局对象，在调用函数时经常是省略的，有时候很多this指向的例子看起来奇怪的原因，就是因为window对象的省略。

下面的表格列出了在标准函数中不同调用方式的this指向，从中也可以间接知道一般在调用什么函数时用到window对象。

调用方式	this指向
普通函数调用	window
构造函数调用	实例对象，原型对象里面的方法也指向实例对象
对象方法调用	该方法所属对象
事件绑定方法	绑定事件对象
定时器函数	window
立即执行函数	window

函数的不同调用方式决定了this 的指向不同，下面是一些例子：

① 普通函数 this 指向window

<script>username = 'rs';function fn() {console.log('普通函数的this' + this);console.log(this.username);}fn();  //相当于window.fn()
</script>
//输出结果：
//普通函数的this[object Window]
//rs

② 对象的方法 this指向的是对象 o

<script>    color = 'red';var o = {color: 'blue',sayHi: function() {console.log('对象方法的this:' + this);console.log('color:' + this.color);}}o.sayHi();
</script>
//输出结果：
//对象方法的this:[object Object]
//color:blue

③ 构造函数 this 指向 subClass 这个实例对象

<script>let TestClass=function(){this.name='111';}let subClass=new TestClass();subClass.name='cn';console.log(subClass.name);//cnlet subClass1=new TestClass();console.log(subClass1.name)//111
</script>

④ 绑定事件函数 this 指向的是函数的调用者 btn这个按钮对象

<body><button>点击</button><script>var btn = document.querySelector('button');btn.onclick = function() {console.log('绑定时间函数的this:' + this);};</script>
</body>
//点击button，输出结果
//绑定时间函数的this:[object HTMLButtonElement]

⑤ 定时器函数 this 指向的也是window

<script>window.setTimeout(function() {console.log('定时器的this:' + this);}, 1000);
//定时器前面经常省略window，这点要注意
//虽然省略了window，但是其调用对象仍然是window，this指向window
</script>
//输出结果
//定时器的this:[object Window]

⑥ 立即执行函数 this还是指向window

<script>(function() {console.log('立即执行函数的this' + this);})();
</script>
//输出结果
//立即执行函数的this:[object Window]

三箭头函数中的this

核心是：箭头函数不会创建自己的this，所以它没有自己的this，箭头函数里面的 this 是继承外面的环境。所以箭头函数中this的指向在它在定义时已经确定了，之后不会改变。

有人可能对环境和作用域这样的概念不太熟悉，这里可以这样简单理解，{}内和函数内的就是个局部作用域或者局部环境，最外层就是全局作用域或者全局环境。

例子①

var id = 'GLOBAL';
var obj = {id: 'OBJ',a: function(){console.log(this.id);},b: () => {console.log(this.id);}
};
obj.a();    // 'OBJ'，标准函数，this指向调用者obj
obj.b();    // 'GLOBAL'，箭头函数，继承外面作用域，也就是全局环境的this值 —— window

例子②

window.color = 'red';
let o = {color: 'blue'
};
let sayColor = () => console.log(this.color);
sayColor(); // 'red'o.sayColor = sayColor;
o.sayColor(); // 'red'
//对象o的方法sayColor是使用箭头函数定义的
//这个函数中的this就永远指向它定义时所处的全局执行环境中的this
//即便这个函数是作为对象o的方法调用，this依旧指向Window对象。

例子③

let obj={a:'rs',fn:function(){    setTimeout(function(){console.log(this.a)},1000);//相当于window.setTimeout(function(){console.log(this.a)},1000);}
};
obj.fn();//undefined

不难发现，虽然 fn() 里面的 this 是指向 obj ，但是，传给 setTimeout 的是标准函数， this 指向是 window ， window 下面没有 a ，所以这里输出 undefined。

换成箭头函数

let obj={a:'rs',fn:function(){    setTimeout(()=>{console.log(this.a)},1000);}
};
obj.fn();//'rs'

这次输出 rs 是因为，传给 setTimeout 的是箭头函数，然后箭头函数里面没有 this ，所以要向上层作用域查找，在这个例子上， setTimeout 的上层作用域是 fn。而 fn 里面的 this 指向 obj ，所以 setTimeout 里面的箭头函数的 this ，指向 obj ,所以输出rs。

四改变函数内部this指向

JavaScript 为我们专门提供了一些函数方法来帮我们处理函数内部 this 的指向问题，常用的有 bind(),call(),apply()三种方法

4.1call() 方法

call()方法调用一个对象，简单理解为调用函数的方式，但是它可以改变函数的this指向
fun.call(thisArg,arg1,arg2,.....)
thisArg: 在 fun 函数运行时指定的 this 值
arg1,arg2: 传递的其他参数
返回值就是函数的返回值，因为它就是调用函数
因此当我们想改变 this 指向，同时想调用这个函数的时候，可以使用 call，比如继承

<body><script>// 1. call()var o = {name: 'andy'}function fn(a, b) {console.log(this);console.log(a + b);};fn.call(o, 1, 2);// call 第一个可以调用函数 第二个可以改变函数内的 this 指向// call 的主要作用可以实现继承function Father(uname, age, sex) {this.uname = uname;this.age = age;this.sex = sex;}function Son(uname, age, sex) {Father.call(this, uname, age, sex);}var son = new Son('刘德华', 18, '男');console.log(son);</script>
</body>

4.2apply()方法

apply()方法调用一个函数，简单理解为调用函数的方式，但是它可以改变函数的 this指向
fun.apply(thisArg,[argsArray])
thisArg: 在 fun 函数运行时指定的 this 值
argsArray : 传递的值，必须包含在数组里面
返回值就是函数的返回值，因为它就是调用函数
因此 apply 主要跟数组有关系，比如使用 Math.max() 求数组的最大值

<body><script>// 2. apply()  应用 运用的意思var o = {name: 'andy'};function fn(arr) {console.log(this);console.log(arr); // 'pink'};fn.apply(o, ['pink']);// 1. 也是调用函数 第二个可以改变函数内部的this指向// 2. 但是他的参数必须是数组(伪数组)// 3. apply 的主要应用 比如说我们可以利用 apply 借助于数学内置对象求数组最大值 // Math.max();var arr = [1, 66, 3, 99, 4];var arr1 = ['red', 'pink'];// var max = Math.max.apply(null, arr);var max = Math.max.apply(Math, arr);var min = Math.min.apply(Math, arr);console.log(max, min);</script>
</body>

4.3bind()方法

bind()方法不会调用函数。但是能改变函数内部 this指向
fun.bind(thisArg,arg1,arg2,....)
返回由指定的 this值和初始化参数改造的原函数拷贝
因此当我们只是想改变 this 指向，并且不想调用这个函数的时候，可以使用bind

<body><button>点击</button><script>// 3. bind()  绑定 捆绑的意思var o = {name: 'andy'};function fn(a, b) {console.log(this);console.log(a + b);};//fn.bind(o,1,2); 不会像call和apply那样立即调用var f = fn.bind(o, 1, 2);f();// 1. 不会调用原来的函数   可以改变原来函数内部的this 指向// 2. 返回的是原函数改变this之后产生的新函数// 3. 如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind// 4. 我们有一个按钮,当我们点击了之后,就禁用这个按钮,3秒钟之后开启这个按钮var btn1 = document.querySelector('button');btn1.onclick = function() {this.disabled = true; // 这个this 指向的是 btn 这个按钮// var that = this;setTimeout(function() {// that.disabled = false; // 定时器函数里面的this 指向的是window，所以要用that代替this.disabled = false; // bind()之后，定时器函数里面的this 指向的就是btn}.bind(this), 3000); // 这个this在function()外面 指向的是btn这个对象}</script>
</body>

4.4三个方法的区别

call和apply会调用函数，并且改变函数内部的this指向
call和apply传递的参数不一样，call 传递参数，apply 必须数组形式
bind不会调用函数，可以改变函数内部this指向

4.5注意

call()、apply()、bind()等方法不能改变箭头函数中this的指向。

var id = 'Global';
let fun1 = () => {console.log(this.id)
};
fun1();                     // 'Global'
fun1.call({id: 'Obj'});     // 'Global'
fun1.apply({id: 'Obj'});    // 'Global'
fun1.bind({id: 'Obj'})();   // 'Global'

彻底搞懂js中的this指向相关推荐

彻底搞懂 JS 中 this 机制
彻底搞懂 JS 中 this 机制摘要:本文属于原创,欢迎转载,转载请保留出处:https://github.com/jasonGeng88/blog 目录 this 是什么 this 的四种绑定规 ...
帮你彻底搞懂JS中的prototype、__proto__与constructor（图解）
帮你彻底搞懂JS中的prototype.__proto__与constructor(图解) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文 ...
这一篇彻底搞懂JS中的prototype、__proto__与constructor真的很好
文章目录 1. 前言 2. _ _ proto _ _ 属性 3. prototype属性 4. constructor属性 5. 总结提示:不要排斥,静下心来,认真读完,你就搞懂了!(可以先看一下 ...
（转）帮你彻底搞懂JS中的prototype、__proto__与constructor（图解）
文章目录 1. 前言 2. _ _ proto _ _ 属性 3. prototype属性 4. constructor属性 5. 总结提示:不要排斥,静下心来,认真读完,你就搞懂了!(可以先看一下 ...
彻底搞懂 JS 中 this 机制 1
彻底搞懂 JS 中 this 机制摘要:本文属于原创,欢迎转载,转载请保留出处:https://github.com/jasonGeng88/blog 目录 this 是什么 this 的四种绑定规 ...
$.ligerdialog.open中确定按钮加事件_彻底搞懂JavaScript中的this指向问题
JavaScript中的this是让很多开发者头疼的地方,而this关键字又是一个非常重要的语法点.毫不夸张地说,不理解它的含义,大部分开发任务都无法完成. 想要理解this,你可以先记住以下两点: ...
一文搞懂JS中的赋值·浅拷贝·深拷贝
前言为什么写拷贝这篇文章?同事有一天提到了拷贝,他说赋值就是一种浅拷贝方式,另一个同事说赋值和浅拷贝并不相同.我也有些疑惑,于是我去MDN搜一下拷贝相关内容,发现并没有关于拷贝的实质概念,没有办法只 ...
彻底搞懂javascript中的replace函数
javascript这门语言一直就像一位带着面纱的美女,总是看不清,摸不透,一直专注服务器端,也从来没有特别重视过,直到最近几年,javascript越来越重要,越来越通用.最近和前端走的比较近,借此 ...
来一轮带注释的demo，彻底搞懂javascript中的replace函数
javascript这门语言一直就像一位带着面纱的美女,总是看不清,摸不透,一直专注服务器端,也从来没有特别重视过,直到最近几年,javascript越来越重要,越来越通用.最近和前端走的比较近,借此 ...
理解js中this的指向
彻底理解js中this的指向 JavaScript 的 this 指向问题深度解析转载于:https://www.cnblogs.com/jeacy/p/6509616.html

彻底搞懂js中的this指向

js的this指向

一抓住核心

二标准函数中的this

三箭头函数中的this

四改变函数内部this指向

4.1call() 方法

4.2apply()方法

4.3bind()方法

4.4三个方法的区别

4.5注意

彻底搞懂js中的this指向相关推荐

最新文章

热门文章

彻底搞懂js中的this指向

js的this指向

一 抓住核心

二 标准函数中的this

三 箭头函数中的this

四 改变函数内部this指向

4.1call() 方法

4.2apply()方法

4.3bind()方法

4.4三个方法的区别

4.5注意

彻底搞懂js中的this指向相关推荐

最新文章

热门文章

一抓住核心

二标准函数中的this

三箭头函数中的this

四改变函数内部this指向